Intro
Before diving directly into creating a website it's a good idea to think about what it should look like and how it should function. That's where design comes in!
Here are some building blocks of design that I learned about in: The Principles of Beautiful Web Design.
Layout and Composition
Purpose
The first thing to do when creating a website is to clearly understand the purpose & goals, both for stakeholders creating it and the users who need it. I've already wrote about this in my article about Purpose First Design, but it's worth mentioning here that you should start with research.
Taking time to have the right conversations first will save headache and avoid wasted effort on creating components that were never needed, or insufficient for the task at hand. The process starts with Discovery and then moves to Exploration of all the ideas for what design makes sense in conversation with stakeholders before actually building the website.
Accessibility
To understand accessibility needs you need to talk with users if possible. There are general guidelines and good practice like Universal Design, but having a clear idea of your user personas makes it more concrete how people with differing abilities will be using your website.
That said, there are also tools that help check whether your code is well formed, which does a lot of the work to make it accessible. The WebAIM evaluation tool WAVE is super helpful. Good coding habits such as not skipping heading levels, using multiple ways to give user feedback (not just relying on color, for example) and writing concise content are all easy ways to make your content more accessible.
But if left for the end, then accomodations will have to be crammed into an already existing design. It's important to think about and test accessibility to avoid pitfalls later so they are included in the project scope before it's too costly to fix.
Placement
Layout is a fundamental part of a website's design. It can complicated by the fact that we view websites on a variety of devices, some without any screen at all. It's important that a design is responsive and changes layout according what's available.
It's still helpful to design on a grid, but it's not a hard rule. CSS offers grids and flexboxes, among other options. These days it's easy to find other websites to get inspiration from too, with tried-and-true designs to borrow from.
There are a few elements of placement that can be used to make pages more interesting to navigate. Balance, for example, can be achieved either with horizontal symmetry, bilateral symmetry or even radial symmetry. This helps make a page not only look good, but it generally means using space more efficiently by making it easier to scan. Asymmetrical balance is also possible by carefully combining objects of different sizes shapes, tones and placement.
Unity
Unity can help a page feel consistent and cohesive. When a user first lands on your site, it could be from anywhere, so consistency in page design and menu placement helps. It also helps group content from within the same page so that people can easily tell what is related.
Unity can be acheived through proximity (placing objects close together), or through reptition.
Emphasis
Sometimes we want the user to focus on a specific part of the page. This can be acheived in multiple ways:
- A focal point will draw the user's attention when something is important.
- Placing an item in the center of the page draws more attention to it.
- Flow keeps users' eyes moving along a desired path.
- Isolatation can help something stand out by giving it a lot of space.
- Contrast makes an item more likely to stand out.
- Proportion plays on differences in scale which can draw the users' attention if something seems out of place.
Responsive Design
Responsive design puts mobile first. This way the main features of a web page get the most attention when we're deciding on how to make a website work, while allowing us to add nice extras for those with the screen real estate.
Breakpoints allow us to target a spectrum of screen sizes and regroup the page as appropriate. SVG can also be used so that logos scale nicely instead of blowing up pixelated images, but even images can respond to screen size by using the srcset attribute.
Color
Psychology
Colors have a lot of power to impact a user's perception of our website. It's important to make sure you understand the connotations of different colors within the context of the audience and area of focus.
For example, a website that's expected to be used outside may benefit more from a lighter palette, while one that's being used at night could benefit from dark mode. Or if you're working with a specific brand identity there may be colors that users expect to see associated with the website to help orient them.
There are also a variety of cultural associations with color that are worth considering too, with some colors feeling "calmer" and others giving a page more energy.
Color Theory 101
When making colors, there are two ways to do it: additive and subtractive. This refers to the way that color is perceived by either adding light waves (additive) or changing the way that light is reflected by physical materials (subtractive).
Computer colors are additive and operate on combining together 3 color values: Red, Green, and Blue.
Both additive and subtractive colors have the following color relationships based on the color wheel (see more about the color wheel here):
- Primary colors: Colors that stand on their own
- Secondary colors: Colors that are made by combining primary colors
- Tertiary colors: Colors made by mixing a primary color with an adjacent secondary color.
Colors vary by saturation and chromatic value. For example, to create a tint of a color white can be added. A shade of a color can be made by adding black. Saturation is changed by varying the amount of gray and adding more will make it muted or dull.
Color Schemes
Some colors go well together in certain situations and others don't. When building a palette it's important to understand what goals there are for the design. Does it need to pop? Should it put functional but pleasant reading over flash?
There are 6 color schemes the book mentions as different strategies for choosing colors:
- Monochromatic: A single base color with multiple tints or shades.
- Analogous: Colors that are adjacent on the color wheel.
- Complementary: Colors that are on opposite sides of each other on the color wheel.
- Split complementary: Use two adjacent colors to the base color's complement.
- Triadic: Equally spaced colors on the color wheel
- Tetradic (double complementary): Combine a complementary color scheme with another complementary color scheme.
Paletton is an amazing tool to create color schemes! Plus it's useful for visualizing the color schemes mentioned above.
A color palette is the full range of colors that a website uses. A color scheme is a good basis to start with, but it's important to consider this consciously instead of just randomly picking out colors as needed for a layout.
Texture
Texture is what gives surfaces on your website a distinct appearance and feel.
Point
The most basic element of computer graphics is the pixel. This is like the atoms of building texture and can be used to make the features below. Note that in CSS when referring to a pixel that it no longer refers to the physical hardware, but is a calculated value that translates across platforms.
Line
A line is made by connecting two points together. They can be used to express movement and excitement or give a sense of character. While they can be useful for borders and dividers, they can go beyond just functional aesthetics.
Shape
When two end points of a line come together a shape is created. Using SVGs are an easy way to add shapes to a web page. Shapes can be rotated and scaled to add visual interest as well. Shapes can be used to direct people's eyes when used creatively.
Volume and Depth
Visual cues such as perspective, proportion and shadows/lighting give depth to objects. This can be useful to create real world references in our design such as imitating known technology such as a tape recorder or floppy disc as a save icon (also called skeuomorphism).
Pattern
Patterns are easy to use in CSS thanks to the repeat() function. This allows us to tile images to create more interesting visual effects such as the feel of paper or adding artistic borders to our web page.
Typography
Typography refers to the way we display the text on our web page.
Fonts
One of the biggest challenges in web design is selecting and providing the font for a page. There are only a small handful of fonts that are available by default, the rest must be added in (which is complicated by legal factors when it comes to hosting custom fonts directly). However, There are also a variety of font foundries where you can select custom fonts that artists have made, with some being free and others requiring payment.
These default fonts available in CSS are referred to as web safe fonts:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
The font stack refers to the list of fonts that a website uses as fallbacks in case one of the preferred fonts is unavailable on a user's system. CSS provides a few generic fonts that are available on every system as the ultimate fallback, which can differ by system but at least gets the idea across. They include:
- serif
- sans-serif
- cursive
- fantasy
- monospace
There are of course different ways to manipulate font as well, by making them bold, italic, or changing color, etc. The book also gets into typeface anatomy, but that's beyond the scope of what I want to cover in this article.
Text Spacing
There are a few key elements of text spacing that you should consider when thinking about a web page's typography:
- Horizontal Spacing: The space between words and letters.
- Justification: Automatically adjust text so that it lines up against the left and right edges of the text area
- Vertical Spacing: The space between lines of text.
Imagery
Images are important, but they can quickly use up precious bandwith and slow down the user experience. When looking for images to put on your website there are a few key questions to ask:
- Is it relevant?
- Is it interesting?
- Is it appealing?
Sourcing images
It's important to not simply google search images and copy them from other websites, especially if they're not licensed for re-use. Even worse, if you directly link to an image without hosting it then you'll be using up someone else's bandwith, which they won't appreciate.
There are a few options when it comes to getting images:
- Self-sourced: If you have a camera you could always take your own images.
- Stock Photos: Websites offer pre-made images that you can pay for.
- Free images: These can be licensed under the Creative Commons with the specific intention to be used for free, just be sure that they allow for commercial use if you're getting paid!
- Royalty Free: These images only require a one-time upfront payment.
- Licensed: The most expensive option, but can garuantee a unique image.
Formats
The following formats are the most common to use on the web:
- JPEG: best for real photos that have complicated color palettes and need compression.
- PNG: Good for solid colors with a limited palette.
- GIF: Good for when you need an animated image, but definitely limited compared to modern formats.
Conclusion
There's a lot more details in the book than I could share here, but these were some of the most noteworthy elements that I wanted to write about. There's obviously more you could consider when thinking about a website's design, but this is a good umbrella of the areas that need to be thought of when thinking through a design.
Hope you found this as helpful as I did!