
Smashing Magazine we smash you with the information that will make your life easier. really.
-
More Web Design Trends For 2009
By Smashing Editorial, January 21st, 2009 in Design Showcase | 210 Comments
Last week we presented 10 Web Design Trends For 2009, our review of the most promising developments and techniques in web design that may become big in 2009. In the first part we covered embossing letters ("letterpress"), rich user interfaces, PNG transparency, big typography, carousels and media blocks.
This post is the second part of our review. It presents design trends for 2009 in terms of layouts, visual approaches and design elements. Please notice that this post showcases trends and developments that were extensively covered in our previous articles (e.g. handwriting, retro and vintage etc.) and therefore weren't covered in this post (they are all linked in the overview, so feel free to explore these single posts as well). Did you miss any recent development in this overview? Let us know in the comments!
You may want to take a look at the following related posts:
-
Web Design Trends For 2009
By Smashing Editorial, January 14th, 2009 in Design Showcase | 378 Comments
We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a classic approach. As a result, new design approaches come up, and as more and more designers notice them and make use of them, new trends emerge.
Over the last months, we've analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. In this post, we present Web design trends for 2009: recent developments, new design elements and new graphic approaches. We also discuss situations in which these trends can be used and present some beautiful examples. Did you miss any recent development in this overview? Let us know in the comments!
-
Mobile Web Design Trends For 2009
By Steven Snell, January 13th, 2009 in Design Showcase | 135 Comments
Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up-to-date. In the past few years one of the biggest areas of change has been the amount of internet users that are accessing websites via phones and mobile devices. As a result, web designers have a growing need to be educated in this area and be ready for designing sites that will accommodate this audience.
Because designing websites for mobile devices brings some unique situations and challenges into play, the subject requires a strategic approach from the designer/developer. In this article we'll look at the subject as a whole, including current trends, challenges, tips and a showcase of example mobile websites. Plenty of helpful resources and articles are also linked to throughout the post, so if you're interested in learning more about designing for mobiles, you should have plenty of information at your fingertips.
-
Textures In Modern Web Design
By Steven Snell, January 7th, 2009 in Design Showcase | 127 Comments
If you look around at well-designed websites in CSS galleries or any other source of design inspiration, you'll see that texture is extremely common in modern Web design. One of the reasons it's so popular is because of its versatility. Textures can be used in countless different ways and in a wide variety of design styles. As you look around, you'll see how textures can be used in so many different ways by Web designers.
Textures in Web design can be very subtle, so that the visitor hardly notices, or they can be a focal point of the design. In some cases, textures are used to emphasize certain parts of the design. Because of the versatility of textures, they can be used in combination with many other design elements, such as typography, lighting and colors.
When examining exemplary Web designs that employ textures, you'll notice that textures are used in background images, headers, footers, sidebars, content areas and even fonts. Although texture is sometimes associated with a grunge style of design, its reach extends far beyond just grungy websites. Texture adds dimension to virtually any style of design, if applied properly. In this post, we'll look at 50 examples of websites that use textures in different ways.
-
Don’t Follow Trends: Set Them!
By Dmitry Fadeyev, November 25th, 2008 in How-To | 122 Comments
Your website represents your brand. New visitors will form a first impression of your service or product within seconds of arriving at your website, and the visuals, layout and aesthetic will play a large role in shaping that impression. Sure, your website may be very usable and have great content, but it's the aesthetic that will evoke feeling, and it's the aesthetic that will be used to judge the quality of your website in those first few seconds before the visitor has had time to browse around.
Use this to your advantage and fashion a unique style that will set your website apart from the rest — a style that will impress and delight your users.
Throughout history, great artists always found new ways to express themselves and create new techniques to set their work apart from the rest. Think about the styles of Leonardo da Vinci, Vincent van Gogh, Pablo Picasso, Salvador Dali and Jackson Pollock. Think about the different movements of art, from Impressionism and Expressionism to Surrealism and Minimalism. These styles couldn't be more different from each other — and that's the point. The artists' names live on because their art is unique.
-
A Small Study Of Big Blogs: Further Findings
By Smashing Editorial, July 31st, 2008 in How-To | 65 Comments
Last week we presented the first results of our study of top blogs. As promised, this week we publish the second part of the survey, including further findings and problem solutions we have found out during the study. In the first part we discussed layout design and typographic settings. What remains to be covered are the navigation design, information architecture, advertisements and functionality (RSS-feeds, tag clouds, pagination etc.).
Reminder: since we wanted to make the survey as objective as possible, we used Technorati Top Blogs and analyzed 50 most popular blogs which appear there. We have identified important design problems and considered solutions for each of the problems separately.
We have posed 30 questions which we wanted to to answer with our blog survey. Below we present further findings of our survey of popular blog designs — the second part of the analysis of 50 popular blogs according to Technorait's Top 100.
Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. Still it is useful to know what big players do and, more importantly, what they don't do.
-
Vivid Imagery In Modern Web Design
By Smashing Editorial, July 29th, 2008 in Design Showcase | 82 Comments
By using vivid images designers can draw user's attention, communicate a message quickly and effectively and leave a memorable first impression. Practically all websites use images in their design, but few use vivid images to achieve maximum results. What is a vivid image? A simple definition is an image or photo that is striking, shocking, intriguing, interesting, beautiful or sexy (we'll be looking at plenty of examples below). It causes a reaction from the senses of visitors that an average image would not.
Words can communicate on their own. Photos can often communicate quicker and in different ways than text. Vivid images used in combination with the right words can be incredibly powerful. These images do more than just play a mere complementary role in the design.
A good starting point for this discussion is to look at the purposes of images in general and why they are used in web design. From there it's possible to observe the true impact that vivid images can have as opposed to just standard images.
-
Textures and Patterns Design Showcase
By Smashing Editorial, July 9th, 2008 in Design Showcase | 103 Comments
Textures and patterns are used more often than one may think. The reason why we don't see them is because they usually remain in the background, supporting the overall design, replacing a standard background color and creating a more inviting atmosphere. But they almost never stand out. Used primarily for background images, they need to fit to the overall design making the content easier to perceive. In fact, wood textures seem to have become so popular that designers suggest that wood is the new glossy style and wood is the new white.
Well, we don't think that wood is a new revolutionary trend — after all, it was used and explored for years. However, since wood isn't used everywhere — in correct and wrong contexts — experimenting with it makes perfectly sense. Still, there are a number of options beyond wood: e.g. fabric patterns, tiles, ground, stone, walls, bricks, stiches, cardboard, ceramics, decay, rust, old tapes, illustrations, plastic and glass.
In this post we present a showcase of sites using textures and patterns— we want to focus designer's attention on design options available beyond wood. Reason: we strongly believe that vibrant, realistic background images are becoming a new trend. If it sounds familiar to you, you are absolutely right: we've seen the same trend 8-10 years ago. The sources for the background images are usually either photos (e.g. you can download free textures in the Smashing Texture Library) or illustrations created with Photoshop, Illustration etc.
You may want to take a look at the related articles:
-
Footers In Modern Web Design: Creative Examples and Ideas
By Smashing Editorial, April 8th, 2008 in Design Showcase | 181 Comments
According to classic principles of web design, everything at the bottom of the page isn't that important. Most users think like that. And most designers are convinced that this is true. Site elements at the bottom of the page aren't really able to catch visitors' attention which is why footers are often forgotten or ignored and not given the attention they deserve.
In fact, most footers are rather boring and uninspiring. Designers often use the bottom area to mention everything they haven't found place for at the top of the site. E.g. disclaimers, W3C-buttons, copyright, "back to the top"-link and contact details. But if most designers forget it, why don't make use of it? Why don't use footers to impress visitors with something they actually don't expect at all?
This post presents creative examples of footers and ideas for footer design. We've tried to identify some trends and some interesting approaches you may want to use or develop further in your projects.
You might also want to take a look at the posts
- CSS-Based Footers: Modern Solutions which showcases even more excellent examples of CSS-based footers.
- Navigation Menus: Trends and Examples with recent trends, examples and innovative solutions for design of modern navigation menus.
- Pagination Gallery: Examples And Good Practices with good practices of pagination design as well as some examples of when and how the pagination is usually implemented.
- Tag Clouds Gallery: Examples And Good Practices presents creative examples and ideas for design of tag clouds.
Basically, footers need to provide users with the information they are looking for. This is why contact details and a brief information about site or / and site owners needs to be placed in the footer. Corporate designs may need to provide driving directions, telephone number, a web form or at least an e-mail.
-
The Secrets Of Grunge Design
By Smashing Editorial, March 11th, 2008 in Design Showcase | 227 Comments
Shiny and glossy design elements are now officially outdated. Just like retro is becoming trendy again, grungy look appears to rapidly gain on popularity. And there is a damn good reason behind it. In our everyday environment we're unlikely to find ideal geometric forms or pretty shadow effects as they are manifested by glorious Web 2.0-designs. The reality is different, and Web is definitely not an exception here.
Therefore designers often tend to explore the less ideal and more realistic design solutions which reflect the world we're living in more accurately and precisely. Result: such elements give the design a more realistic, genuine look, a look one would actually expect in real life.
In such grunge designs dirty stains, torn images, "broken" icons and creased pieces of paper are as popular as hand-drawn elements and dirty textures. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note. And dirty textures are often used as background images for navigation menus, photos and overall layouts. Usually these elements are regular objects from our daily life, replicated in their real form without any glossy effects.
-
Logotrend 2007: Leaves
In modern logo-design leaves stand for fresh ideas or - more generally - for an innovative way of thinking. In Web they are mostly used to communicate light-weight solutions as well as clean and unobtrusive designs. In fact, leaves, plants or ornaments which appear to be related to the nature can be found almost everywhere; it's a trend that will probably be reversed soon, due to an extreme overuse of the theme in modern designs. The sites themselves, using leaves for their logos, mostly do not have a relation to foliage - and even although often green color is used, that is not necessarily the case. We'd like to present you some of them. The following logos aren't supposed to represent the quality of logo designs with leaves, but the trend we observe on the Web. The images can be clicked and lead to the sites from which the logos have been taken. You'll also find tutorials you can use to learn how to create "leaf logos". Please notice that this post features only those logos which are related to the Web. What do you think? Is an extensive use of leaves in logos a current Web 2.0 hype which will disappear soon or are the leaves here to stay?By Smashing Editorial, August 31st, 2007 in Graphics | 74 Comments
-
10 Designer’s Checkpoints To Be Aware Of
By Smashing Editorial, August 10th, 2007 in Developer's Toolbox | 81 Comments
Automatic tests, checks and analysis services can be extremely valuable if you're looking for bugs or try to avoid them. To make sure everything is just the way you think it should be, you need validators. To improve the value and quality of your content, you need to be able to analyze the behaviour of your visitors. And to perform better in the future you have to know exactly, what your competitors are doing, how they're doing it and what you should learn from them.
In this overview we'd like to present some useful analytics services, validation tools and monitoring services you should be aware of. Some "standard" tools - such as W3C Validators - are skipped; instead we've tried to focus on tools you probably don't know that much about.
Please notice that the results provided by these services can include mistakes. Some rankings don't have to be right. And some calculations don't have to be based on correct statistical data. In every case the results have to be examined carefully; however, often they can inform you about current tendencies you might be willing to be aware of. And thus you can find some useful starting points from where you can really improve your web site. All listed tools are free or at least have a free "basic" version.
-
Web 2.0: Buzz-Monitoring and Tracking
You’d like to improve the link popularity of your site. Or maybe to keep track on the latest web buzz. It would be nice to inform your readers about it the minute the news occured. Or maybe you just want to monitor the activities of your users and be able to find the best topics [...]By Smashing Editorial, November 24th, 2006 in Developer's Toolbox | 37 Comments
-
Design Patterns: Download Buttons
In the era of Web 2.0 download-buttons are becoming more and more important. Grey and simple few years ago, now they’ve become bigger, more colourful and come in dozens of variations. As the name says, download buttons are supposed to motivate visitors to use, or at least try the product which is offered on the [...]By Smashing Editorial, November 3rd, 2006 in Graphics | 21 Comments
Sponsors
- Advertise with us!
Smashing Links
Stay in touch
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 75 JavaScript Techniques
- 70 Best Photoshop Tutorials
- 70 Best Illustrator Tutorials
- 53 CSS Techniques
- 50 Blog Designs
- 50 Graffiti Artworks
- 50 Brilliant Photos
- 50 Movie Posters
- 40 Free Fonts
- 40 Creative Layouts
- 35 Beautiful Icon Sets
- Beautiful Desktop Wallpapers
- Beautiful Macro Photos
- Beautiful Underwater Photos
- Free Design Templates
- Free CSS Layouts
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- AJAX Tutorials
- Badges and Pins
- Batch Image Processing
- Black & White Photography
- Block Quotes
- Blog Designs 1, 2, 3, 4, 5
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Clean Code
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- Drupal
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Font Management
- Form Design Patterns
- Forums
- Fractals
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graffiti
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- JavaScript Techniques
- jQuery
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Macro Photography
- Mascots
- Moleskine Art
- Motion Graphics
- Motion Blur Photos
- Movie Posters
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Actions
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Pricing Tables
- Product Designs
- Rain Photography
- RSS Best Design Practices
- RSS Feed Icons
- Screencasting
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Smoke Photography
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase 1 2, 3
- Underwater Photography
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Version Control Systems
- Vintage & Retro Posters
- Vintage & Retro Designs
- Vintage & Retro Tutorials
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Weblog Engines
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- Wordpress Toolbox
- WYSIWYG Editors
Fresh Bookmarks
22 Free Seamless Vector Pattern Resources Perfect For Web Design
A collection of resources and articles related to vector patterns.
10 New PHP Content Management Systems
All based on PHP.
25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.
Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.
20+ CSS Data Visualization Techniques
Get inspired.
CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.
Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,
Webdesign: Five Minute Upgrade
Making Your Design Pop.
45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.
The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.
Blogroll
- Bittbox
- CatsWhoCode
- Colorburned
- Design Disease
- Designm.ag
- Deziner Folio
- Dr. Web Magazin (.de)
- Dr. Web Shop (.de)
- Freshome Blog
- FudgeGraphics
- I Love Typography
- MakeUseOf.com
- Naldzgraphics
- Noupe.com
- Pro Blog Design
- Search-This
- Six Revisions
- SmileyCat
- Spoon Graphics
- Typesites
- Usability Post
- Walyou
- Webdesigner Depot
- Weburbanist
- Wellmedicated


















