Introductory Questions

Chelsea Yuan, Computer Science and Communication Design, Junior


I like both programming and design well enough. I like using code to implement my designs.


I have experience with HTML/CSS/JS. I took CSE330 (Rapid Prototype) and have worked in some front-end engineering environments.


I would love to pick up some tips and tricks that I probably still don't know surrounding HTML/CSS/JS and maybe pick up some experience with a JS library. It would also be great to find out how to optimize designer to devloper communication because I've noticed hand-off is pretty rocky in practical work, and I see plenty of complaints from each side about the other.


Screens are dynamic. Between mobile, web, and TV there are many different sizes and breakpoints, and a screen can be resized or reoriented at anytime depending on the technology. The design has to be able to adapt when the user changes their viewport.


I think Betterment's design is effective because it makes investing, which I think is a bit of a daunting subject, very approachable. It has a consistent and welcoming color palette, as well as a clean interface supported by lots of icons and imagery that helps the user feel more comfortable and engaged with the site and its contents. It has an easily navigable homepage hierarchy for a first time user who wants to get started with the service plus a couple interactive elements that help draw the user in and lead them to more information if they are not as sure about getting started. The structure is consistent and not very text-heavy. With its liberal use of graphics, it helps break up information about investment, finances, and savings into more digestible pieces. There is also use of color and tags/highlights to help draw attention to features of their services people might be interested in, while maintaining a good amount of open whitespace, so a user doesn't feel overwhelmed.


As a site that supports news, radio, music, and various other pieces of media, NPR clearly displays where those things can be accessed, and it is well-organized into common and easily accessible sections. It presents recent and relevant news in multiple subjects, prioritizing the headline in the hierarchy, so a user can easily identify the subject of an article and quickly skim for information. It also clearly differentiates to the user what can be read, what can be watched, and what can be listened to, as well as what they can and cannot interact with. It provides tags for articles and a search functions, so users know where to look for or browse the content of their interest. And if they don't know, NPR clearly communicates where additional stories and popular content can be accessed in addition to local and live radio content.


I like that this MIT Climate Primer is able to communicate a lot of complex information in an interactive way. A lot of the facts and figures are organized so the user can engage in the interface to access it instead of just reading and scrolling. The areas where the user can interact are also clearly indicated by hover states, colors, motion, and other styling. The visual style and navigational method is consistent, and there are supporting graphics, data visualizations, and external media to support textual information, which itself is organized well hierarchically to highlight key facts and ideas. The structure of the sections, from research/explanations to call to actions, is understandable and can be easily accessed through the menu. I feel that the use of motion in particular communicates the information well while making it engaging, as a lot of the data presented is revealed linearly, and having something be hidden from the user initially then revealed gradually seems to hold attention well. The quizzes also encourage active participation from the user and present a positive challenge that supports information recall.