The Beautiful Web

Notas do Editor

1. The Principles of Beautiful Web Design - Published in Feb of 2007 (almost 3 years ago now) but it continues to sell well even though most of the examples have changed.
2. What is beautiful web design? I think of "fresh looking" websites that make use of layout, color, texture, type and imagery.
3. http://neutroncreations.com Designed by @elliotjaystocks Beautiful colors, bold type, strong layout & a lots of HTML5/CSS3 tricks. Just reviewed this in a screencast with Gene on http://unmatchedstyle.com
4. http://ndesign-studio.com – Portfolio/Blog of Nick La from Web Designer Wall: Amazing illustration, imagery and texture. Nick wrote an article called CSS: Design out of the box which was the inspiration for the background images, but he has a very thorough post about his inspiration and process on the blog.
5. http://31three.com – Portfolio of Jesse Bennett Chamberlain: Clean layout, subtle colors, beautiful typography. In his introductory post, Jesse showed a previous iteration of this homepage with a large butterfly taking up most of the screen. His friend Chris convinced him that he’d come off looking like he sold poetry and scrapbooks instead of design.
6. What if I told you that you could have a website this beautiful in no less than 3 easy steps? You’d think I was crazy right?
7. Step 1. Gather Elements: Logo, Tagline, Main Nav, Content Elements, Footer, etc... Design principles, specifically gestalt principles like unity, proximity, continuation talk about the relationship between visual objects. This is why most designers require a sitemap and prefer to have all the content up front. With pure design theory, we talk about point, lines and shapes. With web design, our generic elements are often "Logo", "Tagline", "Main Navigation", "Subnav", "Content", Footer"...
8. Step 2. Establish Structure: Rule of thirds, typographic grid, or even the templates from http://960.gs When I wrote the layout chapter of my book, nobody was talking about grid based design. So I used the rule of thirds and a basic grids like this to lay out my example design.
9. Example of a page layout worksheet from a graphic design class…
10. Since then, amazing people like Khoi Vinh, Mark Boulton, Richard Rutter started a lot of buzz in the industry about typographic grids.- Classroom grid examples- 960.gs Most developers get it right up to this point...developers like structure / frameworks / rules / formulas / principles
11. Step 3. Choose imagery to support the content, colors based on proven color schemes, and appropriate typography. Little bit of sarcasm here...Choose imagery to support the content, Choose some colors based on proven schemes from color theory, Choose appropriate fonts
12. If you’ve followed design principles, color theory & made solid typography choices, you may end up with something this awesome! (A Wordpress Template)
13. To quote Ren & Stimpy... Better than bad, it’s good! But far from great...
14. How many of you like to cook? Best recipes from recipes sites are those with universal appeal. But without making them your own, they can be like that Wordpress template. Almost every comment on a high-rated recipe has a list of modifications to make it better. Universal vs Unique
15. ...and if we all adhered to universal design principles / color theory / rules... all the time, everything would always look the same. Much like http://girlface.ytmnd.com
16. Sometimes you have to piss on the principles and add in individuality/creativety to generate a reaction & create artistic value. Fountain by Marcel Duchamp, 1917 - Intent was to shift the focus of art from physical craft to intellectual interpretation
17. Nude Descending a Staircase - Duchamp, 1912 Some might say Duchamp is a chump, not a real artist He knows about art, color theory, painting So what does it look like when we break the rules on the web...
18. http://GeneratorX.no/ is an unsettlingly beautiful site about software-modulated design. All 3 of these examples are from Fresher Styles for Web Designers by Curt Cloninger They may not be practical examples of inspiration for client work, but they’re beautifully unique.
19. http://psypop.tv/ is a multimedia design firm specializing in animation with a unique hand-drawn feel.
20. http://we-make-money-not-art.com/ is a funky contemporary art news portal with a functional logo.
21. “...I’ve always tried to get people to unlearn what they learned in school.” - Tibor Kalman
22. Without knowing basic principles though, it possible for things to go very, very wrong...
23. I’m not even going to tweet the URLs of these 3 sites... Working on a project for a company the sells parts and works on foodservice equipment a couple months ago. Trying to find a logo... Took this screenshot last weekend...new site is up...looks better but it’s still very “flashy”
24. A friend of a friend had a technical question about what “add-on” they needed to incorporate into a page to sell things online...this was their website. Ignorance of color theory & contrast. Cheesy gradient/photo flair, bordering effects on images. Painful.
25. Hosting client of the first company I worked for out of college. Had to do maintenance on this and it’s still live. Teal on purple on pinky red...ouch. The common bond between all 3 of these? They were trying really hard. But they weren’t getting anywhere.
26. “Design depends largely on constraints.” - Charles Eames Eames Lounge & Ottoman 1956 for Herman Miller by Charles & Ray Charles - “warm receptive look of a well-used first baseman’s mitt” Ray (wife) - comfortable and non-designy
27. The Eames House 1949 Landmark of 20th century modern architecture
28. http://orderedlist.com/ - Recently redesigned professional site of Steve Smith & John Nunemaker. Feels like a breeze could flow through from left to right uninhibited by the content...
29. ...but it has a strong structure. Ordered List adheres to a strong grid, but still has a very open, airy feel.
30. http://rossocarmilla.com has loads of character with a very minimal (red, white, black) monochromatic color scheme.
31. “Creation is a patient search.” - Le Corbusier Notre Dame du Haut - Ronchamp Chapel in France 1954
32. The chapel had abandoned his principles of standardization and machine aesthetic. Le Corbusier’s Unite d’Habitations - 1947 to 1952 Series of residential housing design projects utopian city living design
33. Sometimes the constraint we’re after is a throwback to another era... Went to the library looking for inspiration for this presentation. found that the Thomas Cooper Library has EVERY issue of Communications Arts magazines back to the 50s This was a featured work: classic 1950s magazine ads with a turn-of-the century newspaper feel.
34. http://thewaywardirregular.com emulates a turn-of-the-century newspaper feel.
35. http://theoldstate.com also draws on the design trends from the early 20th century.
36. This is where all those hours studying art history in college finally come in handy. Bauhaus - 1919-1933 German School of Design that focused on bringing modern design into all forms of art: Architecture, Graphic Design, Typography, Painting, Interior Design I love Bauhaus design and used the styling of designers like Herbert Bayer for my slides today.
37. “Design is thinking made visual.” - Saul Bass Best known for his work on animated motion picture title sequences for Alfred Hitchcock, Stanley Kubrick and Martin Scorsese. The Man with the Golden Arm, North by Northwest and Psycho.
38. Some say design is purely about artistic talent, that helps, but it’s also about thinking; Learning to distill ideas. Economy of line...produce the maximum effect with every line, eliminating the unnecessary.
39. The Bubble chair was designed in 1968 by Eero Aarnio, a Finnish interior designer who is also well known for designing the "Ball Chair".
40. http://bit.ly/rvbFO - Samantha Warren (@samanthatoy) saw inspiration for Choice Hotels Scandinavia. “an interpretation of the Scandinavian design and style that is so prevalent in the architecture and interior design of their hotels”
41. “You can have an art experience in front of a Rembrant...or in front of a piece of graphic design.” - Stefan Sagmeister
42. Stefan Sagmeister’s banana wall - 2008 exhibit 7,200 bananas chose green and yellow and wrote a message: “Self confidence produces fine results”
43. With typographic grids and CSS, the web is starting to catch up with the visual interest of other forms of design. One place we’re failing is information graphics. Wired Magazine 2007
44. Another amazing information graphic: Global flaws of Soverign wealth flow, NYT 2008
45. http://nosotroshq.com is a beautiful site that was obviously inspired by information graphics.
46. You can even find inspiration in your own old work. Much of the design of my current personal site, is based on an old design.
47. http://bit.ly/3wfxzK - One of my favorite design articles is Good Designers Copy, Great Designers Steal by @cameronmoll
48. “We are the music makers and we are the dreamers of the dreams” - Willy Wonka
49. Take Away: The Beautiful Web is more than just “Principles of Design”. It’s about you: your personal experience & inspiration.