Clients During a Redesign

There is a lot more that SHOULD go into a website re-design than most people realize.  Many people think that just having an updated design with a fresh look is all that is needed when redesigning a site.  But really, there are a number of aspects of your business that should be evaluated when going through the redesign process.

If your design process is very involved, collaborative, and thorough, it should save on time and money, while delivering a better overall product and leading to higher client satisfaction.

Here are 6 aspects should be discussed when a design firm is discussing a redesign with a client to help ensure project success.  Whether you’re a designer or a client, following these tips will help your project be less stressful.

Overall Goals


There needs to be a clear understand of why you are redesigning the site.  Are you redesigning it just because its been 5 years since anyone has touched the site?  Or are there real business objectives that you look to accomplish with a new site?  That is really what needs to be discussed.  What problems/pains can we relieve with a new site?  How can we create a better user experience?  How can we earn industry credibility?

Outline your goals for the new site.  If a goal is to download a whitepaper or webinar, are you looking to acquire user information to follow up?  If you are trying to increase the time-on-site, what can you add to the site to keep the user engaged longer?

While every websites goals are going to be different, they should all fit into one or all of these categories.

  • Lead Generation
  • Site Engagement
  • Brand Awareness
  • Usability
  • Industry Credibility

Re-branding Efforts


During a complete website redesign, is the perfect time to talk about re-branding as well.  If you think it may be time for a new logo, new color scheme, and an overall new look, this will affect how the website is going to be designed.  In some cases it just makes sense that if you are going to be changing the look and feel of the website, that the logo gets updated as well.  However if you have built a lot of credibility and invested a lot of marketing dollars into your branding, it may not be worth it to change your brand.

However this is something to keep in the back of your mind, because if you do decide to re-brand, than it will affect the design of the site and other elements of your overall marketing.

Website Examples


Design is so subjective, so it is important to get feedback from your client as to the type of website design they are looking for.  From my experience when the client does not give feedback, they are usually unhappy and spend 2-3 times as long to complete the site.  The reason is because the designer is just going off of his/her opinions and not taking in the ideas of the client.  Of course you are not going to be able to please everyone, but with feedback from the client, it will help cut down the number of revisions because the designer has a better understanding of what the client is looking for.

A client should be able to discuss:

  • Do you want your website to be playful? professional? trendy? abstract?
  • What websites do you like? why?
  • What websites do you dislike? why?
  • What color schemes do you like?
  • Who is your primary audience?

Target Audience/Customers

Depending on your target audience and web visitors, you should design your site to cater to their needs.  For example, if your business is selling kids toys, you probably want your site to cater to parents while keeping it playful and fun.  If you a nursing home, trying to entice elder people to join you want to make sure the font is big and easy to read.

Here are some things to think about.

  • Are your visitors mainly male or female?
  • How old are your target customers?
  • What geographic location are you catering to?
  • What type of background/education so your primary visitors have?
  • B2B or B2C?

Call-To-Actions

Visitors to your website do not want to think when they get to a site, so simplify your calls to actions.  If you are offering a summer sale on your clothing, have a well-designed graphic in the main real estate of your site for people to see.  If you want users to download a new whitepaper, have a call to action in more than one area of your site. Basically if you don’t tell people what to do, they are not going to do it. 

Think about these questions when figuring out your call to actions.

  • What is the primary goal of your site?
  • What do you want your visitors to be able to accomplish?
  • Is it painfully obvious what the user should do?
  • Can visitors find ways to contact you? download? sign-up? purchase?

Site Architecture/Navigation Structure

Many design firms do not lay out their site structure before they begin designing.  Usually they will just wing it and throw up a navigation without actually putting any thought into how the site should be organized and structured.  This is an extremely important aspect to a redesign that many companies overlook.  I don’t believe you need to lay out every single page on your site before you start designing, but you should have a well thought-out navigation that is organized and 1-2 clicks away from accessing any page on your site.

You should be thinking about catering your navigation to different types of users.  Some people may want to just learn a little bit about your company, others may be looking to see if you provide a certain service/products, others will know exactly what they want and want a way to buy or contact you.  Keep all of those things in mind when structuring your site and thinking about what pages are needed to fulfill all types of users.

+++From Mark Thompsonat creativefan.com

Advertisements

free twitter backgrounds

Whether you use Twitter to promote your business or simply to enhance your social life, it’s vital your Twitter page looks its best to attract those all-important followers. With Twitter receiving 55 million visitors every single month, you’ll need more than regular tweets to stand out from the crowd! A great Twitter background is a key ingredient in creating a Twitter page that’s both eye-catching and true to your personality or brand image.

There are literally hundreds of websites out there providing Twitter backgrounds – some are very good, others are terrible! We’ve done the hard work for you: we’ve trawled through (what seems like) millions of backgrounds to find the 35 coolest ones around. Some are free to use, others are available to purchase for a small fee, and others still are strictly for inspiration only. You’re bound to find one that’s perfect for you, helping you transform your Twitter page into a masterpiece of social networking! from Tom Walker at thedesignsuperhero.com

1. Photoshop

photoshop

2. Dream Stream

2dreamstream

3. Bunch of Lights Vector

3bunchoflightsvector

4. Shapes

4shapes

5. Creative Colors

5creativecolors

6. Season Lights

seasonlights

7. New York City

7newyorkcity

8. Earth Horizon

8earthhorizon

9. Galaxies

9galaxies

10. Fire Fly

10firefly

11. Moon

11moon

12. Writer’s Block

12desk

13. White Energy

13whiteenergy

14. Red Balls

14redballs

15. Water Bubbles

15waterbubbles

16. Flames Pattern

16flamespattern

17. Optic Cables

17opticcables

18. Pink Cascade

18pinkcascade

19. Wallpaper 1

19wallpaper1

20. Rainbow Clouds

20rainbowclouds

21. Life Makers

21lifemakers

22. Cosmos

22cosmos

23. Blue Sci-Fi

23bluescifi

24. Wolf

24wolf

25. New

25new

27. Siberian Tiger

27siberiantiger

28. Typographic

28typographic

29. Twitter-1

29twitter

30. Zatun

29twitter

31. Carr Rays

31carrrays

32. Vintage High Rise

32vintagehighrise

33. Laquesefue

33laquesefue

34. Flying

34flying

35. Juanmanuelm

35juanmanuelm

from  thedesignsuperhero.com more screen wallpapers

fest_wide


Icon set for app design

In WDL’s continued effort to find and deliver to you the best free design resources,  WDL compiled a list of  excellent icon sets for application design.  You can’t have too many icons in your design library. In this collection you’ll find a variety of icon styles that should fit any type of application design.

Basic Set 2

application icons

iconSweets

application icons

Mini Icons

icons

Free iphone toolbar icons

application icons

Glyphish

application icons

Splashy Icons

Splashy Icons

Token

icons

Basic Set

application icons

Vaga

Vaga

Pixelated

icons

Nixus

icons

Vaga Icon Set

application icons

FAMFAMFAM – Mini

FAMFAMFAM - Mini

Free web development icons #1

application icons

Free web development icons #2

application icons

Tango

Tango

Led Icon Set

free icons

FAMFAMFAM – Silk

FAMFAMFAM - Silk

Pixel LED Icon Set

Pixel LED Icon Set

Shiny Icons

icons

Once

icons

Mini Icon Set

icons

Fidelity

icons

Vector Social Media Icons

icons

TRANQUILITI

icons

WooFunction

icons

32 Pixel Social Media Icons

icons

Oxe Icons Set

icons

Mixed Icons Pack

icons

Touchscreen Icons

icons

Applications Icons

icons

Nixus

icons

Roundy

icons

Help

icons

Sketchy Web Icons

icons

Medical Icons

icons

MinIcons

icons

Pos Machine Icons

icons

Absque

icons

Here you will see icons that make use of painted brush strokes, sketchy line work, and grungy textures.

Old Bottle Crowns

unique icons

Sketchy Web Icons

unique icons

Grunge Peeling Stickers Social Media Icons

unique icons

Watercolor

unique icons

Natsu Icon Set

unique icons

Nurture

unique icons

Woven Fabric Social Media Icon Set

unique icons

Woven Fabric Social Media Icon Set

unique icons

Sketchy Icons

unique icons

ICon Pack

unique icons

Hand Drawn Doodle Icons

unique icons

Red Little Shoes Icon set

unique icons

Social Icons Hand Drawn

unique icons

Page Peel 1

unique icons

Page Peel 2

unique icons

Handy

unique icons

Handycons

unique icons

Handycons 2

unique icons

RM Kute Toolbar Icons

unique icons

Wooden Badges

unique icons

Cemagraphics Dock Icons (17 icons)

icons

Gentle Romantic icons (5 icons)

icons

Lovely website icons (8 icons)

icons

Designer’s tools icon

icons

Shopping bag icon

icons

Leica Camera Icon

icons

iMod (146 icons)

icons

Moleskine Helvetica Icon

icons

Magic tablet (2 icons)

icons

Outdated icons (8 icons)

icons

Red Moleskine

icons

Lightroom or Aperture

icons

Playground icons (9 icons)

icons

Canon 400D + lens 17-85mm (2 icons)

icons

Moleskine Helvetica Icon

icons

Massive Media Icons (3 icons)

icons

Archigraphs Collection Icons (10 icons)

icons

Hrvoje Bielen Icon Set (9 icons)

icons

Moleskine Icons (8 icons)

icons

Archigraphs Cars Icons (7 icons)

icons

I’m sure you can find a place for them in your icon library.

HTML 5

HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. In an effort to encourage you to do the same and to prepare you for the future, WDL rounded up  useful HTML5 tutorials and cheat sheets.

Tutorials

How to Make an HTML5 iPhone App

html5 tutorial

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

html5 tutorial

Design & Code a Cool iPhone App Website in HTML5

html5 tutorial

Coding A HTML 5 Layout From Scratch

html5 tutorial

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

html5 tutorial

Have a Field Day with HTML5 Forms

html5 tutorial

Designing a blog with html5

html5 tutorial

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

html5 tutorial

Structural Tags in HTML5

html5 tutorial

Coding a CSS3 & HTML5 One-Page Website Template

html5 tutorial

Cheat Sheets

HTML 5 Cheat Sheet

cheat sheet

HTML 5 Visual Cheat Sheet

cheat sheet

HTML5 Canvas Cheat Sheet

cheat sheet

HTML 5 Pocket Book

html5 tutorial

Wireframe tools

When starting a new web design project, it’s always a good idea to begin with a wireframe. The purpose of a wireframe is to communicate the layout of a page without getting caught up in color and design elements. Wireframes can be a big time saver as they help all parties involved come to an agreement on placement of major page elements such as headers, content areas, navigation menus, and footers. The key is to get the layout nailed down so major layout changes won’t take place once detailed design elements are in place.

There are several different routes that a designer can take for creating wireframes, and there are even applications designed specifically for this. For this article, we’ve rounded up 10 excellent tools for creating wireframes. (from WDL)

MockFlow

wireframing

MockFlow allows you to design and collaborate (in real-time) user interface mockups for your software and websites. It comes with numerous built-in components & icons

.

Axure

wireframing

Axure enables application designers to create wireframes, flow diagrams, prototypes, and specifications for applications and web sites. It lets you use ready-made widgets including buttons, form fields, shapes, and dynamic elements that you can edit and format in a familiar environment. Or you can create your own custom widget libraries.

Balsamiq Mockups

wireframing

Using Balsamiq Mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. With 75 pre-built controls to choose from, you can design anything from a super-simple dialog box to a full-fledged application, from a simple website to a Rich Internet Application.

Pencil Project

wireframing

The Pencil Project is a free addon for Firefox. Some key features include: built-in stencils, multi-page document support, and multiple export options.

HotGloo

wireframing

HotGloo is completely web based with lots of features that let’s you drag and drop and scale items easily. It also has support for realtime collaboration.

Mockingbird

wireframing

Mockingbird is another web app with a focus on collaboration. It allows you to link multiple mockups together and preview them interactively to get a feel for the flow of your application.

Cacoo

wireframing

Cacoo is an online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts.

ProtoShare

wireframing

ProtoShare is an easy-to-use, Web-based prototyping tool with a focus on collaboration. Team members can review work and provide timely feedback, ideas, and suggestions on clickable wireframes or creative content.

iPlotz

wireframing

iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.

OmniGraffle

wireframing

OmniGraffle is an app for Mac OS that gives you plenty of tools to create amazing wireframes and mockups, but it’s also great for creating all kinds of charts and diagrams as well.

The articke and images from WDL

Time Warn Cable Redesign

Posted interactive comp for timewarncable.com (path HOME>TV>…SITEMAP…)

timewarncable.com home>residential page

Time Warn Cable Redesign Analysis


I checked out my my cable provider’s online presence (Time Warner Cable.com) and here are the hits and misses:

HITS

  • attractive and interactive site
  • attractive interactive site-looks user friendly

  • simple navigation with drop down options: looks user friendly
  • simple main nav with secondary nav but doesn't specify location

  • contents are well organized in compartments/modules
  • well organized contents in compartments or modules

MISSES

  • limited browser support IE, Firefox, Safari
  • note limited browser support on top in the yellow header

  • distracting blue image background looks dated
  • distracting bubble image background displayed on 1920 resolution

  • misleading navigation: lacks page location structure, user can be easily lost
  • good example of user page location, but other page locators in other are misleading

  • over use of blue monochromes provides  little contrast and sometimes poor legibility
  • over use of blue tones provide little contrast resulting in poor legibility at times

COMPETITORS

The following competitors are noted below to show their online presence:

  • att.com
  • colorful, attractive, simple site, highly organized looks very user friendly

  • verizonwireless.com
  • attractive, colorful, cheerful, highly organized/looks user firendly

  • comcast.com
  • bright, main nav looks simple, but other sub navs and links are confusing

  • directtv.com
  • similar look as time warner's, but looks busy/primary color scheme looks childish

Overall,timewarnercable.com is an OK site but can surely needs an update.  Att.com and verizon.com look fresh and very user friendly with  white as the color background providing a clean, fresh user friendly sites. Directtv.com looks quite similar to timewarnercable.com but worse showing less stellar nav as well as a childish look and feel. I think it’s time for timewarnercable for an update. Here I will use timewarncable.com as the name of the redesigned site  instead of timewarnercable.com.