HTR Web Design Process

Here are some important things to consider when designing for web. Many of these are best practices that carry throughout the industry, while others are specific to our process at Hole in the Roof. Because there is a lot of information and ambiguity with web, always feel welcome to collaborate, communicate and cooperate with web projects. The more we work together as a team, the more successful the project will likely become. That said, let’s look at the process in detail from start to finish:

Research completion and starting design work

By the time you have been assigned a website design project, a lot of preliminary work, research and consulting has already been performed. This means that from the start, you will have access to a good deal of information that gives you both freedom to explore, and restrictions to which you should ahere. Unlike smaller production projects you often work with, web projects require much more time, thought, and attention to detail.

When getting started, be sure to read through all of the information you’ve been provided with. Reference this information often at every pause in the project. After you’ve finished a part of the project, look back through the spec and task info to ensure you’ve met all of the requirements. Missing details in the spec has been one of our biggest pitfalls with web design and development so always be mindful of this caveat.

Take Aways:

  • Read the spec and task description before starting and ask questions if anything is confusing on not well explained.
  • Continue to reference and re-read the spec throughout the design process.

Designing the homepage

The starting point is almost always going to be the homepage design concept. Generally there will be several page designs, including a level 2. Each page design is created separately, but no additional page designs should be started until we have client approval on the homepage design.

The homepage is the base design from which all other page designs will be conceptualized. Generally, global elements (like the header, footer, and sidebar) will be duplicated throughout the site with little to no variation. This means that once you’ve created these elements on the homepage, you already have a good portion of the design work done for the level 2 concept as well as any additional templates.

When you look at the spec you’ll see an LOE for design. You may notice that this number seems unusually high. Keep in mind that this time is generally spread out throughout the project and sometimes includes changes to the design made later by the client for additional rounds. Generally the homepage will take 1-3 hours, while additional pages may only take 30 minutes to an hour. In any case, the additional time gives you padding so that you can take more time if needed. Remember that a website is a large project and represents a larger investment for our clients. It is expected that we spend more time on a website than on a shirt design.

Take Aways:

  • Consider the time you have been allotted in the LOE and remember that additional time is usually available if you need it.
  • Start with the homepage design and don’t proceed with other work until client approval has been given on this design.
  • If you have extra time to spend and additional time is available in the LOE, feel free to add time even if it has not been assigned.

Structuring the Photoshop document

Currently, we build all design comps for websites in Photoshop. This allows us to give each client a final proof of how we intend for the site to look when finished.

When creating the photoshop file, you are responsible for ensuring that the structure of your PSD meets the standards set by the web department. Doing so will save time, frustration, and (believe it or not), will actually make it easier for you to design and tweak the design as you move forward. That said, here are some best practices for structuring your PSD.

  • Start with a blank document at 2000px by 2000px . Ensure photoshop is set up for web and not print. This means changing your workspace to RGB Monitor, changing your units to pixels, and your font sizes to pixels.
  • Try to build the site from top to bottom in that order. Start with the header and make your way down. This helps us avoid pitfalls in the development phase since sites are generally coded in the same way (top to bottom).
  • Keep all of your layers ordered in the same hierarchy the show up in on the canvas. If you have your logo first and then your nav in the design, then it should be ordered this way in your layers as well.
  • Group major sections into layer groups. (ie. header, nav, slideshow, main content, sidebar, footer). This will help you find what you are looking for when working on the document in the future. It is also very helpful to the developers when they are trying to find individual layers.

Creating additional templates

After your homepage design has been approved by the client, the next step is usually to create a level2 template. This is the template that all pages besides the homepage are normally modeled after. Generally, the level2 page doesn’t require much specific content. This gives us an opportunity to use this page as a style guide. We can showcase how we (as designers) want our text to be styled. This includes headings (1-6), paragraph text, links, buttons, and any other design elements that are necessary.


Important Note about CTAs

A CTA or "Call to Action" is a section on the website designed to get the user to perform some type of action. This action can be anything from making a purcahase, to filling out a contact form, or even just visiting a certain page and reading content. CTAs are EXTREMELY important on the web so it is important that you take appropriate effort to create sections of the site specifically for strong CTAs.

Generally a good CTA will consist of a title that is short and stands out. This is often followed by a smaller tagline or short expalination. Then there is normally a link/button that will take the user to the appropriate area of the site to complete the action.

While the structure of the CTA can vary, the important part is the delivery and effectiveness of the message. A strong CTA will pull the user towards taking action immediately. Three important components that allow this to work are message, design, and placement. Generally, you will only need to worry about the last two. Focus on making CTA's well designed so that they stand out effectively and look compelling. Now, think about the placement and how the user's eye will naturally move through the page. CTA's often stand alone to ensure they are easy to find, though it can be just as effective to mix them into other areas of content.

Strong CTA's should always accompany an area where action should be taken. If a page or section is leading a user toward taking an action and doesn't offer a means to do so, this is called a "doorslam" and is a point of great frustration to users. Ensure the site flows well and doesn't present any doorslams. Any time content is presented where there is follow up or additional content, be sure there is a means for the user to get to that additional content directly from that section.