Step by Step Web Design: Wireframing and Color Commentary
In the first installment of this series we looked at the very beginning stages of the design process, as far as getting things going after the client hands you the specs. In this new installment, we are going a few steps further into dissecting the design process for our readers. Only this time, we are getting our hands dirty, so to speak.
Below we dive into the next phase of research, the wireframing portion of the puzzle, and picking the palettes that suit the website design and brand. Just like before, we are packing the post with resources that will help readers finish connecting these dots and make the next steps go that much smoother for your project. So let’s get started.
Research – The Second
The first stage of research was to help us get our preliminary feel for the brand and how they interact with their audience. It also dealt with the expectations. This second bout of research gets much more technical as we seek to complete the picture we began putting together when the project was just getting on its feet. Now we want to guide it along to its fullest potential, but in order to do that, we have to research the best solutions for all that the client and users expect of the site to come.
Do the client’s website needs require a CMS? If so, what CMS is the right one for the client? If the client wants a custom theme, what base are you planning to use to build from? Which one has many of the features that you are looking for it to possess? Or would you rather build the theme yourself from scratch? So there are a lot more questions that we need to answer, and to provide the best solutions, we need to do the rest of our due diligence.
Then we begin sampling the fruits of these research labors, by applying all that we have learned and molding a website to perfectly fit the client’s brand. The next steps actually begin the ‘hands-on’ portion of the process where things tend to get more fun. More creative than cerebral. So we need to make sure we switch gears from the more intellectual to the more imganitive side of the brain.
As you begin to see and have all of this research information coming together, you will also want to begin sketching out some rough ideas of the design that you are envisioning. Drawing out the visual aspects of the design to begin getting a feel for how you want the various elements to look that you are imagining will be a part of the project is a good first step for getting those brain gears flipped and engaging the more creative side of your brain. This also helps us fluidly seque the project into the next phase.
More Resources on the Subject
- How To Choose the Right CMS
- Forum Discussion: WP Creating a Theme from Scratch vs Using Starter Themes
- How to Build a WordPress Theme from Scratch Part One
- 25 WordPress Theme Development Tutorials to Get Started
- How to Creat a Simple Drupal 7 Theme from Scratch
- Drupal Community Forum: Tutorials for Designing Themes from Scratch
Once the sketching has begun and we are actually getting set on what it is exactly that we are wanting to bring to the table, then we are going to want to begin wireframing and setting up the layout of the website. Taking those pieces we have been sketching for inclusion and setting up how exactly they are going to be displayed. And even beyond that, how they are going to begin interacting and functioning together to create the overall design.
Wireframing is an important step, because it is very much the entire skeletal system of the design that we are building. It takes the abstract pieces of the design and all of the visuals, and ties it all together. Very much like the Dude’s rug in The Big Lebowski. The wireframe actually connects the pieces of the layout into a whole cohesive unit for the first time since the project’s inception, and it begins giving us hints of the functionality to come.
When you begin wireframing it is important to realize the entire scope this stage of the project. Because it is much more involved than some people realize. They often mistake the wireframing portion of the process as just a step to aligning and staging the visuals. When really it goes far beyond that. This stage involves bringing all of the content that is going to be part of the site into play and stringing together how it will all function and be prioritized. And like Walter from Lebowski would also remind us, this is not Nam, there are rules to wireframing.
More Than Just a Layout
When we say that wireframing goes beyond just the layout, it is important to understand exactly what that means. Wireframing is all about information and interface design, as well as navigation. Functionality is deeply rooted into this process and must be taken into consideration as you plan and map out the site. Certain types of content have to be displayed in certain ways. So we have to know the limitations or opportunities that these rules figure into the process, and how those rules are going to impact the delivery of said information.
This is where things can really become involved. So it is also important to realize that this stage of the process is likely to take some time. Account for it, and give it all of the time that it deserves. We will also have to begin nailing down the navigation at this stage so we can see how the users will move about and make their way to and through the content offered. This also means that UI elements factor in heavily during the wireframing. So make no mistake about it, this is a major step. It needs to be treated as such and doesn’t need to be half-assed. Or worse, no-assed.
More Resources on the Subject
- 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
- 6 Outstanding Wireframe Resources to Inspire Your Next Design
- 5 Killer Wireframe Resources
- Wireframes Magazine: An Online Resource
- 18 Practical Responsive Design Tools and Resources for Wireframing
After we have decided on the basic visuals and layout elements to be included, and how they will all function together, we have another vital step to the process. Though, admittedly one that tends to be less involved than the previous one. When it comes to making a statement with the design, the color choices are one of the loudest speakers on the court. So we want to be sure that we choose our color palettes with care.
The psychological associations that we tend to make with certain colors play heavily into determining the right palette for the brand and the site, so if you are not entirely up to speed on what colors say what, then so more research is in order before we proceed. All designers should have a basic understanding of color theory and the different ways that we can impact the effectiveness of our work through the colors that we attach to it.
Now for established brands, the colors may have already been decided upon before the project became ours. But we should still understand what those colors are saying so that we do not inadvertently contradict them with some of the visuals that we include in the website. So even if we are not having to find the right colors, it is still up to us to combine their message to the users, with the overall tone and feel of the design that we are crafting for them.
Any Room for Retouch?
Now just because the color palette may have already been chosen, doesn’t mean that the client isn’t open to some slight retouching of the colors to sharpen or enhance them. Even if they have gone so far as to hand over specific hex codes, they may still be open to the addition of gradients and the like to give the visuals on the page some depth and dimension. Keep it from being so flat. Or perhaps it is just the opposite. The visuals have too much depth and you want to talk the client into going with a more flat presentation. Either way, just remember that you want to find ways to make the color palette pop with the elements on the site.
More Resources on the Subject
- Color Theory for Designers Part 1: The Meaning of Color
- Adobe Kuler Color Palette Creator
- Color Psychology – How Colors Affect Our Moods and Emotions?
- How to Use Color to Enhance Your Design
All for Now
That brings us to the end of this installment of the Step by Step Web Design series, but as always, we do encourage you to keep the conversation going by leaving your thoughts and comments with us below. Next time around we will be tackling our first client presentation and more. So be sure to keep checking in with us here on the blog for the remainder of this resourceful series.