When I was writing a graphic design brief for one of my clients I thought I should write down a comprehensive yet useful post out of it. It was actually not a design brief in the literal sense as my client wanted me to send my opinions about their “design interface” and tips to improve it from the perspective of a graphic designer.

Freelance graphic designers know how important their clients are and how important it is to make them happy with quality work and keep them coming for future projects as a returning customer. To make this happening it is not easy unless you strictly follow 15 indispensable virtues associated with a quality design. Being in the profession myself, even as I know the basics, I think it is always good to keep track of the things I do regularly so I should keep improving in my approach and be more focused to make beautiful — no — great or extraordinary designs.

Now let’s go through each web design element in detail from a graphic designer’s perspective:

It is a natural common sense to know what you are doing about what you actually want to do. This is the first thing that should exist in your mind. Ask your client to summarize the purpose of his/her website including the industry, demographics, target audience with age group. This is important because not all websites fall in one category or demographics. For example, a website related to nightlife is totally different from a kids care site.

The target market and the competitor websites

What’s the market of your client and who are his/her competitors? This is an all-inclusive question that can help a designer to know the client’s target market and the competitors as well as a medium to get closer to the design requirements as the design keeps proceeding. So a space for providing links / URL of reference or competitor sites is essential while writing a design brief of a specific project.

Layout structure or wireframe is a blueprint of the actual design. Some clients are specific about the layout structure of their website. While some clients leave the creative control over to the designer to choose the layout that will fit their websites. However, it’s always good to get client’s idea and taste on the layout structure. Here’s a good article on better wireframing.

Here are a few examples of “Skeleton Layouts”:

Colors bring life to the design. Selecting color choices is the crucial to make or mar the design. Colors also define the ability of a designer to perceive a visual idea to make it happen. Most of the clients do like to send their color choices, but still some of them trust the designers’ selection on color shades. So it is the responsibility of the designers to help their clients with the right color choices. There are several online and desktop color tools to ease your color selection process.

Here’s a some good collection of color tools and resources:

http://kuler.adobe.com

http://www.colourlovers.com

http://colorcombos.com/

27 Color Tools and Resources

Although this is not a prerequisite item, some customers are picky about fonts, styles & sizes. Especially, when the website tends to be a typographic based or a creative one, it becomes rather essential to look over for perfect fonts that suit the mood of the website.  For example a more creative design with an old western or wooden look needs relevant fonts that suit the ideality.

Here are a few resources for free, quality fonts:

35 High-Quality Free Fonts For Your Designs

50 Free Handwritten Fonts for Web Designers and Logo Artists

50+ Fonts for Big, Bold Headlines

50 Incredible Fonts for Professional Web & Print Design

15+ FREE Western Fonts For Your Wild West Designs

You can find more suitable fonts from these free font sites:

Urban Fonts
1001 Free Fonts
Dafont

Ask your client to send you the logo if it is pre-existing. If it is not ask if he/she wants a new logo designed. This can also be dealt with right while discussing the project details in the beginning or in your design brief. In case if the customer neither has a pre-existing logo nor wants a new logo, then you can go ahead with a text-logo. Text logos can be simple but elegant with some nice effects on them.

Here are a few examples of text logos:

Ask the client to list out the navigation items including sub-navigation to run on the website. Navigation is also known as menu.  Do ask the client if she/he wants text navigation or image-based. (It depends on the nature of the design and the fonts selected.) You can try out some creative ideas such as adding icons to the navigation buttons. Some sites use navigation icon to be more user-friendly.  Also get to know if the client wants navigation items on the side bar as well.  Here’s a quick example of a navigation / menu bar:

Check out these cool and creative navigation models:

50+ Gorgeous Navigation Menus

50 Stylish Navigation Menus for Design Inspiration

50 Beautiful And User-Friendly Navigation

50 Really High Quality Photoshop Navigation Menu Tutorials

Header makes a website stand out. It is probably the first thing that a visitor sees first on visiting a website. The graphics or text that will be used in the header thus should make a good first impression.

Some websites use multiple graphics/images in the header with some nice slide effects that can be done in Adobe Flash or using jQuery script. Since you cannot actually provide the final output of the header slide at this stage of mockup design, it is advised to send a few screenshots of the header graphics that will rotate at different intervals.  Further, some sites may require header graphics in inside pages as well. So get to know if your client needs header graphics in the inside pages also. Do not forget to ask your client if he/she needs custom made graphics or want stock images used in the headers.

If you are asked only to design a homepage, then you may probably need not to design inside page headers unless the client asks for them for an additional payment or probably you want to do a favor to the client by creating the inside page headers for free.

Here are some nice examples of headers:

50 Excellent Header Designs

15 Creative WordPress Header Designs

Side bar(s) allows sub-navigation, buttons, specials section, news section, login box, short contact form, contact address, client /partner logos, etc. Some simple sites use no side bars. So be aware of if the client wants side bar(s) or needs a text area only.  Side bar items can be locked in nice rounded corner or straight edges boxes or even can be left floating depending on how you conceptualize the design.  Try to add icons / arrows or small graphics to highlight the items as necessary. You can also freely use your creativity in selecting different fitting fonts, suitable gradients, seamless drop-shadows, thin or dark or dotted lines or matching effects demanded by the type of the site.

Some examples of side bars:

http://www.huffandstapes.com

http://www.growersandnomads.com/home

http://www.photographyserved.com

http://www.thedrakehotel.ca

This area holds the central textual content that speaks out about the company / services / products or the message that the client wants to convey right on the opening of the frontpage.  It will also hold images depending on the nature of the site and the layout selected.  This area can be subdivided into sections for services or highlighting certain popular or featured products (for ecommerce sites) as per the specs.  For certain portfolio or gallery sites, the body area is effectively used to display gallery images especially when it is a one-page website. While a traditional website uses different pages to convey its information, services / products /contact form etc, the trend of single page sites use all the said pieces of information right on the first page including contact form.

Here are some examples of body area systems:

http://illypads.com

http://www.typographyserved.com

http://www.collettecostello.co.uk

http://www.cssninjas.com

http://www.thegreatbeardedreef.com

http://www.pasti.pl/#moje-prace

http://www.blackestate.co.nz

Footer is normally used to write the copyright info and repeat some navigation links.  However, some sites do not include links in the footer, but just write the textual copyright info.  Webpages that are vertically lengthy will use a “go to top” link / graphic included in the footer clicking which will take you back to the top of the page.  Some graphic designers tend to neglect the footer section thinking that it is not that important. However, when you notice blogs, you will definitely find the importance of footers as several blogs use the footer space to creatively display graphics or other sections with links.

Here are a few examples of footer:

Footers In Modern Web Design: Creative Examples and Ideas

40 Beautiful and Creative Website Footers

Before thinking of stock images, I would rather first ask the client to provide any graphics or images that are to be used in the design.

On several  occasions, I was asked by my clients if I provide stock images on the designs I create. My answer was I would provide only a few images depending on the package they select. I normally provide designs based on packages. It is because even as you can find an image as low as $1 there are some images that can cost you $30 / $50+ per image. When my clients are tight on budget I would sometimes keep myself tight-lipped.

Some clients do provide images or want you to use from their stock account. If you are asked to use images from an account, it is recommended you use comp or watermarked images first. It is because to not waste money on downloading images that your client doesn’t like . So if you use comp images, you can have the option to try different images that fit the demand of the design and finally choose the ones that are approved by the client.

I agree that there’ll be sort of double work when you use comp or watermarked images as you will have to replace the graphics with the finalized images. But that’s okay as you are actually helping your client save money on unwanted images. 

Here are some affordable royalty-free stock photo sites:

http://fotolia.com

http://bigstockphoto.com

http://www.istockphoto.com

http://dreamstime.com

Well, I offer design packages that include 2 to 3 subpages designs and I have always noticed that subpages normally follow on the lines of the homepage layout except that they need some additional graphics or images as necessary. Nonetheless, I have designed some inside pages with extensive tables, listings, floating forms or creative step-by-step registration form or a profile page or an interface & more.  When a comprehensive subpage is to be designed, you need to first chalk out the layout structure using wireframe format or by making rough sketches.

Examples of different inside pages:

http://www.madison.co.uk/brands.aspx

http://www.apple.com/finalcutstudio/finalcutpro/collaboration.html

http://www.trulia.com/property/1084055251-836-Dolores-St-San-Francisco-CA-94110

Facebook logged-in page

For designers inspiration is not seasonal.  Like change is constant, like the profession keeps going, inspiration is the one constant thing that feeds creativity.  So where do you get the inspiration you want? There are a lot of ways, offline and online. Exchanging of thoughts, taking a look of other designers work, reading interviews, thoughtful quotes, articles are some of the general ways to get inspired.

Here are some specific design-related inspiration resources:

50 Best Sites To Get Design Inspiration

http://thedesigninspiration.com

Readers Pick: 16 Sites for Web Design Inspiration

34 Places to Get Design Inspiration – Online and Off

100 Unconventional Sources for Web Design Inspiration

Internet is abundant with useful and free resources to help you with your design stuff. There are a lot of articles, tutorials, documents, icons, design tools, free templates and more. While searching for these resources try to use specific keywords or refine your search from your general or broader terms or phrases and narrow them down.  Keep visiting various design blogs and subscribe to their RSS feed so you will get the latest updates. Several of the design blogs provide a “freebie” section where you can find free and useful stuff.

Essential List of Resources

Down loadable PSD files

Design Resource | 15 Sites to download Free PSD files

32 Free PSDs

Inconfinder

Iconspedia

FreeIconsWeb

Qbrushes (Free Photoshop Brushes)

Brusheezy (Free Photoshop Brushes & Patterns)

Texture King (Free Photoshop textures)

Vecteezy (Free Vector Files)

Vectors4Free (Free Vector Files)

25 Free Vector Sites

30 Free Stock Photo Sites

So what’s next when you have finished the first draft of the design? Here are a few points you may need to consider post-design.

1.    Take a thorough look of your mockup design by going through each point of the specification.
2.    View the design from the client and a general / target user’s perspective and note down the points that you perceive along.
3.    Find faults in your own design and address them.
4.    Send out the design to your friends or trustable design groups and take their feedback.
5.    Make necessary changes.
6.    Trust yourself & be satisfied with your own work.
7.    Send the mockup design to the client with a nice email.
8.    Wait for the client’s response.
9.    Client sends revisions. Go through the list and understand the changes and if you have any questions email / call back the client to get clarification.
10.    Make revisions on the design and check the revised design with the list.
11.     Send back the revised mockup design to the client and wait for the response.
12.    To and fro of revisions.
13.    And LOL, the design gets approval.
14.    Be happy, and ask for (2nd) installment of payment if you have agreed at this stage.
15.    Work on the inside pages, if the customer agreed for the inside pages and go back and forth for any changes.
16.    Finally, all designs  are approved.
17.    Ask for the final payment and keep the files read.
18.    Payment received and files emailed.

Conclusion:

Website design is a process and a study in itself.  If it is done correctly, it is appreciated and accepted or it will be of no use.  It’s all like doing a right mix of ingredients to make a tasty dish and if it tastes good you’ll like it and if it doesn’t, you are left to leave it off or throw it away.  From start to finish all the above discussed elements of website design are crucial for the success of a quality design in terms of graphics. Follow them thoroughly and try to keep improving yourself from your own practical experiences as well as reading others, so you can implement them and make your client’s happy and get paid satisfyingly.