108 North Payne StreetAlexandria, VA703firstname.lastname@example.orgOURDESIGNPROCESS
1 WIREFRAMEAfter the discovery and planning phase of anyproject, including a thorough website question-naire and kick-oﬀ call, the ﬁrst step is creating ahomepage wireframe.A wireframe is the skeleton of your site. Bybuilding a rough outline of your site (black andwhite, no graphics) we ensure that every pieceis in place. It’s not pretty, but it gets the jobdone. This bare-bones layout reveals the struc-ture of the site without distracting stylistic treat-ments. At this point, if there are any contentchanges, they can easily be made without dis-rupting the design.
2 MOCKUPDESIGNSAfter the wireframe has been approved, wemove on to the exciting part - design!This is the point where our designers wave theirmagic wands/mouses and transform your roughsite plan into a real design. We summon all ourPhotoshop/Illustrator talent and design know-how to create a website that not only works, butwows.We start with the homepage, as this will be thedriving force in the overrall design and site aes-thetic. Once the homepage is crisp and hand-some, we design out the unique internal pages.
3 REVISIONS(unlimited)We want you to love your website. Even if thatmeans you have a speciﬁc idea and aesthetic inmind and you realize that perhaps it’s not ex-actly what you were hoping for. That’s why we’rehere.The feedback you provide drives the design pro-cess. Before we develop your site, we make surethat every detail has been approved. We’re ﬂex-ible so you don’t have to be.*For example, for Crawford PR, our client Jim had a veryspecific plan in mind for the homepage design of his newsite - which you saw on the previous slide. However, itdidn’t sit well with him once he saw it come to life. So weshowed him our ideas and designed a page that wasunique, professional, and modern in its ability to em-brace whitespace and allow the user to breathe by usinglarge typeface and engage them through interactivehover elements (namely, the black and white imagesbecome full color once hovered over). By working as ateam, we are able to create the most successful design.
EXAMPLECRAWFORD PROverall design elements:• Plenty of whitespace: Whitespace is key to improvinguser experience. Giving the user visual breathingroom allows them to better digest the content andnavigate through the site intuitively by providing ob-vious focal points versus a pile of information that iscrammed into too small of a space and forces theirattentions elsewhere.• Hover eﬀect: Adding any sort of interactive elementto a site will allow the user to tangibly engage withyour product, which will make you that much morememorable. You are subconsciously telling your audi-ence “hey, if you take the time to interact with meyou will not go unheard.” Watch - let your users makeyour black and white photos turn into color and you’llsee them light up (figuratively speaking).• Large type and imagery: The modern trend of largetype and high quality images is more than just looks -it serves a purpose. Large text improves readabilityand custom, beautiful photographs captivate youraudience.• Calls to Action: Ultimately, you want your website tobe a tool for your user - whether it’s purpose it toinform, persuade, or act. Having clear calls-to-actionallows your audience to intuitively navigate throughyour site, getting to the area they need to be and dis-covering new information they didn’t even know theyneeded...until now.
EXAMPLESALLY HERSHBERGEROverall design elements:• Interactive Elements: For Sally H, we incorporated agood amount of interactive elements, mostly throughhover effects. We used large, high quality images ascalls-to-action to internal pages, and a frosted/ trans-lucent effect when a user hovers over an image thatleads to an internal page. We also used an interactivesorting option on the Individual Salon pages, whichallows the user to sort through the stylists via differ-ent criteria. These elements add a personable touchto a site that promotes a prominent celebrity andstaple stylist and product line in today’s hair andfashion industry.• High Quality, Custom Images: We had the opportu-nity to work with high quality and custom imageswith Sally H, so we certainly capitalized on it. Customimages can be the difference between a mediocresite and an amazing site. Imagery is significantly im-pactful on an audience, even more than they realize.For instance, you may hear people often say they lovethe Apple website. However, if you remove all of thegreat product images from the site and replace themwith stock photography, the website will have a verydifferent effect.• Sharp Colors & Subtle Textures: We made sure thenew Sally H website exerted a modern, elegant, yetedgey persona through the use of sharp and crispblack and white - and spots of pink for variation. Wealso used subtle textures to add an element of inter-est. The details truly make the design.