Web Design

Learn effective methods for designing websites

Web Design is another form of digital storytelling. A website is a great way to organize lots of information and media and make it accessible to a wide audience, making it the ideal hub for an organization to convey its theory of change, values, mission, and work. By using a website well, you can streamline recruitment, marketing, training, volunteering, or donating.

Key Questions

Heads

Who is your audience? Who are your user personas?
What information do you need to share with them?
Who will own the site?
Who will maintain it?
How will you drive viewers/traffic there?
Does your partner have folks who will maintain the site? How much experience do they have or availability for training?

Hands

How does the site tell your values and story?
Does it showcase your theory of change in a compelling way?
Are your team and the partner on the same page?

Hearts

Do you have a way to track your content and a calendar to receive it from your partner?
Do you have a website model to work from and gain inspiration from?
Do you have a style guide to support the design?
Is it easy to view on mobile devices?

Step 1

Define Your User

Before you start designing your website, make sure you’re clear on what you’re doing. Ask key questions about the function of your website, focusing on your user.

Who is your key audience?
What information do you need to share with them?
What do you want people to be able to do with your site?

Create a user persona. This means imagining your typical user in terms of demographics, likes and dislikes, and desires. What does your ideal user want and need? What do they value? How can you connect to their other interests or affiliations?

Step 2

Site Map

A site map lays out all the pages that will be on your website, the purpose of each page, and a general outline of what content will be on each page. The focus of this stage is function, not form.

Try using a spreadsheet or a simple text document to track your content during early mapping stages.

This method is sometimes called a Dirty Site Map. Check out an example here.

Make a flow chart like this to get your site map flow of information down
Get feedback on your dirty site map from your partner before moving forward

Step 3

Find Inspiration

Ask your clients for a few sites that they like, and ask pointed questions to find out what elements they want to emulate.

Curate a selection of sites that the clients and team like, and determine what elements they value the most
Review this bibliography with clients and your team and see where you agree. These points of agreement are a great starting point
Try to determine the scale and difficulty of your project. Do your clients want or need interactive elements, lots of graphics, and customization?

Step 4

Choosing a Platform

Once you know what content you need to include, as well as a general idea of what graphic and interactive elements you’ll be designing, you can choose a web design platform to start web building.

Choose your platform based on your capacity:

- Low difficulty: Drag and drop design, or “What You See Is What You Get” (WYSIWYG), like Wix or Square. No coding skills are needed for these services.
- Medium difficulty: Doesn’t require coding, but usually requires paying for a theme and some minor code modifications. Can be hacked, and so requires someone that can troubleshoot more complex issues and communicate with support staff. WordPress is a popular modifiable platform.
- High Difficulty: Requires a lot of code and can break. Requires more skillful maintenance. Examples include platforms such as Drupal, as well as Hard coding in HTML , CSS, JavaScript, etc.

Step 6

Design Phase 1

The first phase of design is all about finding inspiration and developing a vision. Look for sites with layouts, graphics, and aesthetic attributes that you respond to. Share those styles with your partner and get their feedback– what do they like or dislike? If you don’t want to create pages from scratch, shop around for themes or templates that emulate your inspiration and fit your partners’ vision. Ask your partner for feedback on what they like best from these options.

Step 7

Build Phase 1

Build a basic mock up of how the site will flow, using stock photos and text as placeholders if your content isn’t ready.

Create a timeline of content deliverables, sometimes called “an information architecture”. Who is giving you what content– who will provide images, videos, and copy? When will each piece be ready to use? Go page by page. Look at this example from the Everett Program.

Meet with your team regularly, if possible, to review what you have retrieved or produced, what you still need, and how you are progressing on filling out your site. These things often have to change together.
Get lots of feedback from users, maintainers and others here before you do the hard work of the second Build phase.

Step 8

Design + Build Phase 2

Get your layout and your content and put it all together. After seeing drafts of your copy, photos, videos, and graphics on your site, solicit feedback. Do they fit with your theme, message, and aesthetic?

- Get feedback from partners and users
- Make sure to consider accessibility for blind and hard-of-hearing users, as well as accessibility through mobile devices

Step 9

Promotional Campaign

Create an online or offline campaign to drive traffic to your site.

Monitor who actually visits your site by using Google analytics to see page views and how long folks stay.

Edit the site based on the feedback you get from analytics or from users. For example, if you notice that a very popular page requires a few clicks to get to from your homepage, you might add a link to that page on your homepage, or move it up to your top navigation menu.