designerbooster » Designhttp://www.designerbooster.com
designerbooster.com: boost your creativity with the right design resources at hand.Sat, 18 Jan 2014 10:55:41 +0000enhourly1http://wordpress.org/?v=3.3.120 Inspiring Examples of Textures in Web Designhttp://www.designerbooster.com/web-design/20-inspiring-examples-textures-web-design/
http://www.designerbooster.com/web-design/20-inspiring-examples-textures-web-design/#commentsMon, 26 Mar 2012 14:40:34 +0000designerboosterhttp://www.designerbooster.com/?p=4235
Here at WDL we love textures, specially because they can add personality, depth and style to websites, print, apps and everything else you can think of. From gathering free textures to showcasing examples of textures in action, we like to keep our readers up to date with the theme and also want to show how [...]
Related posts:

]]>
Here at WDL we love textures, specially because they can add personality, depth and style to websites, print, apps and everything else you can think of. From gathering free textures to showcasing examples of textures in action, we like to keep our readers up to date with the theme and also want to show how other designers use texture in their projects. Today we have a new list of websites using textures in inspiring ways. From super discrete textured fonts to complete textured backgrounds, here are some good examples of how you can integrate textures in your next project.

Web Design Ledger]]>http://www.designerbooster.com/web-design/20-inspiring-examples-textures-web-design/feed/0Responsive Web Designhttp://www.designerbooster.com/web-design/responsive-web-design/
http://www.designerbooster.com/web-design/responsive-web-design/#commentsFri, 23 Mar 2012 08:37:01 +0000designerboosterhttp://www.designerbooster.com/?p=4142
This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices. The Challenge Let’s start our journey by looking at [...]
Related posts:

]]>
This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.

The Challenge

Those pages let people check websites through a set of pre-built views based on various device sizes or orientations. Bricss goes one step further as it allows you to "customize" viewports by setting any dimensions you want.
Now check the-great-tablet-flood of 2011.
Do you get my drift? Trying to check layouts against specific sets of dimensions is a losing battle. Besides, using existing devices to set break-points is not what I’d call a "future proof" approach, as there is no for standard sizes or ratios.
I don’t want to go the "consider it to be harmful" route, but I want to point out that tools like these, or articles promoting a device approach (i.e. Device Diagram for Responsive Design Planning), make people focus on the wrong end of the problem, reinforcing the idea that responsive is all about devices.
To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. We don’t need anything fancy, we can simply drag the bottom right corner of our favorite desktop browser to enter: “Device Agnostic Mode”.

The Goal

The goal is to surface content, to style boxes as columns so they bring sections above the fold. The question is: when should we bring a box "up"?

Content Is King!

If we consider that content is king, then it makes sense to look at it as the corner stone of the solution. In other words, we should set break-points according to content instead of devices.

The Principle

The content of a box dictates its width. It is the minimum width of adjacent containers that create break points (a size at which we can display boxes next to each other).
Decisions are made keeping these points in mind:

The width of a box should be as small or as wide as possible without impairing readability.

The max-width of a box should take into consideration the importance of following boxes. This is because the wider the box, the wider the viewport must be to reveal subsequent boxes.

The goal is not to bring everything above the fold (we don’t want to fill the viewport with clutter).

CSS

To build our grid we will rely on display:inline-block mainly for horizontal alignment and inline flow. But note that this choice also gives us an extra edge to play with (more on this later).
Also note that we will override this styling with float to achieve some specific layouts.

The minimum and maximum widths above only come into play when the box is displayed as a column.

Breakpoints

The width of the containers establishes our breakpoints. Breakpoints are viewport's widths at which we decide to display a box as a column (instead of a row).

How Do We "Pick" Breakpoints?

Until we are able to use something like grid layout, we are pretty much stuck with the HTML flow, and thus should rearrange boxes while respecting their source order. So we go down our list, and based on the minimum width values, we create various combinations. The values below show widths at which we rearrange the layout, styling rows as columns, or changing the width of a specific column.

470px

header

Main

Complementary

Aside (250) + Contentinfo (220)

530px

header

Main

Complementary (280) + Aside (250)

Contentinfo

700px

header

Main (420) + Complementary (280)

Aside

Contentinfo

or:

header

Main (420) + Complementary (280)

Aside + Contentinfo

950px

Main (420) + Complementary (280) + Aside (250)

Contentinfo

1170px

Main (420) + Complementary (280) + Aside (250) + Contentinfo (220)

1190px

Main (420) + Complementary (280) + Aside (490)

Contentinfo

1410px

All of the above are potential breakpoints — each value could be used to create different layouts for the page. But is that something we should automatically do? I think not. At least not without considering these two points:
How close are the breakpoints?
We have 2 that are 20 pixels apart (1170px and 1190px); should we set both of them or should we drop one? I think that above 900px, chances are that desktop users may easily trigger a re-flow in that range, so I would not implement both. In other words, I think it's okay to go with close breakpoints if the values are below 800px — as there is less chance to confuse users when they resize their browser window.
Should we try to create as many columns as we can?
Bringing more ads above the fold may make more sense than bringing up a list of links that you'd generally keep buried in your footer. Also, you may choose to give more breathing room to your main content before bringing up boxes that the user does not really care for.

Getting Ready for Media Queries

For the purpose of this article, we'll use every single one of our breakpoints to create a new layout, which should also demonstrate that it is not necessarily a good idea.

For the 530px and 700px breakpoints, there is a design choice to make. Without a max-width, we'd get everything flush, but the main box (#main) would be larger than the maximum width we originally set.

Conclusion

Not once in this article I referenced the width of a device, be it an iPad, a Xoom, or something else. Building a "content-aware grid" is a simple matter of choosing the "layout patterns" that you want, based on breakpoints that you set according to page content.
After I sent this piece to Smashing Magazine, I ran into Smashing Magazine Feed]]>http://www.designerbooster.com/web-design/responsive-web-design/feed/0Awesome Printed Web Design and Development Bookshttp://www.designerbooster.com/web-design/awesome-printed-web-design-development-books/
http://www.designerbooster.com/web-design/awesome-printed-web-design-development-books/#commentsThu, 22 Mar 2012 02:37:48 +0000designerboosterhttp://www.designerbooster.com/?p=4132
There’s no doubt that eBook devices such as the Kindle and the Nook have changed how people read books forever. At the start of 2011 Amazon reported that for the first time eBook sales exceeded paperbacks. It’s doubtful this trend will ever be reversed. Though with E ink devices, image heavy books tend to not [...]
Related posts:

]]>
There’s no doubt that eBook devices such as the Kindle and the Nook have changed how people read books forever. At the start of 2011 Amazon reported that for the first time eBook sales exceeded paperbacks. It’s doubtful this trend will ever be reversed.
Though with E ink devices, image heavy books tend to not work well (anyone who has tried viewing a PDF on an eBook will testify to this). This may change in 2012 with the rise of tablet devices, but for now printed books are still in demand. For instance, many web workers prefer to read web design and development books in printed form.
In this article we will look at 25 printed web design and development books that we think you will find useful. Many of these books are also available in digital form and the prices of which have been denoted where applicable.

Design

1. Adaptive Web Design: Crafting Rich Experiences with Progressive EnhancementPrint: $ 22
One of the most popular books available on Progressive Enhancement. It focuses on progressive enhancement with markup, CSS, javascript and accessibility.
2. Mobile First & Responsive Web Design BundlePrint: $ 30, Ebook: $ 15, Print/Ebook Bundle: $ 38
A good bundle from A Book Apart. Luke Wroblewski’s Mobile First provides a strategic guide to mobile design whilst Ethan Marcotte’s Responsive Web Design focuses on designing for mobile browsers, netbooks and tablets.
3. The Smashing Books BundlePrint: $ 49.80 , Ebook: $ 24.90, Print/Ebook Bundle: $ 69.70
Smashing Magazine have produced a beautiful series of books on web design. Smashing Book #3 is available for pre-order now, and set for release at the end of April 2012. So at the moment the best deal is the Smashing Books Bundle which contains Smashing Book #1 and #2.
The first book focuses on usability, color theory and main rules for web design, whilst the second book provides more practical advice and tips on building mobile apps and e-commerce websites.
4. Photography For The WebPrint: $ 34.95, Ebook: $ 29.95, Print/Ebook Bundle: $ 39.90
A digital photography book that teaches you how to take photographs specifically for the internet. It covers using light effectively, displaying and sharing your photos online, software tips to help enhance your images, and much more.
5. The Adobe Photoshop Layers BookPrint: $ 26.23
A whole book that is dedicated to understanding Photoshop layers. Masking, isolation, layer effects, styles and composite images are all covered in this useful book.
6. Don’t Make Me Think: A Common Sense Approach to Web UsabilityPrint: $ 22.22
With over 100,000 copies sold, Steve Krugs ‘Don’t Make Me Think’ is one of the most popular and entertaining books on web usability. Covers designing billboards, navigation, usability testing and much more.
7. The Web Designer’s Idea Book, Vol. 2Print: $ 19.80
One of the most inspirational web design books available. Patrick McNeil looks at the basic principles of design and showcases over 650 websites. Sites are divided by type (e.g. ecommerce, directory etc), style (minimal, illustrated etc) and by structural elements (buttons, tabs etc).
8. 100 Things Every Designer Needs to Know About PeoplePrint: $ 17.99
A book that looks at the psychology of design. Author Susan Weinschenk helps you see design from a non-designers point of view and looks into what people see, think and read. It also looks at how people focus their attention and are motivated.
9. The Little Black Book of DesignPrint: $ 9.99
The design field’s ‘Art of War’, The Little Black Book of Design has inspired thousands of designers with short useful tips such as ‘Always ask why’ and ‘You built it, so natrually you understand it. Will the user?’.

Coding

10. Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites Print: $ 23.99
A great book for those who want to learn how to create database driven websites using PHP, MySQL and JavaScript. Perfect for those who want to know more about the backend.
11. Effortless E-Commerce with PHP and MySQLPrint: $ 23.09
Another PHP and MySQL book though this one focuses specifically on ecommerce. It covers structure and design, security, user accounts, creating a catalog, the checkout and administration.
12. Murach’s PHP and MySQLPrint: $ 34.34
With 24 chapters spanned over a whopping 840 pages, Joel Murachs book is a great book for beginners and advanced developers alike. A good choice for anyone looking for a PHP/MySQL reference.
13. JavaScript & Jquery: The Missing ManualPrint: $ 23.99
Features an introduction to Javascript, Ajax and jQuery and includes lots of examples of how these languages can be used online to build forms and connect to services such as Google Maps.
14. PHP Solutions: Dynamic Web Design Made EasyPrint: $ 26.99
A good introduction to PHP and the MySQL databases. PHP Solutions features a lot of practical examples of using PHP such as generating images, creating online galleries and managing databases.

CSS & HTML

15. The CSS3 AnthologyPrint: $ 39, Ebook: $ 17 , Print/Ebook Bundle: $ 34 (Promotion)
A great CSS resource that addresses common problems of text styling, navigation, cross browser techniques and more. The CSS3 Anthology is uniquely set up in a question and answer format to make it easy to find solutions to common CSS problems.
16. HTML5 & CSS3 For Web Designers BundlePrint: $ 30, Ebook: $ 15 , Print/Ebook Bundle: $ 38
Another good combo from A Book Apart. Jeremy Keith’s HTML5 for Web Designers summarises the 900 page HTML5 spec into a more concise 85 pages. Dan Cederholm’s CSS3 for Web Designers explains gradients, shadows, rounded corners and other CSS3 goodies.
17. CSS Pocket ReferencePrint: $ 8.86
Whilst CSS is easy to understand, it’s very easy to forget the vast number of CSS selectors and properties available. The CSS Pocket Reference is a useful companion for any designer who wants a quick answer to a problem.
18. Sergey’s HTML5 & CSS3: Quick ReferencePrint: $ 46.14
Another good reference book that covers HTML5 and CSS3 topics such as HTML5 Elements, Web 2.0 Forms, HTML5 APIs, browser compatibility and more.
19. Introducing HTML5Print: $ 20.99
Introducing HTML5 gives a good introduction to the possibilities of HTML5. Lots of practical examples are given such as applying the most important JavaScript APIs, how to build web forms, and more.

WordPress

21. Professional WordPress Plugin DevelopmentPrint: $ 24.44
A practical approach to learning how to develop WordPress plugins. The book walks you through how to create a plugin file, using hooks, and much more. Code examples are given to help you understand what you need to do.
22. Smashing WordPress: Beyond the BlogPrint: $ 24.34
A great book from Thord Daniel Hedengren that helps you understand code concepts such as post types, child themes, the functions.php file and much more.
23. Build Your Own Wicked WordPress ThemesPrint: $ 39.95, Ebook: $ 29.95 , Print/Ebook Bundle: $ 49.90
Written by 4 experienced WordPress theme developers, Build Your Own Wicked WordPress Themes shows you how you can build, promote and sell professional designs using the Thematic framework.
24. The WordPress AnthologyPrint: $ 39.95, Ebook: $ 29.95 , Print/Ebook Bundle: $ 44.95
A good WordPress guide for beginner to intermediate users. The WordPress Anthology covers subjects such as the WP loop, post type, taxonomies and the WordPress API.
25. Digging Into WordPressPrint/Ebook Bundle: $ 75, Ebook: $ 27
Arguably the best WordPress reference available, Digging Into WordPress has over 400 pages of content. It’s how the WordPress codex should have been written!
With all the great web design and development books out there it’s difficult to get them all into this list. So leave a comment if your favourite design or development book was left out and tell us why it’s your fav.
(rb)Noupe]]>http://www.designerbooster.com/web-design/awesome-printed-web-design-development-books/feed/0Which Makes a Better Logo Design: Typographic or Symbol?http://www.designerbooster.com/graphic-design/makes-better-logo-design-typographic-symbol/
http://www.designerbooster.com/graphic-design/makes-better-logo-design-typographic-symbol/#commentsWed, 21 Mar 2012 20:37:32 +0000designerboosterhttp://www.designerbooster.com/?p=4131
A well-designed logo is a unique combination of business and art. With an assortment of well-chosen variables, it conveys the type of business, as well as the corporate philosophy, and is often the first and most essential element of any branding initiative. Why? Because it’s the first thing your consumer sees. And it either grabs [...]
Related posts:

]]>
A well-designed logo is a unique combination of business and art. With an assortment of well-chosen variables, it conveys the type of business, as well as the corporate philosophy, and is often the first and most essential element of any branding initiative. Why? Because it’s the first thing your consumer sees. And it either grabs their attention or it doesn’t.
There are three main types of logos: typographic, symbol or a selective combination of the two. And these design choices have a tremendous impact on brand identity. As a result, they represent the starting point for the creation of any effective logo design. But the elements you select are largely determined by the specifics of your organization.

Using Typographic Logos

As the name implies, a typographic logo is comprised solely of letters, numerals or similar font-based characters. Vastly different than type appearing in standard print, these characters are formatted to serve as graphic elements that stand on their own by varying size, color and typeface.

Most often, a typographic logo is used to impart the brand name of an organization. Coca-Cola, McDonalds, Google and Levi’s would be prime examples. But to use this type of logo effectively, the company’s name should ideally be short and self-explanatory. In these instances, typographic logos are extremely helpful when trying to establish a memorable brand name.

Using Symbolic Logos

The first thing to understand when considering a symbolic logo is the nature of an image. Symbols are used to convey a complex idea in a direct, instantly-translatable way. Often created by mixing graphic images, a symbol can be constructed from basic shapes or specific conceptual representations. For example, you’d be hard-pressed to find people in the world who were unable to describe and instantly replicate the Nike “swoop.”
But as with typographic logos, symbols by themselves are not suited to every organization. Typically reserved for companies with brand names that are long, complex or difficult to pronounce, graphics work extremely well to differentiate those products or services in the marketplace. In the same way, symbols can be used to distinguish brands that have a common sounding name or unite a broad portfolio of sub-brands under a single banner, as is the case with Nike.

The one catch with using a symbol is that it requires a larger marketing investment to educate the consumer, defining its specific meaning and, more importantly, fostering a favorable impression.

Combining Typographic and Symbolic

One of the basic requirements for creating an effective logo is simplicity. And this is especially crucial when combining typography and symbols. Ideal for new businesses, this style of logo includes concise text – often boiled down to one or two words – and is paired with a simple, ordinary image or basic shape. But ‘basic’ doesn’t mean ‘plain’. The choice of image has to be strong enough to single out the brand among its competitors.

A great example is the Puma logo. Including the brand name and the trademark cat leaping over the typographic elements, this logo is unique in that it’s become a known commodity, allowing the logo itself to appear as any of the three types: plain type, symbol or a combination of the two.
You The Designer]]>http://www.designerbooster.com/graphic-design/makes-better-logo-design-typographic-symbol/feed/035 Superb Design Examples of Film Logohttp://www.designerbooster.com/featured/35-superb-design-examples-film-logo/
http://www.designerbooster.com/featured/35-superb-design-examples-film-logo/#commentsFri, 16 Mar 2012 02:37:00 +0000designerboosterhttp://www.designerbooster.com/?p=4077
A logo serves as a main representation of any business. It has to be brilliant in every way because it helps your business to progress. The film sector in these modern times is growing pretty quickly. Every one of us really like watching movie films and despite the fact that an increasing number of films [...]
Related posts:

]]>
A logo serves as a main representation of any business. It has to be brilliant in every way because it helps your business to progress. The film sector in these modern times is growing pretty quickly. Every one of us really like watching movie films and despite the fact that an increasing number of films are now produced in a manufacturing facility full of modern technology and transposed in images by means of computerized resources, items such as film reels and camera lenses are still the film industry’s common signs and representations. A symbol is instantly referred to as a film logo when it is designed using any of these kinds of representations. In today’s post, we are going to showcase some beautiful film logo designs that fully reflects the film industry by way of its well known symbols.
Here are the 35 Superb Design Examples of Film Logo which hold a unique message that describes a company. Take a look at these logo designs and be inspired. Have fun browsing!

Filmotion

By: vudstok
A logo design of a vibrant film which is perfect for production companies.
View Source

Video Spin

By: Noetic Brands
A branding logo which can be used for media, video streaming and other related viral media businesses, youtube channel operator can also use it for there channel branding.
View Source

Shew Productions

By: jwolter
A mark created for a made up company for school portfolio.
View Source

Twisterpictures.com

By: MDS
A logo design which is great for commercial and documentary movies and production.
View Source

Sky Lab

LongShot

Film Rotation

By: mathewt
A great brand for a film company.
View Source
The simpleness of these emblems presents a good possibility to artistically feature them in a logo design or even include them to other kinds of symbols.
blueblots.com]]>http://www.designerbooster.com/featured/35-superb-design-examples-film-logo/feed/0Design Inspiration: Shopping Cart Designhttp://www.designerbooster.com/featured/design-inspiration-shopping-cart-design/
http://www.designerbooster.com/featured/design-inspiration-shopping-cart-design/#commentsThu, 08 Mar 2012 02:38:21 +0000designerboosterhttp://www.designerbooster.com/?p=3993
The design of an e-commerce website can have a dramatic impact on the user experience throughout the process of purchasing a product. In this post we’ll take a look specifically at shopping cart pages, showing examples from 25 different e-commerce sites. The shopping cart page shows customers specifically which items are in their carts and [...]
Related posts:

]]>Clean, simple web designs have become a popular trend. This article will cover the subject through a two-part discussion. First, we’ll talk about a few traits that clean designs tend to have in common. Secondly, I’ll share some tricks and techniques that can be helpful when trying to achieve a clean design.

Common Traits of a Clean Web Design

Let’s start by looking at some fundamental characteristics of clean web designs.

Solid Web Page Layout Structure

If you take a few minutes to browse sites that might fall into the "clean" category, I’d be willing to bet they all have one thing in common: a well-thought-out grid that the designer is really putting to work.
For anyone not familiar with designing with a grid, just imagine that each comp starts with an invisible structure of columns and rows, and that structure drives the scale and placement of the elements in the composition. This grid creates a sense of order by helping designers establish hierarchy, rhythm and consistency.
Pixel Dreams is designed in a grid using the popular 960 Grid System.
A solid grid layout structure provides order and unity. For instance, Creative Review has several page layouts for certain types of content, however, the browsing experience is continuous because they all share the same underlying framework.
When a site has a lot of content to display, such as an online magazine or a newspaper site, achieving a clean design aesthetic can be more difficult. But sites like The Guardian, a British newspaper, show that it’s possible with a well-thought-out layout grid.
If all their content were plopped onto the page without a solid structure, the front page would definitely be a mess. However, by using their grid as a starting point and relying on rules and white space to establish hierarchy, the robust content feels far from overwhelming. Every pixel of margin and every rule was tweaked until it was "just right," and all that effort resulted in a layout that feels effortless.
Here are two resources that will help you learn more about designing on a grid:

Good Typography

It seems that good typography often centers around doing more with less, and when it comes to getting that "squeaky clean" feel in your designs, restraint is key.
When too many typefaces are used, they compete with one another, making a design appear disjointed and disorderly.
If you do a quick survey of well-designed sites, you’ll probably find they rely on one or two typefaces, and then vary size, case, color and weight to establish a clear typographic hierarchy.
This approach creates a sense of consistency and refinement that can be seen on sites such as The New York Times and The Mavenist.
The New York TimesThe Mavenist
In both examples above, there are no more than two typefaces in the style sheets, yet the designers have established clear hierarchies by using those typefaces to their fullest.
Good typography is best displayed in the details. Leading, the spaces between lines of text, can help make content easy to read and pleasing to the eye. When there’s just enough space, the reader’s eye can easily return from the end of one line to the beginning of the next. In web design, leading can be adjusted through the line-height CSS property.
The optimal ratio of type size to leading often depends on the typeface, color and width of the text block.
Additionally, letter-spacing, the space between letters, can allow the letterforms to breathe a bit.
Here are some resources related to web typography:

Limited Color Palette

In print design, color is often limited by necessity. A budget may allow for only a two-color poster, and so the designer is forced to work within those constraints.
That’s never the case with websites, though, since most modern computer monitors can display millions of colors.
However, cleanly-designed sites seem to trend toward limited color palettes. From what I’ve seen, these sites often use core grays and one color. The color is earmarked for the most important elements (like links and headers), a trick that not only enhances usability but also helps to visually unite elements throughout the site.
A1 rolls this direction, using a bluish green and gray color palette.
Meanwhile, the fine folks at Fuzzco take it all the way down to a single color: red.
Clean designs that successfully push beyond one- or two-color palettes often do so by using color sparingly and by using neutral colors to break things up. Solo is a great example of this.
Just like the connection between typeface and message, it’s not all about picking colors that look good. Stronger designs incorporate palettes that set a visual tone which echoes the site’s content.
For example, bright, complementary colors make sense for Notologist because of the nature of the site.

Consistent Imagery

Does it bother you when the style of imagery (photography, illustrations, charts, etc.) shifts from page to page throughout a site? Me too.
Making sure these visually prominent elements are stylistically in harmony is a pretty powerful trick when it comes to creating a site with a clean appearance.
For example, IBM’s Smarter Planet campaign touched on dozens of topics. Throughout the related print and interactive materials, illustrations and charts that share geometrical frameworks, bold strokes and saturated colors help tie the campaign’s materials and topics together.
And over on Protein, you’ll notice that even though the photography for the profiles comes out of different shoots, there is a carefully produced similarity across the images in terms of composition, depth of field and quality of light. Consistency across these often-prominent elements helps viewers look past individual pieces and see the sites as a whole.
Obviously, there are instances where it just isn’t practical to produce all the imagery in the same style. News sites and blogs can’t throw out a great image that enhances a story just because it doesn’t fit with others.
And sometimes clients don’t have budgets to produce new charts and illustrations, so the designer is forced to make existing assets work. I’ve noticed that in these cases the use of graphic elements around the imagery, such as borders, can help inconsistent imagery feel a bit more uniform.

Tips for Achieving Clean Designs

What follows are a few tips for producing clean web designs.

Start Complex, Then Simplify

Putting things on the page is part of the design process. In my experience, one of the traps designers can easily fall into when they set out to create something "simple" is becoming afraid to add anything to the page. The resulting designs are usually pretty bland because the process didn’t allow for exploration (and those "happy design accidents" we all love).
To avoid this problem, I find that it’s helpful to "start complex, then simplify."
In the early phases of the design, don’t limit what you put on the page. Explore different layers of content and try out different design elements. Then, once that design feels like it could be close to complete, start to simplify.
Ask yourself, "what doesn’t really need to be here?" If dropping a design element (like a rule or texture) seems to make the page fall apart, keep it around. But, if that’s not the case, ditch it.
We’ve all heard the adage that 20% ends up doing 80% of the work. We’re just applying that theory to design by identifying the elements that are doing the heavy lifting in our layouts. (Read more about this subject: Reductionism in Web Design.)
It may even be worth bringing in someone who’s more detached from the design for an outside opinion on what should stay and what should go. If you can’t give a more solid defense for why something should be on the page other than "it’s cool" or "they do it on this other site," then remove it.
Ultimately, you’ll be left with the ingredients that will give you the strongest design. Once you get there, a little bit of fine-tuning should leave you with a strong, uncluttered design.

Tweak, and Tweak Some More

I’ve been told that I tend to "beat my page designs into submission." Honestly, I take that as a compliment.
To me, a design is never really "finished" and can always be pushed further. Seriously, just ask any designer or student who has had the unfortunate luck of working with me. I’m guessing it’s not all that fun when I ask them to try another shade of green for the twelfth time.
As we explored earlier, that "clean" feel is the product of all the aspects of the design — composition, hierarchy, palette and typography — working harmoniously. If you’re like me, making that happen means a lot of time spent tweaking: adding a point of line-spacing here, removing 2px of margin there, trying #ddd instead of #eee for the dotted rules, etc. These may seem like inconsequential adjustments, but when it comes to getting all the elements in a composition to work together, a single pixel can make a big difference.
So, tweak, and then tweak some more. One tweak will lead to another, and sometimes what you uncover will lead you to fork your designs or backtrack.
Making something look clean and cohesive is a process that takes time and persistence (and, generally, a lot of coffee).
But, if you stick with it, all the details will eventually fall into place and the design will become cohesive.

Don’t Miss the Big Picture

In my previous life as a "mostly print designer," printing and pinning up your layouts was a daily ritual. The firm’s walls were saturated with everything from annual reports to logo explorations.
But something funny happened when I started to focus on web design — I stopped printing. It was almost like I decided that because the project would never see a press, it never needed to see paper.
After a long spell of blank walls (and subsequent blocks of frustration with how my projects were coming together), it hit me. The beauty of printing and pinning was seeing the big picture.
I was missing my chance to evaluate the system as a whole, shore up throughlines, and find opportunities to simplify.
Flipping through layers in Illustrator or Photoshop just doesn’t offer the same perspective as seeing all the comps side by side.
So, my suggestion is to print, pin and repeat. It’ll help you identify inconsistencies and find opportunities to synchronize your layouts, all of which will result in a cleaner design. (Sorry trees.)

Conclusion

Whether you’re well-versed in the creation of "clean" design or looking to move in that direction, respect for imagination followed by attention to detail will go a long way.
As I said early on, an organic but intentional process — not standards and rulebooks — will come in most handy. Of course, each designer has moments of magic throughout his or her individual process.
So, if you have any tips and tricks you tend to use to strengthen your layouts, or examples of "clean" design you love, please feel free to add them below so we can keep the discussion going.
Six Revisions]]>http://www.designerbooster.com/web-design/elements-clean-web-design/feed/0Design an Amazing Bubble Text Art in Photoshophttp://www.designerbooster.com/tutorials/design-amazing-bubble-text-art-photoshop/
http://www.designerbooster.com/tutorials/design-amazing-bubble-text-art-photoshop/#commentsSat, 03 Mar 2012 14:38:05 +0000designerboosterhttp://www.designerbooster.com/?p=3901
Text effect can be difficult to make. Text is a simple object that you may need to spend more time to work out with other nice background and objects. This tutorial will show you some tactics and skills to produce a nice text artwork. Photoshop Lady Like this post? Share It :Related posts: Super Easy [...]
Related posts:

]]>
Text effect can be difficult to make. Text is a simple object that you may need to spend more time to work out with other nice background and objects. This tutorial will show you some tactics and skills to produce a nice text artwork.
Photoshop Lady]]>http://www.designerbooster.com/tutorials/design-amazing-bubble-text-art-photoshop/feed/0Add Delicate Vector Birds and Butterflies to Your Spring Design Projectshttp://www.designerbooster.com/design-articles/add-delicate-vector-birds-butterflies-spring-design-projects/
http://www.designerbooster.com/design-articles/add-delicate-vector-birds-butterflies-spring-design-projects/#commentsSun, 26 Feb 2012 14:37:02 +0000designerboosterhttp://www.designerbooster.com/?p=3810
Birds singing, flowers, trees in bloom, warm temperatures…oh, sweet spring! The winter is almost over now and we can’t wait for nature to rebirth! Once with spring come a lot of seasonal graphic design projects that can fill our heart and pockets with lots of joy! With that in mind I’ve created a list of [...]
Related posts:

]]>
Birds singing, flowers, trees in bloom, warm temperatures…oh, sweet spring! The winter is almost over now and we can’t wait for nature to rebirth! Once with spring come a lot of seasonal graphic design projects that can fill our heart and pockets with lots of joy! With that in mind I’ve created a list of highly useful vector clipart resources such as vector butterflies and vector birds that will bring a fresh touch to your designs!
Check out these beautiful butterflies! You can create delicate vector illustrations with these lacy butterflies, just imagine them on a special invitation card! Below you will also find butterfly silhouettes which you can color as you please and print as stickers or magnets for kids, the possibilities are endless! You will even see a vector pack of more artistic butterfly designs, to create a more elaborate illustration and a vector pack with realistic looking butterflies which you can use in children book illustrations and other prints.

Birds are also a symbol of spring because most of bird species emigrate during the cold season to warmer seas and in the spring they return home. To create a spring looking illustration or design in general you can use a convey of birds on the blue sky, or birds sitting on trees with green leaves, just let your imagination run wild! Below you will find a collection of vector packs with all kind of birds: convey of birds, birds sitting on lines (which can make a great wall sticker, by the way), lacy and flourish bird designs for romantic outcomes, birds in different poses, more artistic bird designs which will look amazing on an abstract vector illustration for example and also birds in pairs. Enjoy!

Which pack is your favorite from this list?

Pixel 77]]>http://www.designerbooster.com/design-articles/add-delicate-vector-birds-butterflies-spring-design-projects/feed/0New Showcase Of Icons In Web Designhttp://www.designerbooster.com/web-design/new-showcase-icons-web-design/
http://www.designerbooster.com/web-design/new-showcase-icons-web-design/#commentsThu, 23 Feb 2012 20:37:50 +0000designerboosterhttp://www.designerbooster.com/?p=3797
Designers find various ways to integrate icons in web design, whether by changing their colors or making them monochrome or simply adding or creating from scratch the ideal icons for a web site. There are a lot of creative ways in which icons are used on web sites and I will showcase here a few [...]
Related posts:

Designers find various ways to integrate icons in web design, whether by changing their colors or making them monochrome or simply adding or creating from scratch the ideal icons for a web site. There are a lot of creative ways in which icons are used on web sites and I will showcase here a few of them, hoping that this will help you in the future when you will design a web site.