A logo is an essential part of branding your website and marketing it offline and online. Some logo designs feature simple, beautiful typography whilst others more are fun and colourful. However, all logos should be memorable and able to integrate with your website design effortlessly.

One of the best ways of getting inspiration for a logo design is by looking at what other designers have created. Today we would like to show you 50 creative logo designs that we hope will inspire you and give you ideas for creating your own logo.

Lovely Logo Designs

1. Storm Foundry

A great logo that uses a bold font and hides a lightning bolt in the middle of the logo. The noisy insides of the ‘Storm’ part of the logo are reminiscent of a thunder storm.

2. Michael Spitz

An arrangement of colourful leaves in the shape of an M is a good, simple icon that could effectively represent creative growth. Though if you take away the color, it would not work as well to impart the same idea.

3. PhotoForum

A simple yet smart icon logo that simultaneously represents photography and community within the same design. Strangely, the website Photo Forum isn’t using this great icon and is instead using a very basic logo.

4. Moolloon

What else did you expect from a name such as Moolloon? The balloon is modeled after a cow’s udder whilst the basket has a cow coloured scheme (i.e. black and white). It’s a fun design that represents the silliness of the name.

5. Networking

A simple logo that places a crown over the letter I to emphasise the word King. The yellow line that races towards the crown gives the impression of speed too.

6. Pixelflow

Created for a small freelance business, the Pixelflow logo beautifully blends the letter P and F into the same icon. A simple yet elegant logo design.

7. Channing Johnson Photography

A retro style logo that has beautiful typography. The logo was created for Channing Johnson, a wedding photographer that wanted something classy, but that also had ‘grit and edge’ in the design as he also does photojournalism. It’s a classy piece that would work great as a watermark on photos.

8. Full Time

A good idea for a recruitment company that advertises full time jobs, as indicated by the clock filling with liguid. The hands of the clock point to 9 and 5; the regular working hours of full time jobs.

9. Steps

A simple yet smart concept in which the letter E represents steps going up. The basic font would look good in any colour scheme.

10. Sew Perfect

A stylish logo that displays a needle and thread in the shape of the letters S and P. It’s an elegant yet minimal solution for an embroidery business.

11. The Dressing Room

An interesting logo that halves the stick figure in two to suggest the woman is going into a dressing room partially hidden by the door. The dot helps this illusion by giving the impression of a door knob.

12. Huddy Buddy

Huddy Buddy is the clothing company that provides clothes for the ‘cool kids’. The logo is a fun design that has a 1950′s cartoon feel to it and is an important part of the company’s brand.

13. Maple Studios

A simplistic text design with a beautiful colourful icon that is used by the British design agency Maple Studios (yes British, not Canadian). The clean design is ideal for offline marketing such as stationery too.

14. Army of Bees

The 6 bees in the logo have been placed in an arrangement that resembles the letter A. It also looks like the bees are in military formation and are ready to attack. The bees icon looks good though would perhaps look better to the left hand side of the design rather than on top so that more emphasis is placed on the title.

15. MatchBox

A fantastic logo with a cool colour scheme. Great hints at creativity with the box we are told to think outside of burning and stars being freed from within. The different weights and styles on the type also gives the design a bit more of a punch.

16. Gorilla Service

One of the coolest designs created. The gorilla in the logo has a serious look and is dressed up in a suit for office work. The text underneath mimics this bubbly design with a unique curvy font. A fun and memorable design that many designers will get inspiration from.

17. LoveClip

Love meets stationery in this simple yet brandable logo. It’s a smart concept that was created beautifully.

18. One

A beautiful brand identity for the Swiss company ONE GmbH. The slanting logo represents the number one but also mimics a skyscraper. A simple yet iconic design.

19. Shark Tours

A smart concept in which the logo merges a cruise ship and a shark fin. The text has been modified with small hooks at the end of each letter to give it a more aquatic feel.

20. Happy Quote

A simple idea in which the text ‘Happy Quote’ is placed inside a quotation mark like speech bubble. The quote itself also resembles a smiling cartoon character, reinforcing the happy vibe the logo wants to promote.

21. Feather Fly

A gorgeous logo that has a colourful feather in the shape of a bird. It’s a stylish elegant logo solution that promotes a professional image.

22. The Doberman

The logo features a fierce looking Doberman creatively carved out of negative space. The retro design is perfect for a bar or restaurant.

23. Invisible Agent

A creative logo that shows a tie in between four other stick figures to suggest that the one in the centre is an agent blending in with the rest.

24. CFO Cycling Team

A fantastically creative logo that has placed the letters C, F and O in the shape of a cyclist. The concept has been done so effectively that many people might only see the cyclist.

25. Foxy Logo Rebound

The perfect logo for a website called ‘FoxyStats’. The circle is divided into 3 shapes to represent the stats service that the company provides. The top piece resembles a fox with the lower parts representing the body and tail of the fox.

26. Ewali Food

A fun logo that was created for a French fast food restaurant. The original concept showed the village hut with hands out holding a fork and knife though this was changed to open hands as most of the food sold at the restaurant is finger food. Open hands are also more welcoming to customers.

27. Monkey Business

Another fun design that shows a monkey prepared for work. The monkey looks a little subservient, suggesting that he is there to help you with anything you need.

28. AudioTheatre

Beautiful calligraphy gives the AudioTheatre logo an elegant and professional look. A microphone extends from the top of the letter T to represent the recording services that the company provides.

29. LoveLogoDesigns

Love and the letters L and D are all represented in this simple design. The letter L was formed by placing the love heart design at an angle of 45 degrees. It’s a smart way of incorporating all three words into the one icon.

30. Diamond Bookstore

A diamond shaped logo made from an open book. The design’s simple coloring lends itself well transition to plain black and white like most logo design rules dictate.

31. El Pirata

A fast food restaurant logo that uses two spatulas to represent a skull and crossbones. The skull has a chefs hat on and a mask over their mouth to suggest it’s cooking.

32. Origamia

A cool design that was created for a small origami shop. Apparently the shop owner didn’t want a classic origami shape like a crane or swan so the designer created an origami fish instead. The fish uses two bright colours and the text has a beautiful typeface that matches the logo well.

33. Oliva

Created for an energy solution building firm, Oliva promotes its eco-friendliness by showing two trees holding hands. The trees, together with the dot from the ‘i’ form a negative space home, where the companies energy solutions tend to be aimed.

34. Aqua

An interesting logo that shows water inside the second letter. The clean typeface that is used enhances the minimalist look of the logo.

35. Playground

A simple logo that uses 3 colours reminiscent of the big, bright plastic kid’s park equipment that was once in parks all over the US and the beautiful typeface plays into that imagery. The children’s slide molded from the lettering further cements the idea.

36. Napoleon Sushi Bar

Napoleon is a strange name for a sushi bar however designer Alex Badovsky has managed to create a wonderful logo for the restaurant by developing a fun design that features a cute cartoon character made of rice with a Napoleon styled sushi hat.

37. Banjo Cat

Created for a video production company, the logo shows a white cat playing a banjo against a black background. It’s a fun design that is impressively crafted using negative space.

38. Optimistic Beverages

An interesting way of displaying the metaphor ‘the glass is half full’ by showing the alcohol at the top of the shot glass. The simple illustration is enhanced by the great looking typeface used in the text below.

39. Pixel Science

An interesting logo design concept targeted towards internet companies. The logo shows a beaker with clever pixelated bubbles rising from the top. The typography adds to the overall sharp techy look and feel.

40. Mann Music

This is another well crafted logo design which uses negative space and a single color to denote piano keys which spell out the ‘MANN’ in company name. Simply brilliant.

41. Rich And Famous

An elegant logo that has beautiful typography. The ends of the first and last letters of rich and famous have been extended to give the logo a stylish flow. The same design has been used at the bottom of the logo as an underline.

42. Mayaze

A colourful logo that has a maze inside the letter M. This is a great example of how gradients can be applied to make a logo stand out from the crowd. Though in plain black and white presentations, some of that elegance is lost.

43. TN Consulting

One of the best negative space logos published online. By placing a diagonal line through the letter T, the logo gives the impression of the letter N stacked on top of it.

44. Enormail

A good concept that features a cartoon elephant (or a mammoth!) above the brand name. A traditional mail icon is hidden inside the elephant to highlight the companies services.

45. Cardiologic

A cool logo that was inspired by the famous representation of the atom (logic) and no doubt created using the Spirograph version of Photoshop. Only 4 colours are used within the logo. There are multiple heart shapes hidden within to represent the cardio aspect. The red heart is easier to spot due to it’s colour however.

46. Big Colors

Created for a website that allows designers sell their work to support their local charity, Big Colors is a colourful logo that features what seems to be either a toucan.

47. Bread & Breakfast

Created to give the impression of friendliness and indicate the presence of hand-cooked goods, Bread & Breakfast is a beautiful design in which the bread also represents the coffee in the cup. The shop name is displayed in beautiful typography too; enhancing the trendy look the owner wanted.

48. White Rabbit

Featuring a great illustration of a white rabbit, this cute logo that is the perfect fit for the cafe bar it was created for. The initial concept promoted a more stuffy atmosphere than the fun and relaxed environment this design projects.

49. Percy & Reed

A retro style logo that was created for a London based hairdressers. The logo was inspired by signs from the Victorian era, and brilliantly recreates the simple elegance of the time. It’s difficult not to be impressed by the logos beautiful typography.

50. Word Refuge

A great concept that has been excellently executed. The logo features a book that is half opened and facing downwards, making it look as if the book is a tent. A cool logo for a content writing service.

What was your favourite logo of the bunch? Feel free to share your thoughts in the comment area below.

(rb)

Noupe

  

We all have that one t-shirt that we love; we love the fit, we love the color and we absolutely adore the design. For some, the t-shirt design can be a form of expression or it can simply be a fashion statement. Then there are a few folks who wear t-shirts to show off their great taste in art and creativity. Regardless of the reason one wears a t-shirt, it goes without saying that without great designs, your t-shirt game is probably lacking.

Far too often we take the design and designer for granted. Today, we’ve gathered some super, amazing (and funny) t-shirt designs to showcase the work and the artist.

 The Shirts and Designs

The Great Connection by  roncabardz

Water for Life by deyaz

The Fall by dhectwenty

Living Paint by gabrielng

Voyage by dhectwenty

War is Over by dandingeroz

The Painter by sebasebi

I <3 My City by wotto

Rebuild the Forest by free_agent08

Cuckoo by hogboy

Direction of a Dream by Ikkie

Avalanche by Greg Abbott

Spectrum by dobi

Aerosoiled by Randy Otter

Experimental Idea by CW.cnatch

Wave Goodbye by Raw Meat

Say Cheese by Addu – sc

What Up Polar Bear by Cryface666

Chapter 7: Outside the Box by The N-Spired Story – sc

The Pond by Moulin Bleu

Safari by Fresno

Gae Koen Tok Surabaya Xray by noodlekiddo

Lick Everything by amegoddess

Sausage Party by biotwist

Glow Green by choppre

The Guardian by metalsan

Sugar Skull Tee by John Williamson

All Hands on Deck by biotwist

Panda Sweater Pattern by ghozai

Protect your Soul by X3RTY

Melting Blues by SeedSickShit

Trap Set Trike by seventhfury

Caught by Todd Fooshee

Streets Are Dangerous by Peach Design

Reunion by andreasardy

Last Samurai by EligoDesign

(rb)

Noupe

  

Like any designer, no website is without its merits and flaws. It is through critical analysis and thoughtful conversation that we grow as individuals. If we do not talk about our work and the work of others, then we will not grow as creatives.

We have evaluated each website in this review based on the following criteria:

• Consistency,
• Composition,
• Hierarchy,
• Balance,
• Color,
• Feel,
• Typography,
• Usability and experience,
• Form vs. function,
• Forward-thinking,
• Graceful degradation,
• Common sense.

While not every area is discussed in depth for each website, we will note areas worth highlighting, whether for praise or criticism. It is through the lens of these fundamental design values that we critically look at, think about and discuss blog designs as they are today, in the wild.

“An art whose medium is language will always show a high degree of critical creativeness, for speech is itself a critique of life: it names, it characterizes, it passes judgment, in that it creates.”

– Thomas Mann

Blog Designs In The Wild

Ultranoir

Ultranoir is a wonderful example of well-executed design for an editorial website. The typography is solid, although the body copy could benefit from a bigger size for added readability.

The bold Old English-style logo adds a wonderful touch to the top of the page, without distracting too much.

Functionally, the website is smooth and put together well. The zoom effect on the images when you hover over items adds a nice sense of movement and visual interest. And the simultaneous pop-up effect keeps your attention focused on the currently active item. All of the subtle functionality is made possible with JavaScript and a bit of CSS3, wrapped in a layer of HTML5 goodness.

This is a website from which editorial-oriented websites should borrow a thing or two.

Decorated Playlists

The first thought that struck upon visiting Decorated Playlists was that it is classic Simon Foster. And a quick scroll to the byline at the bottom confirmed this.

If his name is new to you, definitely check him out.

Functionally, the website is dead simple and straightforward, which speaks volumes about Simon’s illustrative and design style.

What makes it a real treat is that each playlist is given its own page. These custom playlists are unique spaces where both musical and visual composition play a part.

A look at the source code reveals neat mark-up that takes advantage of HTML5’s audio capabilities, along with @fontface-served fonts.

From the choice of type to the subtle texture to the simple delivery and message, nothing is out of place here.

Pelican Fly

Pelican Fly immediately draws your attention to its logo, which consumes entirely too much real estate for its function. Yes, the title is important, but once you’re here and know where you are, it should recede to the periphery and not keep staring at the users. A better approach would be to decrease its size and to position it higher up. Where it is, it competes with the first post and the mission statement.

Something about the layout and vast amount of white space has an old-school art-board feel. White space is critical to design, but in this case it is slightly lacking in balance. It almost feels as if it might swallow some of the elements like an ocean, rather than neatly separate the content.

Scrolling down, the page really clears up and allows for more focus on the actual content. Individual posts are displayed in a simple, bite-sized, almost Tumblr-like format, aligned to the right of the page. The left side feels a bit too vacant and creates another compositional imbalance. One easy way this could be remedied would be to allow the list of articles to scroll down the page with the content. This would restore the balance while adding functionality.

The approach here feels minimal, and the designers could have borrowed a few compositional tips from Ultra Noir, and even Decorated Playlists, if they wanted to maintain simplicity. The design isn’t a failure. It remains visually interesting, but much of it straddles the fence between too much and too little.

The code is a neat bit of HTML5, using the shim. One bit of interest was the use of the figure and figurecaption tags, which I haven’t seen used in a production environment before.

Drawar

While Drawar has never disappointed in its quality of content, its design has been lacklustre. The journal section is no different, inheriting the parent section’s look and feel, which itself is completely off. It doesn’t feel like an environment in which to think critically about design, but rather like the cover of a book titled “How to Use Windows ’98.” The font choices and pixellated background only accentuate this.

The website doesn’t fail in functionality at any great level, but compositionally it really lacks focus on details, particularly with regard to spacing. The top of the sidebar has the first bit of tension. The varied typefaces, sizes and spacing increments are messy, and this messiness carries on in the social media section below each article.

Social-media buttons are particularly difficult to work with, but that attention to detail pays off, and one would expect it from a website with such high-quality content. Just giving the Google +1 button the same amount of spacing on the left as the Twitter and Facebook buttons would have added a great deal of cohesion.

Under the hood, there’s nothing special. The source is declared as HTML5, but it doesn’t employ any new tags or bold semantic arrangements. There are a couple of divs where a span would have made more sense (for example, the date).

Pairing quality content with a quality design breeds user trust more than either does alone.

Curly Braces

Curly Braces is another simple Tumblr-like approach to design, more so even than Pelican Fly in its presentation of articles. The static logo maintains the brand’s identity even as the user scrolls, and the accompanying glowing effect on hover adds a bit of visual interest.

The navigation at the top is icon-based, but clear.

Other than the very small body copy, the website is simple enough and pleasing with its sparse composition and subtle texture. However, a look at the source reveals semantically incoherent div-itis: a lesson in what not to do when writing layout code, boys and girls.

Marlon Medau

The mixture of typefaces creates tension on Marlon Medau’s website. The serif logo and the page title script complement each other, but the choice of font for the headings feels a bit off. It clashes with the logo font, like two different shades of black clothing. While both are serif fonts, they don’t blend enough.

The overlapping circles for the date and comment count are enjoyable. They add visual interest to otherwise mundane information, while setting off the beginning of each post.

The footer is just delightful. The “Back to top” squirrel graphic and the Twitter bird add a bit of whimsy to this otherwise modern design. The tree graphic, though, leaves something to be desired. Are the circles that surround it leaves? Or stars? Hovering over one makes it fall off the page. Perhaps they are a fruit of some sort?

Also, the contact box is too small. The average user is not going to compose a message in so small a text area. A better use of the space would have been a summary of contact information with an email address.

A good bit of HTML5 has been thrown into the source, with a fair amount of unnecessary divs. Large chunks of code related to posts have been commented out, rather than being omitted from rendering. Sticklers for page-loading speed would not be happy with those precious lost milliseconds.

Idea Exhibit

There aren’t many ways to make this Idea Exhibit any simpler. The optional keyboard navigation makes for a delightful atypical horizontal experience. The composition of posts is elegant and suiting. One noticeable flaw is the small body copy, which can be forgiven because of the lovely white space and balance.

The title of the website is appropriate, in that the content and feel are very exhibit-like.

The source declares HTML5, with a few tags thrown in for added semantics. As with many websites, several divs would be better off as spans.

Middle Mojo

Middle Mojo’s layout is, if nothing else, visually pleasing in its geometry, but the presentation of content is a little suspect. For example, the bottom row starts with teaser for an interview article, then goes to navigation, and then back to another teaser.

The placement of the remaining content is unconventional, but would be a little puzzling to the average user.

Deeper pages are not as clean and orderly, and feel very crowded. The leading is set too low, the headings don’t have enough weight, and the white space is off across the board. The sidebars feel like they are smothering the content.

The creativity on this website needs to be reigned in, and the presentation of content tightened up for the user.

Meta Markets Group

Meta Markets Group’s website definitely has a corporate feel, primarily because of the small sans-serif font for the body copy.

The lead-in headline and image, along with the meta content, work well and fill out the page. But the line length is slightly uncomfortable to read, as is the font. Also, the Twitter and Facebook buttons have too much weight; though not sure what the solution is, but it seems to be a growing problem among many blogs, perhaps due to the limited flexibility of third-party buttons, no thanks to Twitter and Facebook.

The abstract shapes in the background strongly delineate where a new post begins, but they distract from the feature images slightly. This could have been easily fixed by making them grayscale instead of vibrant. Perhaps the placeholder images in the mock-up didn’t have enough color, and so the designer added the background shapes. This, of course, is merely speculation, but something to keep in mind. If you design with real content, and not filler, you won’t run into such problems.

Think Quarterly

Fairly certain this is the second iteration of Google’s Think Quarterly design. Google has really slimmed down the interface and given the articles higher stature. The navigation on the left looks similar to a printed table of contents, which reinforces the whole periodical motif.

Hovering over an article in the table of contents shows a quick preview, for added usability. And the type is wonderfully readable.

The website is a prime example of how to merge two media without compromising quality or functionality. It’s a magazine that feels like a magazine, but playing by the rules of the Web.

Fashion Sketchpad

Fashion Sketchpad features material and textures in the background, setting the mood appropriately. The geometric shapes in the header area guide the eye from the logo to the main navigation, but then guide it back to vacant space near the logo. This could have been better handled. Even the implied sight line of the illustrated figure moves the eye to that vacant space.

A better use of the shapes would have been to lead the eye from the logo to the navigation and then to the content.

The sidebar becomes an eye sore the longer one looks at it, with its cramped spacing and out-of-place script for the headings.

Despite the compositional flaws, the website feels appropriate to the subject matter.

Curiously, only the most recent blog post is visible, and there is no means to navigate to previous posts. One can only speculate that only one post has been written so far. As with all things, time will tell.

Owltastic

First thought upon viewing Meagan Fisher’s blog Owltastic was that it is typographically crowded. The website has so many fonts, in so many different sizes, and in so many different places, all screaming for attention.

The color scheme makes for an aesthetically pleasing environment, but it does little to structure the content. The shapes are simple, which keeps the website from getting too busy, but the overall composition is anything but simple.

The best way to make the website feel less busy would be to make the sidebars less imposing, perhaps by lowering their opacity values until the user interacts with them. Collapsing some content might also clean up the composition and put more focus on the main content.

You have to love the owl, despite the fact that he appears to have stumbled over a swarming hive of text.

DawgHouse Design Studio

DawgHouse Design Studio pulls off a kind of simple-vintage aesthetic. But once again, the devil is in the details. The toe nails make the logo look a bit cramped. The serif and sans-serif fonts are not blended well, despite the appropriate line length and spacing.

The typography suffers from a few spacing issues and the choice of navigation font, but overall the line height and length work well.

The HTML5 under the hood is a step towards the future, but older browsers are not supported either by a separate style sheet or some form of shiv. Nonetheless, nothing obvious stands out that would break in older browsers; the website’s functionality is very simple, which was the intention.

Rainy Pixels

Rainy Pixels has a lovely header that gives it real weight. Along with the background texture, the header is appropriate without being overwhelming. The style definitely feels like a mash-up of Decorated Playlists and Idea Exhibit, with a dash of Think Quarterly thrown in for text handling.

The navigation is simple and straightforward and looks “editorial” in style. Clever use of spacing allows each section to fit the design while maintaining its own space within the whole. Full articles are well leaded, with appropriate line lengths, keeping the content as the main focus.

The commenting and Twitter areas next to the date are too crowded and could do with a bit of spacing, but I like how simply they are executed.

Semantic HTML5, iPad and iPhone compatibility, and functionality in the absence of JavaScript help push this website forward.

Web Designer Wall

Capturing the essence of creativity, the header graphic on Web Designer Wall is both beautiful and suitable. It and the logo and the font for headings are highly effective.

However, the ads, article images and buttons make the website a bit busy at the top and create tension rather than flow. In this regard, the spacing or hierarchy could have been better handled. Ads are obviously important, but the way they’re executed tarnishes the reading experience.

As mentioned in the entry for Owltastic, one needs to be able to focus. In this case, the varied colors, shapes, images, ads and so on make it almost impossible to focus on the content.

Google Fonts, HTML5 and the HTML5 shim push this website forward. Seem to be seeing more websites these days using Google Fonts. In this article it’s almost a 60/40 split between Typekit and Google Fonts—a good indication of Web font adoption.

Matchstic Blog

The layout, logo and color scheme on Matchstic are all clean and simple. The only things that are not so clean are the glossy social-media icons, which stick out like a sore thumb. As I’ve said countless times, “Details, people!” A cohesive composition is the key to good design.

Matchstic’s articles occupy a good chunk of space, which works well for the content. However, the articles tend to run together and would benefit from better spacing.

The absence of hover effects for links on most of the website is bad for interactivity and kills a bit of the oomph in this design. Overall, the design doesn’t betray its simple aesthetic, and it pulls things off effectively.

Web Standard Sherpa

The illustrations here are obviously appropriate to Web Standard Sherpa. They add dimension and give the website a sense of place rather than just leave it as a page of information. Texture is used extensively and used well, from the background to the illustrations.

Typographically, the discussion section feels crowded and could benefit from better use of space. The slideshow appears a little jerky and slow to load at times. That could have been better handled with some image compression or JavaScript streamlining. It’s also possible that the transition speed is just too slow.

HTML5 is under the hood and works without JavaScript (except for the slideshow, of course). The footer is clean and effective and just works.

This is another example of a website staying relevant to its mission. Web Standard Sherpa might have a few details to iron out, but its style is sound.

Instrument

Instrument has a simple straightforward website. It presents only as much as it needs to and no more. The background texture and strip in the header are subtle and keep things from falling flat. The logo feels like Rainy Pixels was run through a simplification machine and spit out the other side.

A mobile-aware HTML5 underbelly, alongside Cufon-served fonts, aid in the execution of this minimal style.

The masonry grid layout relies on JavaScript to function. And other than a few fonts not rendering, the website largely functions without JavaScript (albeit with slightly jagged edges).

As with Idea Exhibit, which is similar in approach, the text could be slightly larger.

IconEden

Wonderful textures and an illustrated-realistic style make the IconEden blog solid and consistent in design, from the header to the comments section.

The illustrated style establishes an identity for this blog, while still tying into the theme of the parent website.

However, the website suffers from the same ailment as Meta Markets Group: the text area spans the full length of the page, making for an uncomfortable line length.

The design benefits greatly from some CSS3 goodness, good use of sprites, an HTML5 structure and Typekit-served fonts.

Fast Company Co.Design

An unusual left-justified layout helps Fastco Design stand out a bit from the center-aligned trend. However, the prominent ad at the top of the page dominates. Banner ads at the top of a website is bad design, period. Yes, it’s prime real estate, but putting the ads higher up in the totem pole than your content does a disservice to your readers and may drive many away.

Individual posts here have a clean display and are divided well. The accompanying large images hold interest and set off the content well. However, the left sidebar, while minimal, feels somewhat crowded and could use more padding.

Typekit-served fonts underlies the effective approach to typography.

Drupal is running the website, but not enough code was cleaned up in the theme, which has left it a little non-semantic and suffering from unnecessary divs. Despite the messy code under the hood, the design (below the top ad) is quite effective.

Overall, this website feels like it was intended as a translation from print to Web, but it hasn’t quite hit the mark as well as others (particularly Think Quarterly, Ultra Noir and Rainy Pixels).

Ivan Asetiawan

Ivan Asetiawan’s background texture and gradient add depth and interest, although the gradient lurches to black and could be a bit smoother.

The logo is lovely, although the header feels just a tad cluttered. Still, it suits the overall design.

Seeing a real trend in this showcase with readable type. The typography gets the job done, but could do with a bit of polish in spacing, size and font choice.

HTML5 and WordPress, with some help from HTML5 shiv, help make this website progressive in approach.

Do Lectures

Wonderfully simple describes Do Lectures well. Minimal in approach, the website demonstrates proper use of white space and typographic hierarchy. The subtle texture, handwritten text and hand-drawn images work together effectively to add some intrigue to this otherwise simple website.

Disabling JavaScript will not cripple this website’s functionality. And with its healthy frame of HTML5, this website is definitely looking forward.

Oohmoon

The whimsical illustrative feel of Oohmoon ties in well with the artist’s style. The content areas could do with a good deal more of breathing room, especially the sidebar, which either has too much content or just needs better spacing.

Typekit serves the lovely fonts and sets off the delightful color scheme. Structurally, the website is built on the standard theme of Todaymade, keeping the code as semantic as possible.

Vi Company

On Vi Company, basic typography and white space define the content space. This and the simple three-color scheme keep things from getting too complicated.

The posts could be spaced out more effectively. It’s hard to see where one ends and the next begins at first glance.

The content will load without JavaScript, but the “More content” button won’t work, so functionally is a bit handicapped in that respect. The designers make up some marks here for using some lovely HTML5, despite the dependency on JavaScript for core functionality.

A Negative Narrative

A Negative Narrative couples an utterly simple structure with atypical horizontal navigation for the posts. The color scheme works well, but the geometric and hand-drawn elements tend to clash and break the flow quite often.

The simple color scheme is effective, although it homogenizes the hierarchy and content sections a bit much, making it tough to differentiate between content types and areas.

HTML5, HTML5 Boilerplate, and a mobile-friendly approach keep things progressive under the hood.

Premium Pixels

Premium Pixels’s whole layout feels very Dribbble-inspired. But it maintains its own identity with simple styles and font choices throughout. Gradients and textures are absent, helping the content stick out.

Strangely, this website uses the HTML5 declaration but none of the new HTML5 elements. Perhaps this is the first move in its progressive enhancement?

Hakim

Hakim pulls off its simple grid layout with JavaScript, which hurts in the graceful-degradation department. But the compression effect on elements is a nice detail.

While simple, the grid layout also makes it a little harder to navigate chronologically, and it slightly crowds the posts together.

CSS3 goodness and an HTML5 underbelly keep the website semantic and progressive, despite the JavaScript drawback.

This by Them

The lovely texture and the fantastic illustration at the top accentuate the minimalist feel of This by Them. The main content gets the point across while remaining both concise and true to its ideas.

The wonderfully executed footer illustration complements the header and avoids unnecessary complication.

Delightful fonts set off the textures and illustration. The elements give the blog a uniqueness, while maintaining its connection to its sister websites.

The comments and social media areas are interesting, but not visually heavy (which is a problem that other websites seem to be plagued with).

Rob Edwards

The carnival/broadway feel of Rob Edwards is, if nothing, unique. The multiple font styles fit together well, including those in the navigation in the fixed sidebar area.

The content sections are well defined, but the slightly crowded content could do with a bit more leading and spacing.

The website could also do with more focus. The areas surrounding the posts draw too much attention away from the content. There is too much focus on the layout in general. This weakness in compositional structure cannot be easily fixed without a new design approach.

HTML5 is declared, but new elements are only sprinkled here and there. Several divs would have semantically functioned as section or article elements.

The execution isn’t the strongest, but it is at least unique. The website seems to derail slightly in being more about the design itself than about the content it contains. Every designer is guilty of this at some point.

Last Clicks

We’ll close on two final sources of inspiration, neither of which are blogs, but both worth thinking about in your future creative endeavors.

Team Viget

Team Viget has created a forward-thinking user experience with its design. It definitely needs to be experienced.

It’s a little slow and jerky with transitions at times, but forgivable because of the unique approach.

While the website is amazing in both style and approach, its parent website, which is linked to often, pales in comparison, which somewhat kills the mood.

Remember to keep the whole experience in mind when doing something like this, even if it means updating your other websites to make it work.

Teo Skaffa

Teo Skaffa offers another unique approach that is more of an experience than a plain presentation of content. It takes a moment to get used to, but it quickly becomes fun.

Playing sound is usually a gamble, but in this case it is very appropriate.

The lesson to draw from these last two websites is to not just create a space to post your blog articles. The content and the experience of that content should be enjoyable.

A conversation is not one-way. With this sentiment in mind it is hoped that the opinions and insight expressed in this article become a catalyst for others. Your opinion is as important to the continued growth of design as my own. We owe it to our clients to discuss our peers’ designs, to critique and praise them. Because who better to do so than those who know the craft?

(al)(rb)

Noupe

  

Since their inception, blogs have often had some of the most innovative, beautiful and creative designs in the web design community. This is perhaps because bloggers are naturally expressive individuals who enjoy visual and written expression.

Whatever the reason, blogs are always a great source of inspiration if you’re working on a new website design. But what exactly makes a blog design successful? Personally I believe that truly great blog design lies in balance. Successful blog designs must balance the various elements such as typography, color, graphics and layout in unison. No one element should damage another, and where relevant these elements should come together in order to promote the content and user experience.

Today we bring you 30 incredibly inspiring blog designs. These blogs are quite simply examples of great design. We haven’t filled this list with blogs promoting overly flashy graphics or distracting visual elements. Rather, these sites each show great visual balance, poise and unique style. I encourage you to read the descriptions for each design and go and explore some of the awesome features and subtle details discussed yourself.

The Blogs

Illustrators Lounge
Illustrators Lounge uses a great monotone color-scheme that puts an emphasis on content. The charcoal covered layout is simple and clean, yet includes subtle touches of grunge, such as the watercolor splatters in the header background. The site utilizes @font-face in order to integrate some visually appealing typography in the post titles and date areas. Despite the limited color-scheme the site uses light and shadow to direct the readers eye – dark solid areas draw the eye, whilst white space is used for padding and balance.

Jon Phillips
A perfect example of a wonderfully simple, elegant blog. This site proves that simple doesn’t mean boring. The design itself seems effortlessly simple and clean, but is full of subtle designer touches to make it stand out. Notable examples of this include the watermarked background reading ‘blog’, the faint pattern/light effect in the top left corner of the page, the @font-face integration, and the underline/drop shadow css effect on the active menu state. In short, this website makes content king through a simplistic layout, yet provides plenty of ‘visual dazzle’ through the small touches.

Darwin Foodies
This blog displays it’s posts in a really creative way. The thumbnail style post previews fit perfectly with the site’s theme, as they are easy to scan, similar to a menu. This food blog utilizes enticing pictures to draw in the reader, as well as some great hover effects (the bold rollover ‘read this review’ really catches the eye). The menu is simple and effective, with a classic active menu state clearly depicting the current page.

The Brief
The Brief is a great travel blog with a highly unique design. The site’s content is split into clear categories, which are then organized via a series of colorful tags (e.g.: ‘sleep’, ‘see’ ‘do’). These categories names are more intriguing than most blogs and really help draw in the reader, through the emotive connotations. The typography is clean and elegant, using plenty of kerning for a classic look. The multicolored layout is held together well by the most prominent blue/gray combination.

Freelance Five
FreelanceFive is bold, clean and simple. The combination of very dark gray, orange and white is classic and effective. The content is well padded and feels very well balanced, avoiding the cramped feeling a lot of blogs have. As the brightest color, orange is used to draw attention, particularly on calls to action (e.g.: ‘be interviewed)’. The site has stuck to the basics, removing any clutter and focusing on key content only. This makes it a pleasure to browse, and you never feel lost. The tagline ‘Inspiring freelancer interviews – five questions at a time’ is succinct and informative, and provides a great welcome for new readers.

Jayme Stone
A highly creative blog, the header design of this site is incredibly eye catching. The handdrawn style instantly sets a homey, artistic feel for the blog, and the sketchy typographic menu just begs to be explored. The post content is somewhat cleaner in it’s presentation, yet still includes subtle artistic touches such as the typography and faint watercolor smudges behind the post dates. The black on white design provides plenty of contrast, which is used to help distinguish content areas.

Queer Lisboa
This film festival site uses a reasonably standard layout, but is made much more interesting through it’s vibrant color-scheme and abstract diagonal lines. The header has a somewhat retro feel to it, using simplistic illustrations and patterns to add a creative touch. The content is expertly laid out, giving the site a really airy, well padded feel, whilst still dealing with quite a high volume of content. The visual hierarchy is very effective, drawing the eye down the page, from the logo, to the menu, to the post/section headings.

Simple Bits
SimpleBits has been a forerunner in the web design scene for years now, and they’ve always inspired simple, clean designs. Their latest iteration is no different, and is simplicity encapsulated. The design is largely based on great typography and visual spacing, yet this is beautifully framed by a subtle grungy background. The limited use of color is used to highlight links, whilst the menu consists of just four basic items. A wonderfully balanced website consisting of earthy hues and elegant fonts.

Mad About Makeup
Made About Makeup have used a really creative design for their blog. Everything about the design screams style and fashion. The charcoal background design is full of subtle marks and shapes, and provides a great frame for the central layout. The prominent product reviews area uses an animated jquery content slider, and is evocative of high-end fashion ads. The design uses plenty of subtle design touches such as ripped paper edges, wrap around heading areas and text drop shadows. Overall the pink, black and gray design works really well, with a large amount of content being displayed in a restrained, professional fashion.

Pelican Fly
One of those sites where it pays to delve into the subpages. Each page of this blog is like a work of art. The elegant typography and experimental HTML5/CSS3 features make it a joy to browse. The art is really in the details, and once you begin to notice the hover effects, indentations of content and text presentation you’ll really be inspired by this design. Not to be justified by a simple screenshot, click through and explore!

Table 37
Another clean and simple blog design with a lot to offer. The light gray backgrounds of this site mean that the darker typography and bright logo area really pop. The use of subtle shadows helps distinguish content areas and adds depth – particularly in the header area. Content is well padded and presented, and the stripped down approach makes the site highly usable. The content is the most prominent feature of this site, and as such you can’t help but explore the blog posts on offer.

Gourmade at Home
A really light design that fits well with the foody theme. The simple illustration in the header instantly established a theme for the site, and the green color-scheme feels cohesive and relevant. As with a lot of food blogs this one is quite image heavy (after all – we apparently eat with our eyes). The post titles, sidebar headings and date areas utilize @font-face to integrate some awesome typography, and the bold orange hover effect is really eye catching.

Rogue-Dolls
Rogue-Dolls uses a really creative header as the key to their design. The charming illustration featuring multi-colored rain, combined with the umbrella logo sets the mood for a creative, unique blogger. The post layout itself is fairly basic, yet utilizes a nice heading area wrap around effective to add depth. The blue/green color-scheme fits well with the concept of rain depicted in the header, and is surprisingly impactful upon the mood of the posts and the reader.

Little Miss Heirlooms
A lovely blog design, featuring some of the nicest watercolor background effects seen around. The muted, watercolor color palette feels very homemade and artistic, and fits well with the vintage, creative theme. The featured posts area is engaging and breaks up the header/post area well. This site is yet another great example of @font-face integration, and the post titles and sidebar headings look beautiful.

Granville Island Works
Granville Island Works uses a very retro design, featuring western style typography, and an attractive fabric style page background. The welcome area creatively overlaps a two column layout, and the hand-drawn illustration fits perfectly with the site. The color palette is limited, and constrained to earthy tones (reds, browns, creams etc…).

Art Equals Work
A very atmospheric, dreamy blog design. The light blue color scheme gives the impression of a skyline backdrop for the content, and the lack of harsh colors or strong contrast makes the site very easy on the eyes. Despite having multiple columns the central column containing the blog posts is clearly the most prominent, and the post titles help establish a clear visual hierarchy for the website. The subtle lighting and illustrations in the background are the key to what makes this layout so visually interesting, and the content seems to revolve around this foundation.

Brice Lechatellier
One of the most richly colored blog designs we’ve come across, this site is simply beautiful. The subtle transitions in background colors create a really engaging lighting effect, whilst the colorful content typography adds to this multi-colored treat. The navigation is simple and clear, and the indented active state makes browsing the site extremely easy. The logo is very faint, a mere indent in the top left corner of the page, yet it serves to represent an elegant, understated brand.

Riyuu
A soft, girlish website that captures the personality of the blogger perfectly. The fun illustrations add a lot of creativity to the page, and the various colors comprising the design are cohesive and well selected. A clear visual hierarchy is established as the eye is drawn down the page from the logo to the various blog post titles.

Spyre Studios
Spyre Studios is a really clean, well designed blog that makes excellent use of padding and a limited color palette. The limited colors of the site ensure that the content is the focus, something which is further emphasized through the use of large typography (see the blog post titles). They also have a great area in their footer which conveniently displays their latest freebies and community news.

The Netsetter
The Netsetter is now obsolete (although it’s moved to a blog column at Work Awesome), yet in it’s day was a well loved blog with an awesome design. The clean, bold, red design helps establish the site as a brand, whilst some very large typography makes the posts engaging and eye catching. The site is incredibly pleasant to browse, and it’s very easy to find the content that you’re after. The top featured post area is particularly eye catching and really helps draw you into the inner content pages of the site.

The CP Diary
A very emotional blog, as Jesse writes about her experiences living with cerebral palsy. The blog itself is beautiful, and the welcome area is not only emotionally engaging, but visually engaging. The artful typography used for the headings and subtle lighting effects throughout the site really set this blog apart and make it something truly special.

Nanyate
Nanyate is a wonderfully creative blog, with a great illustrative background design. The vector background sets the mood for the rest of the site, wherein the blog posts appear to be underwater. The colors are bold, but limited, and work well together. The menu is very simple and makes the site easy to browse. Each blog post uses a bright red call to action button (‘Read More’), which helps draw readers in.

Web is Love
A very understated, charming design. The paper textures that comprise the background add a nice artistic feel to this blog, as does the earthy color-scheme. The content has plenty of padding and is pleasant to browse through. I recommend that while you explore the site you check out their free font ‘Napa’ as it’s awesome!

Vaullt
A great monochrome blog design with a strong logo and featured area. The typography is the crowning achievement of this blog, and it’s applied with expert precision. Every letter spacing, line spacing, color and word placement seems to have been well thought out. The video area also has a great ‘overlay FX’ option, with some snazzy coding going on!

Salvator
Salvator is simply background design done right. The background is so subtle that you hardly notice it, and it doesn’t get in the way of the content. However, it adds a huge amount to the site, providing texture, depth and detail, and is much more effective than a plain background would be. The sketchy photo manipulation in the blog header adds another touch of creativity, and the splashes of red throughout the site help tie everything together nicely. The content feels balanced and well presented, and the typography is really inspiring.

NKM Blog
Another great example of subtle background design, NKM utilizes subtle watercolor background details and a faint texture. The header area includes several photos of the blogger, positioned in polaroid fashion, to add a personal touch. The color palette for the site is limited, yet it uses touches of green to draw the eye to important areas (links and calls to action).

5 Pieces
5 Pieces is a bit of a classic blog, but still has some great design features to inspire us. The high contrast white/yellow on dark blue is really striking and the header graphic blends really well with the main background. The site uses several colors, yet doesn’t feel overwhelming.

Leihu
A deceptively simple blog, this site should really be explored to see what it has to offer. There are tons of great touches to the design, such as a multi-colored menu hover effect, awesome menu active state, really nice image hover effects, and a cool ‘top of page’ slider effect. Overall the design is clean and beautifully designed. The font choices and colors all feel ‘soft’, making the site a really pleasant browsing experience.

EEPAP
A really bold and bright blog design, with a vibrant red background. The site has utilized abstract shapes to create a more unique experience for visitors. The green menu feels very interactive, as you’re encouraged to explore the creative icons. The bokeh background effect is a little busy for some, yet does create additional depth for the design.

The Big Noob
The Big Noob is a well known and respected blog, in large part due to it’s innovative design. The site uses some great typography which is laid over a rich blue gradient background. Splashes of lime green are used to accentuate calls to action, whilst white is used for a second accent color. The large welcome area includes a rotating intriguing image aimed to draw people further into the blog.

(rb)

Noupe

  

In the world of design we all tend to have our processes and approaches that rule how we craft our work. This is essential for most of us in the field to have in place. Our own systems that we have spent years honing and developing down to less of an art, and more of a routine. We do this so that we have an order by which we can methodically craft our designs without letting any little things slip through those proverbial cracks. Our processes tend to be a series of steps that help us cover all of our bases. But this can also prove to have a negative impact on our work.

Over time, our design processes begin to take on somewhat of a puzzle feel. The routines dissect the design into different pieces, and each element gets handled on an individual basis by and large. This can leave the various elements feeling disconnected from each other rather than having that uniformity and complementary flow we tend to be going for. This is not to say that the designs will be ineffective or lack any sense of unity, just that there will be some element of clunkiness to it as the elements more fit together like pieces of puzzle than flow together.

But how do we find our way to those more organic designs that come together with this sense of complete unity? Hopefully this post can help. Below is a discussion of tips that one can follow which can lead our designs towards these paths of elevated potential.

The Flow

The main element to working organically when designing is the flow. Having the design come together in this fashion allows for this feel to transfer over into the piece itself. So we need to find this flow and tap into it for the benefit of our design. We need to go with it and not force it, or we risk compromising the free and completely connected organic structure that will make the design stand out and communicate more freely with the viewer. The more this flow is nurtured, the better it will serve the design. And there are a few ways that we can help foster this flow throughout the design process.

Ideally, our work should maintain a constant flow of communication and interaction with the users much like the uninterrupted movement of a stream always rushing towards its goal. Photo by Kevin Wasilin

The communication assist offered by this flow is really one the main benefits that cause designers to focus in on this more organic approach. Given that design is such a communicative artform, any aids we can equip the design with can make the piece that much more effective. With each element within the design having a more natural connection to each other, the entire piece is more likely to communicate the message easier to the viewer. Not to mention more completely. So the importance of this connection throughout the design that links all of the various elements should not be devalued. And the best way to instill it in the work is to let the design flow organically together, do not force any aspect of it.

The Doodle Way

Now many designers swear by the power of the pen and paper for getting the design process underway, but not many of them hype the help it offers in keeping the flow in your work. By starting off on paper, it allows us the overview where we see the design as a whole right from the beginning, instead of jumping onto the computer and taking the design piece by piece. And this powerful means for tapping into the flow and elevating your designs, starts by just sketching.

It is as simple as that. You just doodle your way to the design, so to speak. Let your mind run through the brief points provided by the client as you put pen to paper and let the ink flow freely. Whether it is specifically related to the project or not, just go with it. You might just find you are on the road to discovery.

Off-Topic Tours

Finding the flow is not always as easy as just putting the pen to the page and seeing what comes from it. There are times when we need that inspirational kickstart to get us flowing. Going off-topic can assist us in these efforts. By browsing through galleries of unrelated artistic mediums we can often find our way into that flow that we need. Even if it feels like a waste of time, we have to understand where it can lead us. We could be taking virtual tours of photography portfolios and find that the composition of a particular photo or its color scheme flip that proverbial switch in our minds giving us a rush of ideas for our own design.

Even in the simplest, most unrelated of photos we can stumble onto a trigger that will get the flow going once again. Like in the above photo where a site layout comes forward from the subtle trespasses onto the lightly textured white space of the sky by the trees. Photo by Becka Spence

This approach also gives us somewhat of a creative reset, taking our minds out of the boxes we can find ourselves in when we begin a new project. Our routines tend to keep our minds in a design holding pattern when we get started, and this can be hard for us to break out of. Allowing our creativity to flow freely without being hampered in any way by our usual processes. Unplugging from these routines and venturing off-topic might be the best way to allow our minds to organically find their way to the design we were looking for in the first place.

Sweat the Small Stuff

Sometimes the flow does not find you right away, and with the deadlines looming it may be important to go ahead and get started without exactly being tapped in. Again, forcing the work tends to be a bad idea, though there are times when we do not have a choice and we have to start showing some signs of progress. In these instances, the flow is not necessarily to be written off, but simply tapped into in a different manner. Start by sweating the small stuff. Work with the minor details, the little things that tend to not take much to sort out. As you begin to provide solutions for these more minor details, other larger solutions can begin to blossom and come into focus.

So if we have to force any aspect of the design to get things started in the beginning, then keep it small. As we provide these smaller solutions within the design they may lead us to or even mirror larger ones that we can implement. In this manner, the flow finds us, just not right away. This can be a scary start to the project, especially if we believe it to be indicative of the way the entire project will unfold. However, this is not always a recipe for truly organic work as there may be elements that were not as much inspired as they were demanded. Which actually takes us to our next friend of the flow, the evolution.

Allow the Evolution

It is easy when we are feeling the pressure, to create certain elements for the design and then set them aside as they are completed. And given that we can tend to let the pressure put us in a sort of ‘out of sight, out of mind’ mental state, once we have these elements handled, we effectively forget about them. Not saying that we forget they are finished and we end up repeating ourselves, but more that we get to a place where they are no longer up for consideration. We have those solutions in place, and we refuse to revisit them for fear of wasting time that we do not feel we have. This is a huge disservice to the design and to the flow.

We allow ourselves to get into that place where we never look back, or return to the elements we consider done. But as other elements are introduced and the piece evolves we must turn back and examine how this evolution impacts what came before it. Photo by Mykl Roventine

When we are attempting to work organically, we have to let the flow evolve the design in whatever ways it sees fit as the process is carried out. Even if the solutions have already been put into place, if we are working on another aspect of the design and suddenly feel like we need to revisit those that we deemed done, then we must. Especially if they were smaller elements and they were forced in order to get things flowing in the first place. But no matter the case, if the flow that you are feeling tempts you towards this evolution of any element you need to listen to it and allow it to happen. Otherwise you are risking the effectiveness of the flow, and the organic feel of your work.

Outside In or Inside Out

If we view the design during our process as more of a connect the dots and less of a puzzle that we must piece together, then we are more likely to connect with the organic nature of the work. And like with a connect the dots picture, the image is there we just have to connect all of the various elements together to really bring the piece into focus. Meanwhile if we are looking at it as a puzzle we begin to take it in pieces, rather than viewing the entire piece as a whole. We begin trying to identify smaller images and identifiable aspects that we can use to get everything placed. With a connect the dots image we tend to start at either end and work our way towards the other. And to get a more organic design, this is how we should approach our work.

Start at one end and let the image come into view as each connection is made, so to speak. To do this simply start working from the outside of the design to the inside, or even vice versa. Let the design naturally progress through the process smoothly, without jumping around from one area to the next. This is another instance where the pen and paper approach wins out. It gives us that ability to work on the design as a drawing, which can prove invaluable here. This will also tend to create those seemless connections between each of the elements that really brings the organic nature of the design home.

A Matter of Time

As we have already kind of touched on, one of the biggest barriers to being able to allow the designs to happen organically is time. In more ways than one, this enemy of organic designs can rob you of your flow and add stress enough to stifle your creativity. Forcing our hands, and unfortunately, all too often, our designs as well. So with this proverbial wild card hanging in the air over our heads, we have to find a way to keep time on our side throughout the design process for the sake of the project and our reputations. And there are a couple of ways in which we can do this.

Schedule With Care

First and foremost, when we can help it, we need to schedule with care. Now we do not always have the benefit of being able to set the deadlines for a project based on our own variables and preferences. Generally the client has a timetable of their own that they are dealing with as well which must be taken into account. So when it comes to the project deadlines there is often only so much we can do to ensure that we allow for ample time and room for the design to organically grow the way we would like. This is not to say that the timetables are totally out of our hands, as we can easily pass on a job if we feel the deadline is too constrictive; and some clients will grant us more time if we say it is needed.

If we get a bit over-eager with our scheduling, then we may find that we are juggling too many projects at once for the organic route to be taken on any one of them. Photo by liryon

One thing that we should never do is simply ignore the timetables the client introduces and decide that we are just going to get it done when it happens. Plan ahead and seriously consider how much time you feel the project will take to complete organically before you commit. One way to help gauge the necessary time you will need for a more organic design is to consider the amount of inspiration that you get when the project is presented. If you immediately feel a connection to the project and the ideas are sparking from the jump, then it might be a safe bet that the project will run smoothly and quickly. If you have no ideas or very little inspiration strike from the outset, then chances are you will need more time to connect and make the design happen in an organic fashion. So plan for it.

Another scheduling concern that can work against us in this organic arena is more the result of overextending or committing ourselves. Do not misunderstand, it is certainly a good idea and sound practice to have more than one iron in the fire, so to speak. This way we can bounce back and forth between designs when we are not necessarily feeling inspired towards a particular one. However, we need to be careful not to take on too much so that our schedule becomes overloaded and time is no longer on our side or working for us. Suddenly it is working against us and that is not good for the projects or anyone involved.

Keep Your Eyes Off the Clock

Another way that time can impact our ability to organically grow our designs is by effectively psyching us out. When punching a clock it is easy to get sidetracked by the clock on the wall if we are not completely inspired, or worse, phoning it in. But if we are wanting to create a more naturally flowing and communicative design, then we are going to have to keep our eyes far from the face of the clock. This is something a given. For if we are keeping one eye on the clock while we are designing, then it holds true that we cannot be fully focused on the task before us. This consistent time-check sidetrack completely breaks our concentration, even if it is for just a moment, and that is unacceptable for this organic approach. It is simply not conducive to the flow.

Time is never your friend in the organic design process when you are constantly keeping one eye on the clock, and dividing your focus from the project. Photo by Dave Stokes

If we need to be aware of the time while we are designing so that we do not miss a meeting or anything of that nature, we can easily set an alarm for ourselves and then go ahead and dive right on in to the project. We do not need to be so focused on the clock then as the alarm will alert us as to the event that begs our attention. Our minds can be completely given over to the project at hand, and the clock can essentially keep an eye out for us.

How to Keep it Organic After Feedback

Now it is one thing to be able to craft the design in a completely organic fashion, but if you are working for a client then keeping it that way is something else entirely. This is a sad fact of the design field, that clients tell us what to keep and what to cut (or even worse for the sake of the organic flow and nature of the design, what to add). And it is certainly within their right to do so. But in the interest of keeping that organic harmony within the design, the client’s wishes are not always going to work for us. So that raises a couple of questions. How do we ensure it stays organic after their demanded cuts? Or how can we implement what they said organically?

Duck and Cover

One way that designers have found to somewhat guarantee that the necessary elements and thereby communication of the piece remains intact after the cuts have been handed down, is to strategically employ ducks throughout. This simply means to add obvious purposeful elements or additions to the design that are intended to draw the client’s eyes for cuts, so that the organics pretty much stay in play.

This is not always looked on favorably, but if we are concerned that the client may cut some vital solution from the design thus compromising its effectiveness, and we feel they will not be swayed by our arguments then this may be the route to opt for. This way we can at least offer some coverage to those aspects of the design we feel it would not be the same without.

Look for Links

The often more difficult hurdle that the feedback stage can place in our paths, especially with regards to maintaining our organically designed structure, comes with the call for additions to be made. Given that so much effort was put in to having the piece come together as organically as possible, any additions that are asked for could potentially compromise the integrity of the organic flow of the piece.

So when implementing feedback, you may want to try and find links to other elements or aspects that are already present in the design that these additions can be tied to so you keep that organic feel. This way the additions are woven into the organic fabric, and they do not feel like they are out of place or merely afterthoughts. Or at least, that is the hope.

Fill the Gaps

Another problem that can be created by this stage in the process, are the gaping holes that could potentially be left behind in the wake of it. If any cuts are demanded that leave the design feeling somewhat disconnected in areas and not as organic as it was, this needs to be addressed. These gaps can effectively compromise the design’s ability to communicate as it was intended, and as such, they must be tackled. This can be difficult to do, but if the gaps cannot be patched together and still convey what the design must, then we owe it to the project to attempt to repair the breaches.

If we want to maintain that organic composition and flow of communication in the design then we have to find ways to bridge any of these gaps rather than leaving them as somewhat of an impasse in the design. Photo by Wouter

When it comes to these gaps left by the client’s cuts, we need to try and fill them as unobtrusively as possible so as to not draw attention to the ‘fillers’. Lest they end up on the chopping block as well once the client has a look at the revisions. So the more we can bring these gap repairs in under the radar the better. If we feel like masking them, we can opt to add a duck or two in the revision as well to more safeguard those additions we included for the sake of the design and its overall effectiveness.

In the End

Hopefully this post proved helpful in finding ways to grow more organic designs by approaching and viewing them as a whole right from the start. And for allowing the designs to happen with that flow of inspired effort, rather than forcing it via that stressed and breathless rush towards a deadline. In the end, there are other things that we can do to ensure more organic growth for our designs, it’s just that we tend to have to find ways that work for us on a more individual basis to get there. What ways have you found work for you to allow your designs to grow in a more organic manner? Let us know in the comments section below.

(rb)

Noupe

  

Let’s face it: sales make the world go round. But as a Web designer, you’re concerned more with fonts, color, hierarchy and images than with the sales process. Some believe that designs sell themselves; while this may be true for a few designers, it is certainly not the case for most.

Whether you’re selling a prospective client on a website redesign or a potential client on a new home page, you have to demonstrate your design skills and show how your design will help them meet their goals. When it comes down to it, Web design is more about function than art.

Without any kind of sales background, having to sell our designs to a client can suddenly make us feel lost and far from our comfort zone. Image Credit

Whether you are a sole proprietor or a lead designer at a large firm, you are always selling your work. You may be selling a concept to a client or your boss, but when it comes down to it, you’re selling it to someone. And what are you selling? You’re selling ingenuity, a concept, usability, design harmony: you’re selling the creative. And because design is somewhat subjective, this sale is harder than most others.

If you learn how to sell yourself (without a sleazy sales pitch) you will be able to sell your designs more easily. This means fewer revisions, happier clients, more referrals, and a higher quality of work.

What To Do If You Don’t Know How To Sell

As a Web designer, you focus on what you do best: designing. But many designers get so caught up in the creative process that they fail to consider a business perspective. That is, they cannot articulate how their service will truly benefit the client. Without this ability, you will have a much more challenging time selling your services and designs to prospective clients.

So, what to do? Incorporate sales tactics without becoming a sales person. Follow these tips, starting with the initial meeting with the potential client.

Know Their Business

As you meet with the client, ask about their needs and expectations, and try to understand exactly what they want. You will refer back to this information in all of your meetings with the client, and it will reinforce your design when you review it with them.

Break down clients into different categories: start-up, established, service- or product-based, business-to-business sales, business-to-consumer, etc. This will help you select specific questions for each client.

Research what their existing website does right and wrong (if they have one). What does it have going for it? Where is it lacking? People appreciate honesty, but don’t offend.

A few areas to investigate:

• How many sales and visitors?
  If it’s an e-commerce website, how much sales are generated each month. How many unique visitors come to the website?
• What is the conversion rate?
  How many visitors convert into customers? What is the value of the average order?
• How many repeat customers?
  How many new customers return to make purchases? How often?

When asking these questions, think more in business terms than in design terms. The client isn’t really hiring you to design a website: they’re hiring you to increase their sales or generate more leads. If you can connect with them on this level, you will find that selling your design will be much easier.

Sell the Sizzle

The client is now intrigued and wants to learn more about your work. So, compare your portfolio of designs to their existing website (showcasing your newest work), and explain how your concepts can help them meet or exceed their goals. You could try flipping back and forth between website designs to emphasize the difference in quality.

Explain the key design elements, such as conversion-centric items and usability enhancements, and outline the major money- or lead-generating components. Explain how these elements will increase the client’s bottom line. If you can connect your design strategy to the real needs of the client, the design will have sold itself before you have even quoted a price!

Sell the Benefits

Cite the latest studies, statistics, industry trends, etc. Some people respond best to hard evidence; facts and figures.

Include the latest research to back up your design strategy. Use industry magazines, reports, benchmarks and case studies.

Paint a Picture

Help them visualize the new design with fresh ideas and examples. Use their own products, categories, services and content to help them visualize what you will do.

Discussing Price

Few of your clients will care about costs. They simply want a return on their investment. That’s right: people are willing to spend money if they know they will get it back many times over.

Your job is to demonstrate clearly that your product or service represents the safest and most secure purchase decision rather than merely being the least expensive or highest quality.

Our customers today are the most experienced in customer history. They know that there is usually a close correlation between higher price on the one hand and greater security and after-sales satisfaction on the other. Your task is to make this differential clear in your sales presentation, especially when positioning you product or service against lower-priced competition.

– Factors of Risk in Selling, Brian Tracy

Using the information gathered in the research stage, crunch the numbers and estimate how your design will increase conversions, leads, etc. Break it down into dollars and cents, so that the client can grasp the cost and benefit and you can make a convincing case for the investment.

Formulating A Proposal Or Contract

A true staple of the design process: the contract. This defines the scope of your services. Here’s what to include:

• The process
  Clearly explain or document the design process, from prototype to production. Include everything from market research to wireframing and user testing. Break down your methodology so that the client understands it.
• Services to be provided
  List all items to be included in the design, from the preliminary research to the favicon. Be sure to put a limit on relevant items (e.g. stock photography).
• Client expectations
  Clearly articulate what you expect from the client: for example, content, images, photography, turnaround time on deliverables and other assets. Include deadlines and the consequences of missing them.
• The design strategy
  Explain how many revisions are allowed and what’s included in one. Also, define how revisions above and beyond the specified limit are handled.
• Buffer time
  To play it safe, account for hours above and beyond what you think the design will take. Due diligence and research don’t always catch special cases. When you encounter one, having buffer time to make changes and additions helps a lot. Very rarely do I work on a project that doesn’t require this buffer.
• Hourly rate
  Tie in all these items with your hourly rate. Define your hourly rate for extra revisions, additional stock photography, etc. Now, when the project burns through your quoted hours and buffer time, you can fall back on the hourly rate.

What To Avoid

Knowing what to avoid is key to pitching prospective clients. Even with a strong pitch, not following the guidelines below could derail your effort.

Don’t Accept Every Client

Yes, this sounds like blasphemy, but it is very important when growing your business. Specialization truly is the key to success in design. Know who your ideal client is: e-commerce, social network, brochure website, start-up, small business, medium-sized business, large enterprise, non-profit;the list goes on. Know your strengths: lead generation, splash page, brochure website, etc.

Identify who you work with best? For whom do you achieve the best results? Focus on that market. Pass along to another firm any leads that do not meet your criteria (and maybe get a kickback for it). You will grow your business much more effectively this way.

Few firms do well by catering to all. This might work when you are starting out, but as you grow and land bigger clients, you will need to spend your time on projects that propel your design skills and company in the right direction.

Carve out a niche for yourself, and become the best in that niche. That sharp focus will attract more quality business than you would if you are all over the board.

Don’t be afraid to turn down clients or pass them onto a friend. If they don’t match your criteria, you most likely won’t be able to serve them best. Both you and the client will have lost.

Don’t Provide a Design Sample or Mock-Up

Prospective clients will often ask you to submit a sample design or mock-up for their website. They want to compare your work to that of other companies from which they are getting proposals, and they want a tangible product to make a decision. Don’t do it!

The reason is simple: you do not know the client’s needs yet. You haven’t delved into their business reality or market demographics, so you would be shooting from the hip.

Don’t devalue your service by sending a sample before getting a clear and comprehensive picture of your client’s needs and business structure. Gaining this understanding could take weeks, but it is critical when designing UIs.

Don’t Focus on Your Designs’ Prettiness or Awards

Pretty designs are fun, and awards boost the ego like nothing else, but they don’t usually give prospective clients what they need: results. Instead, focus on what your design will achieve for the client: increased sales, leads, sign-ups, page views and so on.

Don’t get me wrong: a good clean design will definitely help you in the sales process, as will design accolades and awards. But don’t think they will close the deal. Use them to reinforce your pitch or to show secondary benefits to the actual results you will achieve.

Be Cautious of Start-Ups

Ahh, the ever-popular start-up. I think every designer has invested some of their hard-earned money into developing a website for one new idea or another. But start-ups that make it are few and far between. The more start-ups you deal with, the more you will lose when their business plan (or lack thereof) doesn’t work as expected in six months to a year.

Many start-ups take a while to flush out their business plan, because they lack direction and focus. Expect much more hand-holding with these clients than with established businesses.

If you specialize in start-ups, then develop a methodology catered to their needs.

Never Ever Over-Promise and Under-Deliver

This should go without saying, but some designers are so anxious to close a deal that they sell themselves short and set the client’s expectations too high. If this happens, you will be hard-pressed to deliver a solution on time, within the specs and on budget.

Sticking to your niche helps you to set realistic expectations and to over-deliver them. Simply stated: sell what you know, and do what you know. You will get fewer surprises, and I guarantee you will end up with much better designs.

When in doubt, ask an associate or friend for a quote or to review your proposal. Make sure your time estimates are accurate and that you are charging accordingly.

Other Sales Strategies

Listening and note-taking skills (the things we were taught in school) are indispensable; unless you have a photographic memory. Take notes in every meeting with a client, and log them somewhere. Listen to your client, and try to understand their needs. Ask for clarification when you get lost.

Always send a list of references, even if the client doesn’t ask for it. It’s a nice touch and builds credibility. I also like to mention that once the project is completed, we would like to add their name and testimonial to our reference list.

Incorporate a few of these tips into your meetings. You (and the client) will benefit from them instantly.

Further Resources

• Brian Tracy International
  Outlines skills that you need to increase prospects, get more appointments, close more sales and put more money in your pocket.
• Zig Ziglar
  An expert in sales motivation, goal-setting and personal success.
• Let’s Get Real or Let’s Not Play: Transforming the Buyer/Seller Relationship
  An excellent sales strategy book, geared to technicians rather than “salespeople.”

(al)(rb)

Noupe Design Blog

  

Great graphics. Beautiful typography. Clean design. These are all things designers typically think of when creating stunning websites. But is it really just that combination of elements that produces something that can take your breath away? Of course it’s much more than that; but what?

Far too often, web designers like to blame the breath taking factor of websites on the genius of another designer. Not to take away from any designer, but creating a stunning website is absolutely do-able for any designer with a good set of skills (or the ability to outsource). So, how can you do it?

Detailed Development

Coding and development is an extremely important portion of the website building process. Sometimes web designers get so caught up designing as best as possible, we can sometimes forget that great development will take your design to a different level. Clean coding that pays attention to the smallest details of the design and even the web browser will create an excellent experience.

Constructing a website can be tedious, but it’s worth it to create fresh websites. Image Credit

HTML5 and CSS3 are fairly new technologies that have come about to really help developers do their work as best and as easily as possible. While there are some kinks in it, we would strongly suggest that coders really get into learning it and making it work for them. The purpose of updating the HTML and CSS libraries was and is to make things a bit more intuitive and more consistent among different coding languages (i.e., javascript, php, etc.).

HTML5 + CSS3

There are tons of articles about the pair of these and how they are really changing the way of development. Take a peak at some of these articles to help you out.

• Why We Should Start Using CSS3 and HTML5 Today
• HTML5 and The Future of the Web
• HTML5 Tutorials and Techniques That Will Keep You Busy
• HTML5: The Facts And The Myths
• CSS3 and HTML5 Toolbox Starter

Movement is absolutely required on stunning websites. Pages don’t have to jump and bounce around but noticing fine details to make the website look like it’s living and breathing really helps. Javascript and it’s various libraries really help make web sites live, especially when we are talking about the interaction of elements in browser windows as well as loading images.

For example, on the Sellected site, you are able to filter the content you wish to see in a way that doesn’t require you to refresh and reload the page. Everything aesthetically transforms in front of you. The roll-overs on this page are also magnificent because they are smooth, make sense and again, are aesthetically pleasing.

If you are interested in more Javascript and jQuery types of transitions and tricks, check out 150+ Best jQuery Effects for Designers and Developers. Mastering CSS3 and HTML5 can also really get things moving on a page–positioning, fluidity, and other techniques contribute to this.

Cleverly Coded Sites

In terms of development and coding there are details as well as tricks that can be used that really take a website from 0 to 60 in seconds. We could never list them all here, but we will give you a short list of websites that really paid a lot of attention to the details in the development or either made their coding a central piece of the web site.

The screen shot of this website does it no justice. It isn’t heavily designed and it could be argued that it’s not even necessary. The negative space shows you exactly what you are supposed to look at. The way in which this whole thing is animates and transforms is amazing and something several of us have never seen before. Very neat

Once again, not a very heavily designed website–the focus here is on the clothing. Viewing this site on a huge monitor is definitely fulfilling especially when you play around with the window. The page transitions are exceptional as well.

It looks like a pretty static website, but the attention to the details, especially when you view the ‘Work’ page really shows they were particular about their content. This is a design agency and obviously they wanted to strip away as much crap as possible and get you to look at what they can do. Super clean and powerful

This is another fun site where the attention to detail will keep you on the site forever. Go to this website and play around with the window size as well as with the filter on the site. This is like a living, breathing, intuitive person!

The development as well as layout of this site really work together in helping this site look like it’s not as content rich as it actually is. Simple. Not overwhelming.

More great coding and a pretty solid design. If you fool around with the window size, you’ll notice the great detail taken in the development of this website.

Unorthodox Design & Layout

Have you ever gone to a website, looked at it, and just got a tingly feeling? Or has a website ever been so overwhelmingly good to you that you just stare at it or look at every single element and say “That’s crazy”? An extremely fresh design really can make your website standout from the crowd, but how do you know when you’ve got the right design?

Web design is subjective, much like Fine Art, but there’s no denying when something’s good Image Credit

There are a lot of things that go into designing websites. The most important thing you must do as a designer is figure out your target audience and figure out what the purpose of the website is (I,e., is it to sell or is it to inform?). Once you’ve got those two things, you’ve got to figure out how to combine the two in a way that the audience enjoys and that is effective towards the purpose of the site. Then you really have to build around that as far as the design and layout is concerned.

Let’s be honest, a large header and a right sidebar are right for some websites, but not all websites. The way a website’s design becomes stunning or breath taking is when the designer really steps outside the box. The trick though, is to not get SO outside the box that the website fails to make sense or lose sight of it’s purpose.

There’s no strict code to figuring out how to create super fresh designs. Many like to stay fresh, of course by looking at design inspiration (use it as an influence, not a rubric) and practicing their program of choice. Personally, practicing without any type of outside product (no brushes, custom shapes, etc.) really helps you think of different solutions to different problems without looking like something that’s already out.

Now understand, this will not work for everyone but the idea here is just to be as creative as possible and not to be afraid of being creative. We sometimes fear creativity because we’re not sure how an audience will accept something different, but challenge yourself to be bold and forward thinking when it comes to design.

After all, at some point, all the current trends have to be pushed aside for new ones, don’t you want to be ‘cutting edge’?

Stunning Sites

Design and Art are relative and really depend on personal taste. Now, do understand these exemplified websites are personal preference, but we plan on really pointing out why these designs aren’t just pretty, but why they work. Visit the sites and really look around to see how the design and layouts really interact with everything. Also, notice how many of these sites stepped outside the box and created something super fresh.

This website’s design is a little lacking, but the layout WORKS for them, as they are a bit more content rich than other websites. They have an obvious working hierarchy for their site, which is complimented by a pretty standard, but effective layout

Movement and good clean, effect design all in one place. Again, this isn’t a life changing design but it works for their service and you know exactly what’s going on. Interesting Navbar, too.

An extremely unorthodox layout as well as an unorthodox design. The message is simple–have fun and eat Skittles, along with some social media implementation. Very fun design here. Very playful and fresh!

This is one of the freshest sites to hit the screen in a while with a good combination of design and detailed coding. Very unorthodox but it works–while you might have no idea what it says, not sure that really matters too much. This site is GREAT

This an extremely different type of thing here…the navigation is actually on a live web camera. That’s really different. The inside pages aren’t too shabby either.

This is a pretty standard layout, but the design elements used are really magnificent. There are alot of unexpected things about this site and it’s design. More proof you can really expand on a standard layout.

Stay Inspired

Always be on the lookout for fresh new ideas and see what people are doing. Again, don’t use these sites as rubrics, but be creative and use them as influences to help you think outside the box and see different techniques in action. Here’s a list of some of the best web design showcases the Internet has to offer:

• Make Better Websites – Dedicated to absolutely the freshest web sites I’ve ever seen. More portfolio sites.
• WebCreme – Pretty good stuff here, too. Lot’s of different types of websites.
• DesignShack Gallery – A one stop shop gallery of all things good.
• The Best Designs – Another good one for fresh ideas

(rb)

Noupe Design Blog

  

“How did you do that?” My colleague Leigh sounded impressed. He had been working with a problem client for weeks trying to get design approval. Then I came along and was able to get signed-off in a single conference call. “Can you teach me how you did that?” he asked. I mumbled something about years of experience, but the truth was I didn’t have a clue. It just seems I can find design approval easier than most.

As I thought about it I realised there are actually quite a lot of things that have become second nature for me over the years. But I have learnt the hard way through many painful projects. Unfortunately because I started designing websites back in 1994 there was nobody around to teach me this stuff. I wish somebody could have just shown me how to avoid all of those endless revisions. Hopefully some of the advice I share with you here can help you avoid years of pain and suffering.

My first piece of advice focuses on the old adage — prevention is better than cure.

Prevention Is Better Than Cure

In our enthusiasm to start a project we often don’t take the time to prepare the client. For many clients this will be their first web project. So they may not really understand what that involves or what their role is.

At our company, we pre-empt common issues and prepare the client by giving them a PDF factsheet about working with designers.

So before you leap into your next project, let me recommend you complete the following steps:

• Educate the client about their role
  Take the time to explain to the client what you expect from them. I always make the point of telling our clients to focus on problems, not solutions. I encourage them to avoid making design suggestions, but rather to point out why they feel a design is wrong. The job then falls onto us to come up with the right solution for their problem.
• Take the client through a process
  Because many clients are not familiar with the Web design process, take the time to explain it. This has two benefits. When people are in unfamiliar territory they attempt to take control. This leads to micromanagement. By explaining your process you reassure them, giving them confidence. Second, explaining your process demonstrates you are the expert and puts you in the driver’s seat.
• Pre-empt common issues
  We all know there are certain issues that always come up. Things like “make my logo bigger“, “can we use comic sans?” or “put everything above the fold” have become standing jokes in the Web design community. Why then would we not pre-empt these issues? By talking about them upfront it makes it much harder for the client to mention them later. After all, none of us likes to be the person who is predictable, making the ‘dumb’ request.

WeeNudge is a superb site for pre-empting common issues and educating your clients about the Web.

Even once your project is up and running prevention can still be better than curing. For example, when you complete a design and show it to the client you can do a lot to prevent problems from coming up.

First, you should always present the design. This is your chance to justify your approach. Refer back to previously agreed upon work. If you have used moodboards, point out how the design draws on them. The same is true for wireframes, personas or any other elements the client has signed off on. It’s hard for the client to reject a design built on elements they have already agreed upon. You must never hand over a design without explanation.

Never simply send a design to a client asking them what they think. Take the time to present the design and ask for specific feedback.

Secondly, be aware the client may show the design around. This is problematic. Although you may have been careful to explain the decision making process to the client, others will not have this background information. This inevitably means the third parties will fallback on personal opinion and potentially sway the client in the wrong direction.

The solution to this problem is not to present your design as either a static image or as a final webpage. Instead, record a short video talking the client through the design. This video can then be passed on to whoever the client wishes to show. That way whoever views it will get all the information they require to provide educated feedback.

Finally, control the kind of feedback you receive. Never ask a client what they think of the design. Ask them instead how they believe their users will react to the design or whether it meets their business objectives. You can even go as far as asking them whether the design reflects the signed-off moodboards or wireframes. If you can get them saying yes to these questions they will realize that even if they personally dislike the design it is still the right solution.

Of course, when I was able to get the design signed-off on Leigh’s project, I hadn’t had a chance to lay down any of this groundwork. So what other factors came into play that made me successful where he had failed? One was my attitude going into the discussion.

Get Your Attitude Right

Leigh had been trying to get design sign-off for weeks. Both he and the client were frustrated. Battle lines had been drawn despite the fact both sides wanted the project completed.

This is a common problem. We start to see our clients as the enemy. In fact, there are many cases where bad past experience puts us on the defense from the outset. At every turn we start to build into our controls the limitations for the number of iterations and endeavors of the client’s influence. We even moan to one another how life would be better without clients.

Because of bad past experiences with clients we can often get off on the wrong foot with new clients.

It’s not surprising that design sign-off becomes a battle. We are looking for a fight even before we begin. It’s vitally important that we change this mindset and see every new client relationship as an exciting opportunity and not as a potential point of conflict.

When dealing with Leigh’s client, I had the advantage of not being on the defensive. My ego had not been bruised by rejection. You need to leave your ego at the door. Often it is worth picking your battles and letting the client win from time to time. This helps them feel their contribution is worthwhile and valued. It is when the client feels ignored or isolated from the process that conflict arises.

By getting your own attitude right, this goes a long way to establishing a good relationship with the client. This is key to successful design sign-off.

Get The Relationship Right

We would love to deny that the client is an intrinsic part of the Web design process. However, you can be the best Web designer in the world, but if the client isn’t on your side, you are wasting your time and ultimately the project will cost you money.

In theory we should all be experts in establishing good relationships with our clients. After all, we pride ourselves on empathizing with users and understanding their motivation and needs. We should then be able to apply these same skills to our clients. If we then understand their needs and motivations, it is much easier to establish a good relationship.

Working closely with them helps. The temptation is to hold the client at arm’s length and minimize their involvement in the project. However, if you want to get the client on board, you are better off working with them collaboratively. This means they will feel a sense of ownership over the design, and are more likely to sign off on it.

We find wireframing with the client is an excellent way of involving them in the process and building a better working relationship.

The other advantage of collaboration is that it makes the client feel important. It provides them with a sense of purpose in the relationship rather than just being a spare part to rubber stamp your decisions. I tell clients that it is their site and their decision, I am simply there to give advice on the best practice. This allows them the sense of control that is so important.

“But what if they make silly decisions?” you may ask. Often they will listen to you simply because you aren’t arguing with them. However when they still pursue an unwise course of action, I do not allow things to descend into a fight. Instead I make my position clear and leave the decision over to them. I have also been known to use phrases like “that is a brave decision” or “that’s an unusual approach” which is a less confrontational way of telling them they are being dumb.

Giving the client a sense of control doesn’t mean you are a doormat. In fact, I don’t believe clients want that. They want you to control the process.

Take Control

Although clients want to feel involved and have a sense of control, they don’t want to run the show. Most clients only interfere in the process when they feel you are out of your depth. It is important that we always appear to be the authority in the project.

I think this is the primary reason I managed to get sign-off on Leigh’s project. On our conference call I took control. I was careful not to be arrogant or push the client out, but it was clear I was in charge of the process. I achieved this using the following techniques:

• I was confident
  Sounding confident can often be half the battle. Listen to the client and make a recommendation. Know what you think and communicate it confidently. If you sound like an expert people will treat you as one. However, be careful not to come across as arrogant. Just know your mind.
• I was willing to challenge
  When a client asks for something you disagree with, say so. That said, don’t immediately jump in with why it is wrong. Instead ask the client why they want to take a particular approach. Often the client hasn’t really thought things through and a few well placed questions will help them to conclude it isn’t sensible. Also by asking questions you demonstrate you have thought things through in a lot more depth than they have.
• I referred to third party material
  A great way of demonstrating your expertise and control of the situation is by referring to third party material. Stats, quotes from other experts and references to case studies go a long way. Show that you know your stuff and that you have solved these problems before.
• I kept us moving forward
  Design sign-off can be full of endless discussion and navel gazing. The more a client thinks about a design the more likely they are to second guess your decisions. Keep the momentum going by focusing on the deadline and the fact that design can always be tweaked once it goes live.

Clients will often take notice of research carried out by people like Jakob Nielsen over your own opinion.

By setting your ego aside, establishing a good relationship and taking control of the process you can usually get the client to sign-off on a design. However, like all things in life, no approach is full proof. In such cases I have a couple of fallback positions which have been known to work.

What To Do If A Client Digs In Their Heels?

Some clients can be very dogmatic and no amount of careful management can lead them down the right road. In such situations I use three techniques in the following order:

• Suggest testing
  If the client wants one thing and you recommend another, suggest testing both approaches with real users. It’s hard to say no when services like verifyapp.com are so cheap. Often clients will give in at this point because they don’t wish to be proved wrong.
• Ask to have your name removed from the project
  Often client’s don’t believe that a change they are suggesting is really that bad a thing. They just think we are being overly precious. One way to show how serious you are about your concerns is to say that if the clients’ changes are implemented you would like your involvement with the project to be kept secret. As designers are normally so keen to promote their work, this makes a client realize how unhappy you are.
• Give the client what he or she wants
  It is important to remember at the end of the day that it is the client’s website, not yours. I know that some people advocate walking away from a project before compromising their ‘standards’. However, personally I think that is unprofessional in all but the most extreme cases. If a client is really insistent and unwilling to listen to reason I will deliver the site to the exact specifications they requested.

Tools like verifyapp makes it very easy to quickly test design. This can be a great way of diffusing disagreements.

I imagine this post will generate mixed reactions. Some of what I have said here seems to be manipulative. I believe it is simply nudging the client in the right direction to give them what they ultimately want — a great website.

Other things won’t sit well with some designers. Suggesting you give the client what they want or letting them win even some battles might smack too much of compromise. Nevertheless, in my opinion this is what a collaborative relationship is about.

However, I am interested to hear your approaches. Where do you draw the line between what you believe is right and what the client wants? What techniques do you use for nudging the client in the right direction? Do you set limits on revisions or the client’s involvement in the process? Let me know in the comments.

(jvb) (il)

© Paul Boag for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Design, sign-off

Smashing Magazine Feed

  

A logo is the visual representation of the company that reflects the company’s business or products, all the while building up the credibility of the company. An effective logo design is one that aesthetically satisfies the target audience and possesses the potential to penetrate customers’ minds as a selling agent. It should also be simple and memorable. This is where type-based logo designs score highly, on account of their simplicity and quality.

Today’s post has collected outstanding examples of some of the most innovative text based logo designs and presented them here for your inspiration. Have a look at them and discover how you can artistically create text based logos. Do not forget to share your comments with us.

Creative Type-Based Logos

Fuel Fitness
Here they have cleverly taken the word Fuel and made it look like a shoelace to complete and drive home the idea of fitness.

Wave
At first glance it looks like a wave, but closer inspection reveals that these are actually the letters ‘w”, “a”, “v” and “e”. Isn’t it simply great?

3way
The unique typeface makes this simple logo design stick in the minds of customers and makes sure it lingers for a little bit.

Five Seven
Another creatively designed logo where numeric characters are used to send subliminal messages.

Talkmore
Simple and clean use of typography to communicate professionally with the potential clients.

Disco
This logo would easily be the most outstanding text based logo design in this entire collection. See how the old LP’s are used to write the word Disco. Creative and effective!

White Crimson
Corresponding colors are used along with a funky typography. Both the words are crafted to create the shape of a guitar.

Loop Coaching
The letters L, O, O and P are bold and colorfully used create the initial focal point and graphical elements of the logo, while the much simpler and less graphic text below it offers a nice balance.

APL Magazine
A unique and visually alluring style of writing APL as the corporate emblem.

KSS
Simple and effective text based logo design with a lite folded paper-esque graphical accompaniment.

Zoumio
The simplicity of this logo design is what is what makes it so appealing and attractive.

903 Creative
See how creatively 903 Creative has placed the numbers in their logo design. Isn’t it enough to get an idea of their creative approach?

Imagine
Can you write the word imagine without using any alphabet? Can’t make it out? See this numerically crafted logo design.

Click. Recording Studio Logo Design – Logos
A text based logo design where the letter “K” is creatively used to portray the niche the company is into.

Fall Seven
Simple yet effective text based logo where number 7 is placed in such a way that it represents a drop or fall.

Twins
Bold typeface is used along with the subtle use of a numeric character to subliminally represent the company.

Silk Skin
A slight curve is placed right in the centre of letter “S” to give it a silky feeling so that potential customers can easily relate to the logo’s message.

Vito’s Kitchen
Effective typography with right choice of color makes this simple text based logo design stand out.

Bison, Vancouver
A very popular logo design because of its creative use of negative space. See how the letters themselves create a visual representation of bison.

Antiparticle
Minimal use of color and typography to create something extraordinary is not an easy task, but here the logo designer has successfully accomplished this feat.

Corrupt Souls
This logo uses bold line work to create a sense of motion within the piece making the words ‘Corrupt Souls’ somewhat blend into the design.

ODD logotype
Yet another inspiring example of simple and neat logo design that is free from all sorts of clichés and ambiguities.

For Girls Sake
The large typograhical G created using floral and swirl patterns and then some, makes this unique logo stand out nicely.

Trust
See how the word itself portrays the true essence of trust and belief. This one is amazingly creative and a nice piece of eye candy for the collection.

LOOP
This logo was designed for a consulting company. A very neat and simple text based logo where the letters are arranged in the form of a loop.

flowww
Again the last letters are used to give this logo design a feel of movement.

One 2 Love
Hidden use of numeric characters in this logo design makes it visually alluring and out of the ordinary.

More
The letter “O” is extensively stretched to depict the feel of more. The use of color gives a very soothing impact.

Spry
Here the text based logo is created in white color against the cool light blue background. The simplicity of this logo design is making it shine.

Top Hope Pringting
This text based logo is designed by joining the initials of Top Hope Pringting in a very creative and visually engaging manner.

Xterra
A strong visual impact is created by means of using strong colors and bold typography.

Negative Reality
Negative Reality’s logo is designed by using a negative spacing technique that really stands out with its unique composition.

Fire Fly Music
Here it almost looks as if the designer was trying to capture that fluid nature of music while imitating the path of something flying through the air leaving the letters in its wake.

83 Studios
With the colorful combination of the numeric characters to create a visual identifier and focal point in this logo design, the impact of the piece is firmly in place.

Flipside
Here the F’s are cleverly deployed and boxed together to create this logo design for a company named Flipside.

Sushi
In this logo design, the dot of “I” is used as the middle dash of the “H” an iconic focal point the logo.

Oceanic
Creative use of typography makes this simple text based logo design a perfect and effective corporate identity.

Catch Motion Logo
The placement of letters in this logo design gives the impression that the letter “m” is being caught by the letter “C”. Creative use of typography.

Novo
Another creative use of typography that sets this logo design apart from the others in this collection.

Precision Networking
This company offers a sense of precision imparted through their logo design, allowing potential customers to get an idea of what to expect from them.

Cloud9
In this logo design, clouds are created by carefully crafting the number 9 so that there will be no need for any further graphics.

A2B Concepts
This logo design was created for A2B Concepts which is a business development or marketing company that helps other businesses getting from Point A to Point B. They have made their philosophy of work very clear in their logo.

Number Eleven
Here the logo designer has very skillfully used the numeric characters to take this logo design to the next level.

Cobode
In this emblem, the letters are linked with one another to depict connectivity and energy.

Fontana Maggiore
The bold and flourished typographical choices in this logo design speak the necessary volumes to any potential customers.

(rb)

Noupe Design Blog

  

Sending email newsletters is an effective way of marketing and communicating with your clients and customers, and can serve you best when designed properly to attract potential customers, as well as the attention of your existing customers. Email newsletters are a powerful medium to maintain an extra connection with your audience beyond just the reach of your website alone.

Email newsletters allow you to keep your clients and customers in the loop with latest things that are happening, and products to pay attention for. In this way, you can build a healthy relationship with your customers and can significantly increase your sales. Now get a load of these exceptional Graphic Email Newsletter Designs for your inspiration.

Showcase

Heroes Over Europe
This is one of the most creatively and skillfully designed newsletters in the showcase, which truly stands out among the rest.

Percept Brand Design
A creatively designed newsletter created keeping the target audience in mind. Sufficient space is allotted for the content as well.

ScrapBlog
Very well designed newsletter that not only attracts the customers with its alluring graphics but also informs them in detail about the ScrapBlog.

EVE Online
This is one of the best newsletter designs in this collection that uses high quality and visually alluring graphics to grab the attention of their potential customers and buyers.

eMAG Newsletter
This newsletter brings extremely high contrast colors and top notch quality graphics into play that will for sure grab the attention of onlookers.

The Misadventures of PB Winterbottom
To portray the dramatic nature of the game, a dark black theme is chosen for this newsletter. Furthermore, customers are also informed that it is available on Xbox Live Arcade.

Icon Inc.
This newsletter design perfectly matches with their tagline “Your Creative Partner”. The newsletter is actually presented as if you are reading a newspaper.

Think
The main content area is highlighted against the vividly colored background so that visitors do not get distracted and read the entire newsletter.

Bioshock
The use of high quality graphics in this newsletter is making it stand out from the rest in this collection.

Dress Up Diana
The adage “A picture worth thousands words” best defines the nature of this collage like newsletter design.

Brandtalk
A simple and memorable design for the branding purpose. Here, Brandtalk used a unique approach to represent Nike’s logo.

Sephora
A wonderfully designed newsletter for promoting beauty products. The use of excellent graphics and color contrast helps in making this newsletter more appealing and stylish.

Paul Frank Industries
Excellent use of graphics to call attention to their flat rate shipping.

Elizabeth Davis
This newsletter is started with a catchy line that not only grabs the attention of the readers but also makes them read the entire newsletter to find to the solution of their problem.

Manual Design
In this design, you can see that more emphasis is given to the content of the newsletter rather than the images, yet it looks visually startling.

Urban Outfitters
This newsletter is primarily intended to market their limited time Free shipping campaign, and therefore is designed accordingly.

Threadless
With this newsletter, Threadless is promoting their Classics Sale. By specifying the date this sale will end, they urge the customers to avail themselves of the offer right now.

Action Method
iPhones are everywhere and it is quite difficult to cater to such a huge market with a single newsletter but Action Method has successfully accomplished this difficult task.

Paul Frank Earth Day
Simple graphics with the detailed information on the celebration of Earth Day.

Garden Sheds
Garden Sheds uses lots of color variation to give this newsletter an eye-catching look. The content of the newsletter is the main area of focus.

Lonely Planet
Light refreshing color is used as the background for this newsletter design that is pleasing to the eyes. The purpose of the newsletter is defined with the help of supporting text placed beneath the image.

Juxt Interactive
Not much content is placed in this newsletter rather Juxt Interactive puts lots of emphasis on the graphical elements.

IrelandHotels
With a breathtaking look at Ireland accompanied by the necessary details on going, there is enough in this newsletter to attract potential tourists to check out the hotel for their next trip for sure.

ExpoLit09
Use of high contrast color combination compels the visitors’ eyes drawing them to the content of the newsletter.

Life’s Not Fair But….My Knickers Are
Since the newsletter is about a feminine brand, the newsletter is also given a very feminine look by using loads of pink shades.

Club VTech
This newsletter is also designed keeping the target audience in mind i.e. kids. Therefore, they use graphics and images that will appeal to youngsters.

Owl City
Here, you can notice a more sophisticated and professional approach is being taken to impress the potential clients. Visitors are thoroughly informed about each and every thing the company has to offer.

Nike – Run it Your Way
Nike like its simple and effective logo design created a neat and visually attractive newsletter that fulfills its primary action.

Nation Toys
A funky design that is well suited for the toys outlet. This one would definitely appeal young children and teens alike.

Totally Rad
Loads of information is provided with this newsletter to inform visitors how they can follow Totally Rad on Twitter and get special goodies.

Envato
Envato captures the attention of their prospective clients with unbelievably amazing graphics. You can see that the content is not being highlighted much.

Indiemark
A very cool and soothing design that mainly focuses on the content of the newsletter.

Fitness 5022
Fitness 5022 has incorporated a fitness video to give their visitors an idea of what they can expect if they join Fitness 5022.

Ragged Edge Design
Ragged Edge Design makes use of a sophisticated template that equally puts emphasis on the graphics and content of the newsletter.

Bonobos
Bonobos follows a unique marketing approach in this newsletter by showing a high quality picture of a shirt to give an idea of the quality of the product and then they follow up with how you will be entitled to a huge discount by purchasing in bulk.

Apple iPod summer accessories email
Again in this newsletter, graphics are emphasized more as compared to the text.

Making Ideas Happen
Here the white space is used for this newsletter to more effectively highlight the content along with the places you can get this book from.

Paul Frank Newsletter
Paul Frank always sends prompt newsletters associated with any recent or upcoming events. Here, they are celebrating Mother’s Day by offering all of Mom’s favorite items at a discount.

Australia Post
A simple but effective design that executes its purpose even without the use of much content and images.

Pizza
A yummy and delicious pizza on the plain background in enough to captivate the onlookers.

ADC Young Guns
An extremely artistic approach that uses bizarre graphics against simple grey background to perplex the potential customers and make them read till the end.

Apple
Loads of Apple iPhones are placed in the shape of a heart to exemplify the love that we all have for the device. Imaginative use of beautiful graphics.

Banana Republic
Main area to be focused here is their offer that says 25% off after the five style event. Banana Republic is quite clear on what they want to be highlighted as their best selling point.

Bing
Bing introduced lots of new things in the word of the internet and here with this newsletter they invite their users to find out what’s popular on Bing.

Miche Bag
A well suited template design for the offer being given through this newsletter. Very well thought out and executed!

Jon Burgerman
Equal importance is given to the content and graphics to grab as many customers as possible. The huge empty space highlights the content.

Made
High contrast color graphics are placed against simple and white background that make the graphical elements shine.

MapMyRide.com
The excitement of cycling is the focus here. The appealing graphics and catchy tagline are the key components of this newsletter design.

StarbucksStore.com
A subtle approach is taken in this newsletter design. It is neither over loaded with the graphics nor with content. On the whole it is a decent approach.

The Plebs
The snapshot of their recently initiated shop is placed against a black background in order to call attention to the shop only.

(rb)

Noupe Design Blog