background preloader

7 Key Principles That Make A Web Design Look Good

7 Key Principles That Make A Web Design Look Good
Oct 15 2009 By Juul Coolen Everyone and their grandfather (and dog) seems to have a website these days. The Web is getting more crowded by the day, with literally dozens of websites being added as you read this article. “Fortunately” for us designers, not everyone seems to understand what makes or breaks a Web design. So what makes something pretty? These elements are the 7 key principles that make a Web design look good: Balance,Grid,Color,Graphics,Typography,White space,Connection. 1. Balance is all about ensuring that your design does not tip to one side or the other. Example Look at the dog in the header graphic of Khoi Vinh’s Subtraction website below. This is what we call asymmetrical balance, and this is what balance is about. Here below is another example of symmetrical balance, this one by The First Twenty. You will find that every design you think looks good has a well-constructed balance underlying it. 2. The concept of grids is closely related to that of balance. 3. 4. 5. 6. 7. Related:  WebD

Take Your Web Design Skills From Amateur To Professional When I first set out to design websites I was a bit lost. I entered the field from the development side and didn’t have a formal design degree. While I’ve always trusted my eye to tell me what was good and what wasn’t, my eye often told me my early designs fell more into the wasn’t category than the was. When I talk to others first embarking on a web design career, I get the feeling my experience isn’t so unique. The good news is a few basic principles of design can dramatically improve your skills and help take your designs from amateur to professional. These principles have an easy to remember and ironic acronym. Because these principles are so important I think a series of posts is in order. I first learned all these principles from Robin Williams (no, not that Robin Williams) book The Non-Designer’s Design Book. As luck would have it as I was preparing this post I discovered Andrew Houle wrote a very similar post on myInkBlog. Alignment Repetition Take a look too at the sidebar.

10 Principles Of Effective Web Design - Smashing Magazine Advertisement Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information. Please notice that you might be interested in the usability-related articles about 10 Usability Nightmares1 and 30 Usability Issues2 we’ve published before,we’ll cover more principles of effective design in our following posts. This article has been translated to Hebrew4. How do users think? 1. 2. 3.

Web Pages That Suck - learn good web design by looking at bad web design - Home Page Handy Tips for Creating a Print CSS Stylesheet Print stylesheets often come as a secondary thought on many websites, after all, who prints a webpage anyway?! Despite their slightly infrequent use, a print stylesheet can really help polish the printed document for when it is used. It doesn’t take too long to create, so let’s take a look at some handy tips that you can put into practice on your own site. For this example, we’ll be going through the process of building the print stylesheet for Line25. Being a design blog there’s plenty of articles that users might want to print to refer to; for instance a user might want to print a tutorial to save switching applications; print an article for a meeting; or simply rest their eyeballs from the computer screen and read in bed. Adding some Fancy Styling With a bunch of objects removed the print styling is taking shape, and has dramatically reduced the number of pages in use, which all helps save the world. Display Link Destinations Split Comments Onto a Separate Page The Final Stylesheet

Webdesign Trend Hunting – 27 Bright Websites Using Popping Colors After The Messy Desk, The Fluid Grid Layout, and The Circle As A Design Fetish, our Trend Hunting series continues with a big roundup of cool websites designed with bright colors in mind. And in the eye :] Please leave your comments below, suggest other websites, and tell us what do you think about this trend. Muller 50.000 Beds The Other Design Agency Carsonified Change Graham Greg White Snog Home de Caramel Ryan Keiser Finely Sliced Bjango iPhone Apps Helveticons Rokkan Instrument Sketchen Ethno Port Bombay Saphire I am Lin Sofamade Wilson Miner Organic Grid Bjorn Frieze Blue Vertigo B Cube Spf Design More Want more?

Design Basics: Proximity To Know What Belongs With What So far in this series we’ve taken an amateur design and improved it in several ways. We aligned design elements to provide a sense of order, we used repetition to create visual themes, and last week we used contrast to differentiate elements and call attention to them. Today we’ll talk about the last of the four basic design principles, proximity. Proximity is about grouping related items. Where We’ve Been As we have throughout this series let’s begin by looking back at where we left off. We’ve come a long way already. You can tell the difference between major design elements. We’re almost there. Proximity in the Sidebar I mentioned proximity is the concept of grouping related things together. Still there are areas of the design where you might question if certain elements belong together. Do all those links go together? Let’s fix things so the navigation is clearer. Here’s how our new sidebar looks in the overall design. Proximity in the Main Content Conclusion Is this design great?

Rosario Florio & Larissa Kasper – SI Special △Andrea Rüeger Business Card Logo and business cards for Andrea Rüeger, CNC production. Silk screened on green paper. In collaboration with Larissa Kasper (www.larissakasper.ch). Fonts: Apercu (Colophon Foundry) △Orgel Klang Elektro Tanz Flyer 148 x 210 mm Flyer for a special event in a church. Fonts: Maria Alternate & Cg Triplett (AGFA/Monotype) △A—Z Flyer 105 x 148 mm Postcard flyer announcing a party at the club ‘Zukunft’ in Zurich organised by the label ‘Abbruchhaus’, which means ‘condemned house’. Fonts: ITC New Johnston (customized) Designed by Larissa Kasper △Freshcuts Recordings We love it (Series) Vinyl 12″ Record cover for “We love it”. Fonts: Apercu (customized) △Printed in Magazine 218 pages 200 x 270 mm «Printed in» – The spontaneous appearance of similar opinions» is a magazine, which intends to bring blogs and printed media together and shows that these two medias can be combined. Fonts: Larish Neue (Radim Pesko), Client Mono (Gestalten) & Johnston Neue (Customized New Johnston)

10 Tips to a Great Web Page There aren't any magic pills to create a great web page that everyone will visit again and again, but there are things you can do to help. Some key things to focus on are making the site as easy to use and user-friendly as possible. It should also load quickly and provide what the readers want right up front. The ten tips in this article will help you improve your pages and make them something your readers are interested in reading and passing on to others. 1. Image courtesy Paul Taylor / Stone / Getty Images If you do nothing else to improve your web pages, you should make them load as fast as possible. The thing about speed is that people only notice it when it's absent. More Tips for Speeding Up Your Pages 4. Image courtesy Three Images / Stone / Getty Images Small images are about the download speed more than the physical size. CSS sprites are also a very important way to speed up your site images. More Tips for Optimizing Images 7. Many people are not tolerant of spelling errors. 10.

Writing an Interface Style Guide Take a look at any CSS-based website design gallery, and you’ll see it’s obvious that beautiful interfaces are being designed and developed in amazing quantities. I frequently look to these sites for inspiration and, beyond a nice design and beautiful code, there’s usually something common about these sites: they’re new. Unfortunately, it’s also common that beautiful interfaces don’t stay beautiful. An interface’s design disintegration can be frustrating to deal with, especially for the designer and developer of that interface; it can be particularly frustrating for the designer and developer who can no longer access the site to fix the issues. If you have ever designed a beautiful interface only to find it ugly five months later because gaudy graphics, unpleasant colors, and distasteful fonts appeared over time, then you understand how maddening design disintegration can be. Design and brand standards#section1 Interface design standards enable brand stewardship. Typography#section3

21 Most Used Fonts By Professional Designers | Fonts The fonts are one of the most important parts of every web Project. All though there have been many other selective collection font posts around which most of the time leads to big confusions Like which typefaces is really useful for your project or how to choose your font from the list of hundred fonts. We spent last whole week reviewing dozens of font reservoirs and typography articles about fonts usability and popularity. The basic purpose behind this post is to show popular font types. there is no direct download link available for any font. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. Other References

Related: