This week we look at how to plan and conceptualize our designs before we begin coding. We will learning about wireframes, prototypes, and learn how to use Figma to create both. Students will begin using these tools to plan their explainer website.
Figma is the industry standard design tool for UX/UI design and web design. It is free and full features can be unlocked with their free education account.
Sign up for Figma
Verify your account as an education account
You will be able to use the free version for this project, but you will need to verfiy your Figma account to complete all the assignments for the semester.
A wireframe is a way to design and visualize your website or application at the structural level. It ignores the styles and aesthetics that can often trip up making sure we have an effective foundation. Wireframes are used to layout content, functionality, and user needs. It is much easier to make changes to things like navigation and layout when we haven't added additional layers like visual design and content—it's easier to adapt.
Wireframes can also help us see the basic HTML elements a page needs when we start to code because the structure is laid bare.
Wireframes are not fancy. You can even sketch a wireframe on a napkin and have it be an effective tool.
A prototype takes the wireframe to the next stage but adding design choices such as color palettes, fonts, icons, images, and specific content. This steps helps test out what things will look like before writing your CSS. Maybe what you had envisioned in your head actually doesn't look as good once it's down on "paper". It's much faster and easier to make quick design changes to a prototype than it is to change code.
Prototyping tools will also allow you to add basic functionality to simulate the user's experience. You can click through links, swipe through carousels, and see hover functions. It is interactive.
A prototype also helps your show your vision to project stakeholders, such as your teammates, boss, or even client. This allows you to get feedback and make changes before you are too far into the development process, which saves you time and effort.
Although we don't go into user testing in this class (check out DTC 478 if you're interested in that!), a prototype also allows you to take your website or application and have users test it. This again allows you to gather feedback and make changes before you are too far into the development process.
Low fidelity and high fidelity refer to how detailed the wireframe or prototype is. A wireframe scribbled on a napkin would most likely be considered lower fidelity than a precisely aligned and sized wireframe made in Figma. A prototype with general visual design only would most likely be considered lower fidelity than a prototype with visual design, content, and interaction added. Sometimes, a lower fidelity prototype may be all a situation calls for, and spending the extra time on making it the highest fidelity possible isn't useful. Other times, a high fidelity prototype might be neccessary. It all depends on the situation!
As we create websites and web applications beyond this class, it's important to realize we'll rarely be doing it alone. There is almost always at least one other person involved. Whether you're on a team, designing for a developer, developing for a designer, producing something for your boss or a client, websites and web applications don't get made in a vaccuum. Wireframing and prototyping make the collaboration process easier, providing communication tools, a clearer production pipeline, and resulting in better feedback.
Grids are the foundation of the web. Even from the early days of websites, tables served as the visual structure for many pages. Today, there are several types of grids that can be leveraged for your layout.
Read more about grids in interface design from Nielsen Norman Group.
Using a grid helps keep your layout aligned, makes it easier to follow design principles like balance and repetition, improves consistency, and make your page more functional. It also helps your design adapt better across device sizes.
You could take an entire class on color theory alone. While we will continue to talk about color and other design aspects throughout the semester, for this module, we will look at some basic do's and don'ts.
A color palette should, in general, contain 3-5 colors. Any more and any less, and we can find our design either too flat or too busy. Some great color palette resources are:
In additional to finding colors using these tools, you can also test your chosen colors for accessibility.
Color psychology refers to the influence of color on our feelings, emotions, and behaviors. Although it's a bit subjective, color psychology can help us subconsciously influence people who visit our website in meaningful ways. This makes it a powerful tool for design and marketing. Colors can spark emotion and evoke certain cultural ideas based on common color associations.
It's important to realize that color psychology is both subjective, but also cultural. What meaning certain colors might have in one country can be different in another.
A common mistake in color is balance. The 60-30-10 rule is commonly used in all areas of design, including interior design. It says that a primary color should be used in 60% of the design, a secondary color in 30% of the design, and an accent color in only 10% of the design. The accent color is often a bright, eye catching color that can be used to draw the user's eye to important elements like a call-to-action.
Due:Jan 23
Due:Jan 26
