This is a condensed version of a Website and UX design talk I gave at WordCamp Portland, Maine and WordCamp Boston. I spoke at several events during the year — pushing myself out of my comfort zone. It was a great experience and also a lot of work!
Visual Design blends typography, color, space, texture, and imagery to create a website’s look and feel. It gives visitors their first impression of your site and company. It’s also essential for communicating your brand and effectively marketing your products and services. Usability.gov defines visual design as “strategically implementing images, colors, fonts, and other elements,” in order to enhance a design or interaction, and engage users.
User Experience Design
User Experience Design focuses on the needs and behaviors of website users, determining the appropriate strategy and framework to ensure that users find the site useful, easy to use, and enjoyable to visit. At the core of UX is ensuring that users find value in what you are providing to them. This user experience honeycomb was developed by Peter Morville.
USEFUL. We must have the courage and creativity to ask whether our products and systems are useful, and apply our knowledge to define innovative solutions that are even more useful.
USABLE. Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design.
DESIREABLE. Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design.
FINDABLE. We must strive to design navigable websites for our users.
ACCESSIBLE. Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities.
CREDIBLE. Design elements help to influence whether users trust and believe what we tell them. Thanks to the Stanford Web Credibility Project, we’re beginning to understand the design elements that influence whether users trust and believe what we tell them.
VALUABLE. Our sites must deliver value to our users.
Web Design Process
There are 4 basic steps to the web design process. The double diamond design process model was developed by the UK Design Council. I have also written about this on my website design and development page.
The design process includes steps of discovery, define, develop and deliver. I also think that throughout the process it is good idea to keep SEO, performance optimization, and accessibility in mind.
Step 1: Discover Insights into the Problem
This is the research and discovery phase where we strive to understanding the project and audience. Research helps us get the big picture. It helps us learn more about our client and the project. Through research we discover client objectives.
A good discovery methods is to have a conversation with my client, have them fill out a questionnaire, look at competitor websites – what are they doing that is working or missing from my client’s objectives. We need to learn about website requirements. What are the website goals? Will they be adding new functionality? Who are the website users? This is very important. Basically, your users are the boss. You need to know who your user is so that you can make a usable website for them.
You can measure whether the website is meeting goals and reaching clients by looking at who is interacting with the site. A method to learn more about your visitor and their path through your website is to develop personas. A website may be meeting the needs of multiple users and you may need multiple personas.
Another research and discovery tool is a content audit, which is an inventory of your existing site content. It is basically a big spreadsheet that includes navigation title, page name, URL, content hierarchy, and more.
Step 2: Define the Area to Focus On
INFORMATION ARCHITECTURE is the structure behind a well-thought-out application or website. IA results in categorization, schema, mapping, and navigation that is intuitive and user-friendly. A key part of information architecture is navigation.
A few navigation guidelines:
- Group content to as few top navigation links as possible while keeping a quick, easy to find path to content.
- Use breadcrumbs, footer navigation, and go to top of the page links to improve usability and findability.
- Use card sorting to find the most effective way to organize topics into sections.
- Add internal text page links to help network your content together, which is excellent for SEO and gives more life to older posts and pages.
CONTENT STRATEGY is the creation, curation, and maintenance of text, images, audio, and video. It also defines the tone and character of a business, in order to engage specific user groups and achieve business objectives.
Step 3: Develop Potential Solutions
DESIGNING AND DEVELOPING
Based on research and client requirements, sketch out page layouts with user in mind, set up a good page hierarchy, and choose images with the right tone and compliment the content. A mood board helps visualize and guide decisions. You can see how images, color, and fonts work together. Put together a color pallet. The US Web Standards Style Guide has a color pallet that shows their brand colors and how they are meeting the highest standards of 508 color contrast requirements.
The Google Material Design guidelines says: “Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your product.” When using illustration and photography to enhance the user experience, choose images that express personal relevance, information, and delight. Also from the Google Material Design guidelines on typography: too many type sizes and styles at once can wreck any layout.
Also, pay attention to line length — you should have around 60 characters per line if you want a good reading experience – from the Baymard Institute.
Deliverables will include wire frames — we don’t want to bring style, color, fonts, or imagery into this phase so that we can just focus on page layout, content prioritization, and navigation. The next stage deliverable is a Prototype. This is where we will bring in style, color, fonts, or imagery.
Step 4: Deliver Solutions that Work
This step includes launching the website and performance optimization. Performance optimization is a very important task that I write more about below and which needs to start at the beginning of a website project so that a performance budget can be established. This is a separate task from website design, but it is important for good user experience, which includes providing a fast, lightweight website.
Designing for Performance
Add website performance goals to the project from the start. It is not a battle but a balancing act or pairing! Fast functional and light weight vs beautiful memorable and on brand. Performance is a design feature and not a technical concern. Your audience wants content fast. Ethan Marcotte says “Images are the biggest culprit for bloated web pages.” Use a performance budget for total kb for fonts. Pay attention to page load speed and weight.
Google fonts will have a red warning indicating a slow load time if you select too many fonts to use. Prioritize from the beginning: have goals, create a UX assessment, show comparison of fonts and weight, make decisions with page weight in mind, integrate into budget from the start — don’t save to after launch. Website optimization is part of every website I build.
Designing for Accessibility
As the W3C guidelines state, color shouldn’t be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Designers should use color to highlight or complement what is already visible.
W3C Web Accessibility Guidelines:
- Provide equivalent alternatives to auditory and visual content.
- Don’t rely on color alone.
- Use markup and style sheets and do so properly.
- Clarify natural language usage
- Create tables that transform gracefully.
- Ensure that pages featuring new technologies transform gracefully.
- Ensure user control of time-sensitive content changes.
- Ensure direct accessibility of embedded user interfaces.
- Design for device-independence.
- Use interim solutions.
- Use W3C technologies and guidelines.
- Provide context and orientation information.
- Provide clear navigation mechanisms.
- Ensure that documents are clear and simple.
Tools of the Trade
Adobe Kuler is a great color resource — you can play around with the color rules — analogous, monochromatic, triad, complementary, compound, and shades to discover a good color combination. I also will grab photos from the internet and then use the eyedropper tool to get the color info. There are eyedropper browser add-ons that would do the same thing.
Pexels is a great website for free photos. Choose photos for your website that have similar tone, colors and style for consistency. iStockPhoto has tons of photos. It is fast, inexpensive, and you are likely to find something quickly.
The Noun Project has great icons that you can download as png or svg files. You can buy them or credit the author. It is a great source of inspiration and ideas.
Freepik has tons of vector images, artwork, backgrounds, and patterns. It is very useful. Downloads are free with credit given.
TinyPNG is great for image compression and WP Smush is a great image compression plugin which automatically optimizes images when they are uploaded. Another great image resource is Photon, a part of Jetpack. Photon hosts your images and delivers the right size for the device being used. If you don’t have Photoshop, there are other options for cropping photos — Cropp.me enables you to crop images and save to different sizes. It is a good practice to upload images that are the exact size you will be using.
Google Fonts is a great resource for choosing body copy and headlines. They have a lot of fonts – but you only want to use 1-2 for best performance and only 1-2 styles each as well.
Invision is an excellent tool for sharing prototypes and draft designs with your client. There is a free plan and it is easy to set up a project and share a link with your client who can view your work online and test the interaction as the prototypes are clickable. This is really an essential tool in user experience design.
Website and UX Design Summary
- Start with research and discovery
- Learn requirement and who your users are
- Design and structure the website
- Use tools of the trade to make the job easier