This is an overview of the Web Design Basics course of Viking Code School’s prep work. The course covered the entire design process, including user experience (UX), visual design (color, typography, layout, etc.), and mockups. The assignments included three UX teardowns, as well as four visual design teardowns of existing websites. The final project for the course (see last post) included a UX and visual design teardown of Facebook, followed by a mockup of the main pages. During the last stage of this project, I learned how to utilize the program Balsamiq for mocking up websites and applications in preparation for the production stage (writing code).
The following are a series of questions that cover the main topics of the course that I answered to review the material and test my knowledge.
The Design Process
Why is it so important to design before building?
The design process allows a developer to create a good framework for what they are building before entering the production phase of actually writing code. Planning for the user’s goals, their experiences while using the product, the visual layout, colors, typography, and other elements helps to create a foundation from which to work upon. Skipping over the design phase can lead to wasting a lot of time and effort on code that turns out to be not what is needed or what works best for the product’s goals and user experience. This makes going through the design process an essential step before any code is written in the production phase.
What are the three phases of the design process?
- Discovery: This phase focuses on identifying the users of the product, what their goals are, and how their goals align to the business. Information on users can be obtained through interviews and creating specific personas, which are descriptions of individual people who may use the product.
- Strategy: This phase involves creating a user experience that helps all of the personas from the discovery phase accomplish their goals effectively, efficiently, and with high satisfaction. The site’s information architecture should be sketched out, showing how pages link to one another. Sketching the user flow of how one gets from the landing page to each goal is also useful.
- Design: The site architecture and user interactions are taken and built into an actual visual design, using tools like color, typography, layout, alignment, and others to mockup the site. A program like Balsamiq can be used to create professional mockups of each page.
What is UX?
User experience (UX) relates to everything that affects a user’s interaction with a product. Good user experience connects both the user’s needs and the business’ needs. The site should allow a user to accomplish their goals efficiently, effectively, and with a high degree of satisfaction. Friction (the time a user has to take to click, trust, or enter information) should be minimized.
How is UX different from UI?
The user interface (UI) is the graphical layout and appearance of the site, while user experience (UX) relates more to the user’s interactions with the site. Many elements of UI help to contribute to a good UX.
How is UI different from interaction?
UI relates to providing an attractive and responsive site to the user, while UX deals more with the actual interactions the user makes on the site.
Who is the most important person for achieving good UX?
The most important person in considering UX is the actual users that will be utilizing the product. This also connects to how the user’s goals connect to those of the business.
What are the 3 key factors in determining (and measuring) good UX?
Measuring a site’s UX quality is determined by its effectiveness, efficiency, and level of satisfaction.
What are the main components of the UX designer’s toolkit?
The three main components of a UX designer’s tools are information architecture, navigation, and interface and interaction.
What is information architecture?
The information architecture of a site lays out how the pages are connected to one another and how a user gets from one place to another. This involves determining the function of each page and how that function relates to the function of the others.
What factors should guide your choice of information architecture?
Sites should try to provide an information architecture that easily allows the user’s goals to be accomplished. The simplest possible information architecture with a shallower depth is usually best.
How could you verify with users that you’ve chosen a good information architecture?
Using cards for each page, you can ask a potential user to layout what they think a logical architecture for the site may be. Comparing this to your own ideas about the site’s information architecture can help lead you what will be work for the user experience.
What are 3 common navigation patterns?
A single path (home page), a flat structure (home page with additional pages), and a strict hierarchy (where series of pages are nested within category pages) are all common navigation patterns.
What 2 key questions should you answer for the user on every page to have a good navigation flow?
- Where am I and how did I get there?
- Where should I go next and how do I get there?
What is a CTA?
A call to action (CTA) is a clear and concise indicator to the user what action they should take next. CTAs often appear as big bold text that leads to a prominent button. The sign up buttons or add to cart buttons on many sites are good examples of CTAs.
How many CTAs should you typically have on a page?
There should usually only be a single CTA on each page, making it abundantly clear what the user’s next step should be.
What are the 10 properties of good interaction design?
- Use established patterns.
- Be consistent.
- Draw the user’s eye.
- Provide feedback for interactions.
- Provide an “undo” for all actions.
- Help users diagnose and recover from errors.
- Empower your experienced users.
- Speak the users’ language.
- Keep It Simple Stupid (KISS)
- Identify that next step.
What is design?
Design involves the visual appearance and layout of a site, which helps create an appealing and well organized product that contributes to a positive UX.
What are the 10 principles of good design according to Dieter Rams?
Good design 1) is innovative, 2) makes a product useful, 3) is aesthetic, makes a product understandable, 5) is unobtrusive, 6) is honest, 7) is long-lasting, 8) is thorough to the last detail, 9) is environmentally friendly, and 10) is as little design as possible.
Why should you use common layouts in your site composition?
Common layouts create a familiar and easily accessible site for the user. Common layouts include the single visual, the Z layout, the Rule of Thirds, and the Golden Ratio.
What pattern will your user’s eye typically follow?
A user’s eyes typically flow from large visual elements, to bold headlines, sub headers, and finally to smaller text or the body of a page.
What is whitespace and why is it important?
Whitespace is any area of the page that is left void of content, but is important to the appearance and flow of the page. Too much content across the entire page without any whitespace to break it up and indicate a positive flow can overwhelm a user.
What is visual hierarchy and why is it so important for websites?
The visual hierarchy of a page refers to the layout of elements, such as images, headlines, bodies of text, etc. and how they help create a flow through the content for the user. The path the user will take through a page is very dependent on the visual hierarchy.
What are the 8 primary properties of page elements that allow you to alter the visual hierarchy?
- Density and Whitespace
- Style and Texture
Which of these are the CRAP factors that determine relationships between elements?
Contrast, Repetition, Alignment, and Proximity
What is a serif?
Serif fonts are more formal than sans-serif fonts and include embellishments and flicks on the tips and edges of the letters that create a unique visual style.
Where do fonts come from?
Fonts are a particular size, weight, and style of a typeface (or font family), which is a set of letters that share common design features. Fonts were developed after the invention of the printing press and typefaces were used to produce writing in print form.
What is vertical rhythm and why is it useful?
Vertical rhythm is the concept that as a reader is consuming a long piece of text that it is easiest to scan smoothly downward encouraged by a particular line spacing related to text height. It creates a repeated pattern of movement to flow through the content.
How is vertical rhythm achieved?
Using baselines to layout the line spacing and text height of your text is the best way to achieve a good vertical rhythm. Baseline overlays can be used to help accomplish this.
What is a grid system?
A grid system is when a page is divided into a set number of pieces. Some typical grid systems used are a 12 or 16 column grid.
Why are grids useful?
Grids help to layout different elements of a page in an organized manner that lends to good visual appeal and user experience.
What are the most common grids?
The most common grids are divided into 12 or 16 columns, which can easily divide into 2 or 4 column sections. A 960 pixel grid is a common overlay to use for visual design.
What are the primary, secondary, and tertiary colors?
- Primary: Red, Blue, Yellow. They can be used in combination with each other to create any other color.
- Secondary: Purple, Orange, Green. Created by mixing two primary colors together.
- Tertiary: Several – these are created when mixing one primary and one secondary color together.
What are complementary colors?
Complementary colors are those that are opposites on the color wheel. Since they are exact opposites, they create high contrast and have a high visual impact.
What is a monochrome color scheme?
A monochromatic color scheme uses one color hue and various tints or shades of that same color.
What is a complementary color scheme?
See above for complementary. Split complementary color schemes are those that take one color and the two colors on either side of what would be the first color’s complementary color. This feels a bit more balanced and calmer than the full complementary scheme.
What is a triadic color scheme?
This scheme uses three colors that are evenly spaced around the color wheel. This provides a very bright and vibrant set of colors.
What add-ons and tools make your life easier when choosing color schemes?
The ColorZilla eyedropper tool is an add-on for Chrome that allows you to grab any color off of a website. Paletton.com is a tool that generates a color scheme for you by simply selecting a source color and the kind of scheme you would like to use with it.
What is RGB?
Red, Green, Blue (RGB) is a number system to represent colors. Each color is given a value between 0 and 255 and used in combination to create a color.
What is Hexadecimal? How can you tell a color by reading it?
Hexadecimal is another number system to represent colors. This notation uses 16 digits from 0-9 and A-F to create a six digit representation of a number, each RGB value given a 2 digit value. 00 is the lowest value, while FF is the highest. The notation can be shortened to 3 digits instead of 6 if each RGB values are the same. For example, white, FFFFFF, can be written as FFF.
What color is closest to (without looking):
- #dd0044 – bright red, slight hint of purple
- #99ff99 – light green
- #93c47d – olive green
- #c27ba0 – dark pink
- #7bc3ef – sky blue
- #fff – white
- #000 – black
What is a mockup?
A mockup is a graphical sketch of what the site will look like.
How is a mockup different from a wireframe or a prototype (technically speaking)?
A wireframe is only a structural representation of the site, while a mockup sketches out a static visual look, including images and color. A prototype shows the user’s interactions, taking the static mockup to an interactive (non-static) level.
What is “fidelity” in the world of mockups?
Fidelity is a measure of how close the mockup is to the end product. A simple layout sketch on paper is a low fidelity mockup, while a mockup filled with accurate images and coloring made in Photoshop is a high fidelity mockup. Mockups created in Balsamiq have much higher fidelity than a simple sketch, but less fidelity than a detailed Photoshop mockup.
In Balsamiq, how do you download and use a partial mockup (like a control or grid) someone else uploaded to the web?
From the user-submitted mockups page you can select BMML files to download. From Balsamiq, you use the dropdown menu on the nav bar to go to Symbols and then the Import Symbols from File button (appears as a cloud with an addition sign). These mockup pieces, or symbols, can now be used as elements within your own mockup project.