Your SlideShare is downloading. ×
Clikzy Design Process
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Clikzy Design Process

199
views

Published on

Clikzy Creative Design Process

Clikzy Creative Design Process

Published in: Business, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
199
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 108 North Payne StreetAlexandria, VA703-567-4330contact@clikzy.comOURDESIGNPROCESS
  • 2. 1 WIREFRAMEAfter the discovery and planning phase of anyproject, including a thorough website question-naire and kick-off call, the first 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.
  • 3. 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.
  • 4. 3 REVISIONS(unlimited)We want you to love your website. Even if thatmeans you have a specific 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 flex-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.
  • 5. 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 effect: 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.
  • 6. 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.