I am a Web and Graphics Designer specialized in Website Design, Wordpress Theme Design, Logo Design and Graphics. Check out my portfolio and 
Loading...
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:
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 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:
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.growersandnomads.com/home
http://www.photographyserved.com
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://www.typographyserved.com
http://www.collettecostello.co.uk
http://www.thegreatbeardedreef.com
http://www.pasti.pl/#moje-prace
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:
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
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.
Design Resource | 15 Sites to download Free PSD files
Qbrushes (Free Photoshop Brushes)
Brusheezy (Free Photoshop Brushes & Patterns)
Texture King (Free Photoshop textures)
Vecteezy (Free Vector Files)
Vectors4Free (Free Vector Files)
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.
________________________________________________________________________________________
Subscribe to Pixelactic’s RSS Feeds and do not miss even a single post.
-
Author: Rafi
I am the man behind Pixelactic and DreamView Studios. I have 4+ years of experience in designing websites, WordPress theme layouts, logos, and graphics. I love gaining & sharing of knowledge as well as providing quality graphic design service. Follow me on Twitter @pixelactic.
58 responses so far!
-
[...] 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 projec Read the original here: 15 Indispensable Elements of Website Design for Serious Graphic Designers [...]
-
[...] Continued here: 15 Indispensable Virtues of Website Design for Serious Graphic … [...]
-
[...] Here is the original post: 15 Indispensable Virtues of Website Design for Serious Graphic … [...]
-
[...] Here is the original post: 15 Indispensable Virtues of Website Des&… [...]
-
[...] Read the original post: 15 Indispensable Virtues of Website Design for Serious Graphic Designers | Pixelactic [...]
-
[...] This post was Twitted by megAlone [...]
-
7 BrianM
~ Aug 13, 2009 at 7:51 pm
Great list. I have always somewhat followed the steps in this list and clients sometime get a little impatient. They think that a couple clicks and we can produce the perfect website. Ill have to send them here as a way of saying every designer preps for projects.
-
8 Rafi
~ Aug 13, 2009 at 10:52 pm
Thank you, Brian. Like you have experienced, I too have seen several clients who want the designs done quickly WITH quality. I have always tried to explain them that there involves a process to design a quality site and getting the design done in a hurry will impact on the quality of the design. I always try to be as best as I can even if it is a small job and try to help customers in the best possible way because it is what we are here for.
-
9 Preston Lee
~ Aug 13, 2009 at 11:46 pm
Thanks for the post. I agree with almost all of it. The logo thing is where I am getting a little hung up but I think I understand what you are getting at.
I have also written a post on balancing speed cost and quality in graphic design that might interest your readers. Here’s the link —> http://graphicdesignblender.com/balancing-speed-cost-and-quality-in-graphic-design
-
[...] This post was Twitted by ricardomedici [...]
-
[...] This post was Twitted by drigoteixeira [...]
-
[...] 15 Indispensable Virtues of Website Design for Serious Graphic Designers | Pixelacticpixelactic.com [...]
-
[...] Visit link: 15 Indispensable Virtues of Website Design for Serious Graphic Designers | Pixelactic [...]
-
[...] Read the original post: 15 Indispensable Virtues of Website Design for Serious Graphic … [...]
-
[...] 15 Indispensable Virtues of Website Design for Serious Graphic … Share and [...]
-
16 Muwasalat.com
~ Aug 14, 2009 at 8:19 am
Lengthy big useful article.
-
[...] the original post here: 15 Indispensable Virtues of Website Design for Serious Graphic … Comments [...]
-
[...] This post was Twitted by cssbuilt [...]
-
19 Website Design Sydney
~ Aug 14, 2009 at 1:46 pm
Hey, Its really great post..
Thanks for sharing ideas..
-
[...] 15 Indispensable Virtues Of Website Design For Serious Graphic Designers (pixelactic.com) [...]
-
[...] Originally posted here: 15 Indispensable Virtues of Website Design for Serious Graphic … [...]
-
[...] 15 Indispensable Virtues of Website Design for Serious Graphic Designers [...]
-
[...] Virtues of Website Design for Serious Graphic Designers Rafi over at pixelactic.com has a fairly comprehensive list of items that we, as designers, should continuously improve upon when it comes to design concepts for sites. [...]
-
24 Jane
~ Aug 18, 2009 at 4:27 pm
Oh geeezzzz! I’ve been wading very laboriously through a book covering the essence of website design. Could have saved myself some time if I’d waited for this tip list.
-
25 Rafi
~ Aug 18, 2009 at 5:02 pm
Cool. Thanks much, Jane. I appreciate that you liked the tips in this article.
-
26 Andrea
~ Aug 18, 2009 at 9:27 pm
Rafi,
Great post, thanks for sharing! The only thing I disagree with is in stage 15. Even though you have followed the above steps, you should get client approval at several stages – the first stage being the wireframes/layout stage. The client should understand and approve of how the site is presented prior to approving colors and graphics. Small revisions at each stage are much easier to do than large revisions at the end of design.
Cheers,
Andrea
@ProtoShare -
27 Rafi
~ Aug 19, 2009 at 10:29 am
Thank you, Andrea. Your point regarding the client’s approval at different stages is good, but not all the cases are the same. There are several clients who actually do not know what they want; and there are also clients who just approve the mockup design because they do not know much about the elements of design. And there are also designers who actually do not present wireframe before going with the actually design layout and sometimes neither do the customers ask for.
The wireframe phase is still not a fully accepted habit among the entire design community. It depends on designer to designer and also to the urgency and situation of the design need. This point is the one I often experience in my day to day website design where most of the clients do not ask for wireframes, rather go directly for design mockups. Later, after the first viewing of the mockup deisgn, they will send back for necessary revisions and the iteration runs down from 1 to many depending on how the customer want to see the final output.
As such, if you read point #12 “To and fro of revisions”, this clearly indicates the client’s involvement of requesting changes before approval. If you notice the entire post, all the 15 points explained are limited only to the graphic works of a website and not coding, so once the design is approved there’s no going back and forth for the graphical changes on the design during the development stage unless otherwise and pre-approved of such a situation in the design brief. Hope this clarifies it. Thanks much.
-
[...] and be more focused to make beautiful
-
29 Andrea
~ Aug 19, 2009 at 9:03 pm
Rafi,
Thanks for the follow up. I am aware that these stages are solely for planning and design prior to coding. I only share my opinion through experience as a former agency project manager.
You are correct, not everyone does wireframing or even layout approvals with clients prior to design. Some clients think they do not require these steps. But this is the part that I find unfortunate, IMHO.
My most successful website projects were ones where we hammered out the needs of the client, then went through the wireframes/layouts, then went to design – gaining agreement at each step. Even if the client knew what they wanted. Going through these steps ensured that we were on the same page and understood what they wanted and cut down our rounds of design revisions. The steps do not always need to be highly detailed or formal, but really made our team’s process run smoother.
But you are right, each team needs to find the right process that works for them and their clients. Just adding my experience to what you have nicely laid out.
My best hope is that people follow a consistent process – it makes life better for all those involved.Cheers,
Andrea -
30 Printing Melbourne
~ Aug 20, 2009 at 12:17 pm
Wow, great resource. I’m sure many established freelancers will follow a similar process however a lot of less experienced freelancers could benefit a lot from this. Great post.
-
31 Rafi
~ Aug 20, 2009 at 3:08 pm
Thank you.
-
32 Shovan
~ Aug 21, 2009 at 3:57 am
Useful info – Thanks
retweet-ed it -
33 Rafi
~ Aug 21, 2009 at 4:02 am
Thank you, Shovan. I appreciate it.
-
[...] 15 Indispensable Virtues of Website Design for Serious Graphic Designers [...]
-
[...] 15 Indispensable Virtues of Website Design for Serious Graphic Designers | Pixelactic (tags: resources graphic design guides) [...]
-
[...] This post was Twitted by aritelia [...]
-
[...] 15 Indispensable Virtues of Website Design for Serious Graphic Designers by Pixalactic [...]
-
38 Scott Radcliff
~ Sep 19, 2009 at 5:42 am
Agree with Andrea, I get approval at every step. Much easier to make small adjustments. Other than that, the tips are right on.
Being a developer I would have to add data structure and application architecture. After all, the traditional website is dead, they are all mini web apps now.
-
[...] Source:15 Indispensable Virtues of Website Design for Serious Graphic Designers | Pixelactic [...]
-
[...] more: 15 Indispensable Virtues of Website Design for Serious Graphic Designers | Pixelactic Comments0 Leave a Reply Click here to cancel [...]
-
41 Rahul - Web Guru
~ Sep 19, 2009 at 12:20 pm
Thankx a real help.
-
42 Web Designer
~ Sep 19, 2009 at 1:47 pm
And another rule: never use auto-playing audio in web design that starts automatically when page is loaded, unless started explicitly via user interaction! It annoys me, and I think it would annoy any web browser who has tons of tabs open and struggles to find out which tab is emanating sound.
-
43 Rafi
~ Sep 19, 2009 at 3:24 pm
Thank you, Rahul.
-
44 Rafi
~ Sep 19, 2009 at 3:25 pm
True, agreed.
-
45 Freelance Graphic Design | Tony
~ Sep 20, 2009 at 4:49 pm
The tips are right on. These are all what graphic designers should do for their websites’ designs. Patience and dedication are very much needed because it takes time and passion for art and the job that you have for you to get recognized.
-
46 Rafi
~ Sep 20, 2009 at 5:10 pm
Yes true. Thank you.
-
47 nift
~ Sep 28, 2009 at 2:19 pm
Great article, I’m always looking for photos, so this will make my job that much easier and assist in my searches. Thanks for taking the time to put this together, its fantastic!
-
48 Driving Schools in Milton Keynes
~ Oct 1, 2009 at 5:06 pm
Nicely written, so have you any other information on that, if yes, then please send it to me, I am hungry to read your next post.
-
49 web design
~ Oct 6, 2009 at 4:45 pm
however majority of people follow this but there is no proper conversion to their site. people want more conversion to their site rather than just good theoretical web site design.
-
[...] 15 Indispensable Virtues of Website Design for Serious Graphic Designers | Pixelactic (tags: inspiration guides ux layout) [...]
-
[...] This post was Twitted by iAshim [...]
-
[...] This post was Twitted by designEcho [...]
-
53 website design
~ Dec 21, 2009 at 8:26 pm
Good designs, i am surely going to refer and use in my website design practices.
-
54 Rafi
~ Dec 21, 2009 at 11:47 pm
I appreciate it. Thank you!
-
[...] 15 Indispensible Virtues Of Website Design For Serious Graphic Designers (pixelactic.com) [...]
-
57 Londen bezienswaardigheden
~ Apr 8, 2010 at 5:09 am
Great resource, thanks for sharing!
-
58 Toys R US Coupons
~ Jul 18, 2010 at 6:32 pm
I think this is really inspiring, good to see it here.
Leave a Comment
