Website visual design exploration

If you are designing the site for somebody else, the client wants to see several visual ideas to choose from before they settle on the design to pursue. To get the creative juices flowing, many designers start by assembling “mood boards” such as the example shown in below which captures the overall photography feel, color palette usage, and font usage.

 
By creating mood boards, you do not need to concern yourself just yet with the site’s navigation and structure. It’s a great way to get ahead start in determining the visual style, while the user experience team is busy working out the information architecture and wireframe details.Mood boards are not connected to the brand imagery necessarily, so to take it a step further, you can create “style tiles.” Style tiles are a recent idea that explores textures, colors, button treatments, and fonts, along with brand logos and photography in quasi web page designs like the example shown in below.

Adobe’s Creative Suite offers the best mix of tools that web designers need for the initial creative development. You can create mood boards and style tiles in Photoshop, InDesign, or Illustrator, wherever you are most comfortable with. If you don’t own Creative Suite, even a tool such as Microsoft PowerPoint will work.

Once you get a feel for the visual style that works best, you will need to create realistic looking web page mockups in a proposed design. Using the wireframe diagrams as your guide in terms of navigation and content elements, these design mockups show what the finished web page will look like. I like to show at least three different design mockups for a client to select from. 

After some back and forth, you will ultimately gain approval on a design and will need to start producing design “comps.” Comps are source art files, typically built in Adobe Photoshop, that account for all the component art pieces needed to build a page or series of pages.

As you can see in above, they look absolutely real as if you can put them right on the web server and they’d work. Sadly, this is not the case. Design comps must be rebuilt using web development tools which we’ll cover in later the next few post.