background preloader

7 Key Principles That Make A Web Design Look Good « Noupe

7 Key Principles That Make A Web Design Look Good « Noupe
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.

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?

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

How to size text using ems Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems. Why ems? If the world were an ideal place, we’d all use pixels. Keyword-based text sizing will allow all browsers to resize text so this is a possibility, but I don’t find it gives me the precision that pixels would give me. Get on with it OK let’s dive into ems. This takes 16px down to 10px, which apart from being less huge is a nice round number. So this would give us a document where text in the navigation and side bar is displayed at 10px, the main content is 12px and the footer is 9px. A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size (mainly to cater for IE/Win): 16 x 0.625 = 10

Thinking for a Living Introduction to hCard, Part two: Styling hCards - Opera Developer Community Introduction In the first part of this tutorial, I showed you the basics of the hCard microformat — what it is, how you implement on in HTML, and what tools are available to extract tem form web pages. Now that we know how to create hCards, let’s go through a couple of examples that demonstrate how we might style hCards with CSS to make them fit into the visual design of a web page. Download the full code for the examples in this article. Our first example — styling an existing hCard For our first example, let’s work on the contact card created in the first part of the article, making it a bit more visually appealing with some CSS. <div class="vcard"><div class="fn">Tripper, Jack</div><div class="n">Jack Tripper</div><div class="org">Jack’s Bistro</div><div class="adr"><div class="street-address">834 Ocean Vista Ave. The default rendering of the contact information is shown in Figure 1. This contact card is, at best functional, but uninspiring. Check out the first example running live.

Baseline - a designer framework by ProjetUrbain.com “Real” baseline grid on the web When I first started to design Baseline, I wanted to base the grid on the work of Josef Müller-Brockmann, unfortunately some missing CSS attributes — like type leading — kept me from implementing a true grid based approach. I then decided to another look at the basic grid used in print: the baseline grid. Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines — H1 through H6. How to use Baseline Baseline can be used in many different ways. Download The .zip file includes the full set of CSS files both for development and deployment, a Photoshop base document and a full set of HTML templates and examples. Going from 0.2 to 0.5 I’ve jumped the version from 0.2 to 0.5 because Baseline is getting closer to be feature complete than what I had anticipated. Known problems and limitations Version history Version 0.5.1

Lorem Ipsum - All the facts - Lipsum generator Astheria

Related: