Skinning the Wireframe

In this phase you will skin a design around the wireframe. You will design the overall template and sites pages that were planned in the wireframe. Using the wireframe as your guide, you will create every graphical user interface (GUI) element for your website.

In order to create the GUI, you will need to have the basic graphical materials and software to do the job

Content

Hardware & Software

Of course you will need a full computer setup, in addition to specialized software. There is a variety of graphic design software to use, some are free tools and some are industry standard paid tools. WDS typically uses several programs from the Adobe Collection:

  • Adobe PhotoShop - Used for rasterized graphics and is the most popular and widely used photo and graphic editing software in the industry.
  • Adobe Illustrator - Used for vectorized graphics, usually used to create and edit company branding and logos.
  • Adobe Fireworks - sister software to PhotoShop, but specializes in only web based graphics and applications.

Existing Grids & Resources

There are many resources available that can assist in designing a site that fits a standard grid. It is helpful to use existing frameworks to ensure your site follows some usability standards, follows purposeful design techniques, and ultimately creates the user experience best suited for your website. At WDS we have build the majority of our sites based on a 960 grid. However, the industry standards are rapidly changing due to ever changing technology, screen sizes, and the explosion of mobile devices and tablets. The standard 960 grid is soon becoming a standard of the past, but for the sake of this article, we will only focus on the 960 grid framework and other resources you need to get started such as:

  • Existing Grid - 960 grid or another grid suitable for the goals of the website.
  • Company Logo - can be a graphic logo, and a simple text logo.
  • Graphical Elements - the basic graphical elements that will make your site unique and appeal to your target audience. These elements include:
    • Photography - images and photos relative to the purpose and content of your site.
    • Color Theme - the planned color palette for your website.
    • Textures - if you plan to have some textures in the design, gather good quality images.
    • Fonts - there are a handful of browser safe fonts, but there are new technologies now available that can add unique fonts and make your website stand out.

At WDS we have existing PhotoShop grids and frameworks with all the basic GUI elements that can be easily edited to make a unique skin around your wireframe

Designing The Template

Although WSM can have multiple templates in a site, typically a website has only one Default template. The first step in the design process is creating the template. The basic template elements include:

  • Header - elements typically found in a header:
    • Login Bar and Use Account links - including the hover states of the text links
    • Logo
    • Search Bar
    • Menu Bar - including the dropdown menu and hover states
    • Other Header Content - typically contact info, additional navigational links and any other design elements notated in the wireframes.
  • Footer - need to fully develop the footer per the wireframes. Items typically include:
    • All Menu navigation - always define the hover state of the menu links as well.
    • Contact Information
    • Copyright
    • Social Media Links
    • Other Footer Content- additional content outlined in the wireframes
  • Sidebars - need to fully develop the footer per the wireframes. Items typically include:
    • All Menu navigation - always define the hover state of the menu links as well.
    • Consumer Confidence Info - typically information to make the user feel secure in doing business with you.
    • Other Sidebar Content- additional content outlined in the wireframes

Once you have the basic template design, the next step is to begin designing the key pages of the website.

Designing Pages

Referencing your wireframe, the next step is to design the key pages of your site which typically are:

  • Homepage - this is the gateway and front face to your website and usually includes elements such as:
    • Homepage Slideshow Image - you can make an example homepage banner if inspired, but only do so if you feel it will enhance and help 'sell' the design to the client. Usually at this phase, we do not have clear instructions from the client on what these images will be.
    • Sub Sections - most often your homepage will be segmented with content enticing the user to engage and learn more.
    • Featured Categories- You can clearly define this areas borders or boxes, but no need to insert specific category or product images just yet.
    • Featured Products - we do however want to define this area w/ an example product repeated across the columns. Clearly define the product title, pricing, and buttons as outlined in the wireframe.
    • Other Elements - clearly define any other homepage elements as notated in the the homepage wireframe. In addition, always refer the ptrac design task for notes that deviate from this process!
  • Inner pages outline in the wireframe - whatever specialized pages that deserved to be wireframed typically will need to be designed as well.
  • Default Styles - it is important to define the default styling for basic HTML tags and markup. This includes basic elements such as:
    • Headings - heading tags such as h1, h2, h3, h4, h5, h6
    • Link Colors - the basic link color and hover effect for links in the content area.
    • Line-height and font-size - decide the basic font-size and line-height for majority of the paragraph content.
    • Unordered & Order Lists - these are the bulleted and numbered lists often seen in websites when outlining content material

Conclusion

There are many other steps and factors involved in creating a unique and fresh design from your wireframe. But following the outline above will lead you down the path to designing a website with purpose and appeal to the goals and target audience. Typically there are several drafts and revisions during the process until you, your team, or the client approve the design for the next phase, the site build!