Designing a website requires some knowledge of graphic design and software that can edit and resize images. Designing the look and feel of a website may not happen sequentially, in fact, design and development often run in parallel.
Review User and Organizational Requirements
In the Plan Phase, a number of exercises were performed in order to:
- Define the site’s goals
- Identify the audience
- Capture the brand identity in writing
- Understand usage and traffic trends
At this point in the design process, the output from those exercises should be evaluated in order to create the visual design of the brand and the website.
NOTE: If you have not documented this information or conducted the exercises of defining your goals and identifying your audience, you should stop and do it now. This information is critical in order for you to apply the visual characteristics to the site’s purpose.
The look and feel of the site needs to reflect all of the information gathered and meet the functions identified in the requirements. Reviewing this information may spark conceptual design ideas.
Only after a solid understanding of the user and organization requirements has been established, should you proceed to the next step of creating the graphical representation of those requirements.
Design the Visual Representation of the Brand Identity
Branding should start with a logo or a symbol that visually represents the user and organizational requirements. A logo is part of establishing the brand identity, but a logo by itself is not the complete branding. A brand has a set of values and commitment to deliver on a promise. Think of a brand as a relationship: it needs to support a message – a way of life – and behave in a solid, consistent way to establish itself as a trusted source. Branding provides focus on common goals and builds enterprise attitude.
TIP: A helpful exercise when trying to create a brand logo is to write down keywords or phrases. The right words will lend themselves to a graphic image.
Create a Wireframe
Wireframing a website involves building a linear version of the site, with areas of the site blocked off in boxes – without graphic detail. It helps create visual hierarchy and spatial relationships with the various elements in the page.
Within the wireframe, regions of content, navigation and graphic representation provides a real feel for how the information on your site connects is chunked and how the site flows.
There is no need for sophisticated software to create a wireframe. It can be as simple as an outline on a piece of paper, boxes drawn in a Word document, graphic shapes using image editing software or basic html mockups with tables.
Wireframe at least the first two layers of your site, i.e. home page and secondary pages.
For more information check our section on creating Wireframes.
Decide on a Page Layout
After it has been established the wireframe you have created will support the user and organizational requirements, it is time to select a page layout.
- Use an existing page layout – If you choose to use one of the page layouts accepted by the state of California, you may download it from the templates section of this website. Decide which template layout works best for your needs based on the content you have and your information architecture decisions.
- Create your own layout – If you decide you need a different layout, you may build your own, however, it must comply with California’s standards.
Select Website Color Scheme
Use your agency logo/brand identity as a starting point for selecting your color palette. The color scheme should complement and support each other visually. This will help support your brand identity.
Your choices of color can affect the accessibility of your site. Make sure that there is a high level of contrast between colors that overlap. Low contrast causes problems for users with poor vision or color blindness.
For CA.gov, several sets of pre-defined color schemes have been established, to make color selections easier. You may download the color schemes here.
TIP: Limit your color palette to 2 or 3 major colors (with shade variations) and a small accent of color here and there. Limited colors and graphics means smaller file sizes, faster loading, and most importantly, more readable and inviting sites.
Merge Branding Elements With Visual Presentation of Your Layout
Now that you have established a color scheme for the website and created your brand identity, it’s time to begin merging the branding elements into the visual layout of the website. It is assumed that the wireframe you created earlier has been finalized, thus the layout has been established.
Start by applying the brand identity to the banner of the layout. The CA.gov template allows for space for your custom agency brand banner.
The banner is one of the first elements a user sees when they open your website. For CA.gov branded websites, there is specific space reserved for an agency’s co-brand.
- The CA.gov logo will always be positioned to the left of the agency brand.
Choose Graphics and Other Imagery
Choosing the right imagery to balance the brand identity and content on a website is the next step. The process of finding images can be challenging with issues such as copyright and appropriateness of subject matter. For every “found” image you wish to use, you should always check to see if there are any copyright or royalty issues with that image. For example, if you use a website such as Comstock to find pictures, there are clear copyright and royalty agreements on the website that you can read. Because something is “royalty free” it doesn’t mean that it is free – read the agreement. Always ask permission to use an image if you “find” an image on the Internet.
Rarely do you find images that are in the exact style, size or format you need. Editing images correctly can help make your website look professional and support your brand identity.
Consider accessibility whenever you use an image. Every image you use in your website must have a meaningful “alt” tag. An “alt” tag provides screen readers the information they need to “read” the description of an image to a user who has a visual disability.
Tips When Editing Images:
- Always work on a copy of the original
- Use JPEG for photos; GIF for flat color
- 72 pixels per inch
- Image quality should be carefully balanced with size and download speed
Choose the Correct Format
Use JPEG if the image is…
- gradated color
Use GIF if the image is…
- mostly flat color
- against a color background and needs transparency
- contains predominantly type
PNG and SVG both have spotty support and aren’t recommended for most uses (though PNG may be suitable for Intranet use)
- PNG is lossless, and has variable transparency control
- SVG has very high quality
More info on working with Images.
Choose Fonts and Web Typography
Aside from the visual layout and graphics on a website, font style and usage is considered a part of the design of a page. There are choices to be made regarding font family, size, style, color, etc. While the choice of these “styles” is a design decision, the application of the style is executed through CSS. At this stage, we are examining the design decisions for fonts. Below are the design choices that you will need to make:
- Font Family TIP: a sans serif such as Verdana or Arial work best.
- Font Size(s) TIP: Relative font sizes work better on the web and the “ems” work best.
- Font Colors and Highlighting TIP: black text on a white background is best for the web
- Leading and Kerning TIP: Make spatial issues a design choice, but implement font styling through CSS.
More info on web Typography.
Beyond the Design Phase
Design doesn’t start and stop in one segment of the website development lifecycle. As you move into the Build and Maintain Phases, design tasks are often times revisited. For example, replacing an image that currently resides on a website with a new one, may require editing, or a new page introduced to an existing site may need some design principles applied to ensure that it supports the agency brand.