Contents
Intro to this Week
This week contains a lot of reading as we reach the creative stage of web design. We’re going to look at how all of our steps work together, from the planning, now to the creative, and tied to the production that we’ve been doing from the beginning of class. Keep working on Project 3, it is due at the end of the week.
Watch the video below for an overview.
This Week’s Work
1. Online Reading
First, to get us started, let’s look at 7 ways web design is different than graphic design.
Moodboards
We created Wireframes to show the structure of pages, making sure not to show visual design elements (we were concerned with placement and space for content). Moodboards are created to show visual design elements before we spend the time building Design Comps. This is the next stage for client approval before continuing.
Moodboards show the mood/style of the website. They should include the color palette, fonts (1 to 3 typically), photography/illustration style, iconography (if needed), and navigation style.
- Read the article What Is a Mood Board and Its Role In Our Web Design Process
Design Comps
Design Comps are the final stage before we start building the website as HTML pages. They are built using a combination of Wireframe structure with Moodboard design elements.
Web Design Theory
Read the following short articles to give you a good foundation in web design theory:
- 10 Design Concepts Every Developer Should Know
- The Gestalt Principle: Design Theory for Web Designers
- Understanding Visual Hierarchy in Web Design
- An Introduction to Color Theory for Web Designers
- Avoid Edge Cases by Designing Up Front
2. Sample Design Comp
Watch the video below on creating a Design Comp in Photoshop. You can download the layered Photoshop design comp file to compare or try building your own. Make sure to pay attention to the layers and how the layers can be organized in groups.
Next, watch these short videos on building your Dreamweaver page from the Design Comp: