Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Web Design’.

We are pleased to present below all posts tagged with ‘Web Design’.

Game Sites Design Survey: Examples and Current Practices

Game websites are a little bit of a mystery. You won’t find them in the popular CSS-showcases since they are seldom fully CSS-based; however, they also rarely show up in sites that collect best Flash sites. The FWA, for example, has added only a few game sites this year. This is odd, because there are usually roughly hundred quality titles released each month, each with their own website.

During the research I've found out that there are a lot of creative game designs. This makes it extra strange that amongst all the showcases and studies we see on blogs and in magazines there is rarely one focused on game industry. High time we take a depth look into this area of web-design.

Wrath of the Lich king

This article is the first of a two-part-series where Smashing Magazine takes a critical look at web design in the video game industry. The first part is an in-depth review of the game-related sites out there. What design elements keep returning? What factors influence these design elements? Are the sites mainly CSS- or Flash-based? The article ends with a showcase of some beautiful examples of game site designs.

Read more...

Design Showcase Of Creative Online-Shops

Times when online-shops were boring and unattractive are over. To attract customers' attention designers tend to design online-shops according to the atmosphere it has to create. An online-store in which retro-products are offered is designed in a retro-look. And shops which are aiming to attract young customers are designed in vibrant colors and modern style. Furthermore, interactive browsing through the store, implemented with Flash and JavaScript, gains on popularity as well.

Online Shop Screenshot

This post showcases 45 examples of creative and unusual designs of online-stores. Being creative doesn't necessarily mean that the designs are successful since unconventional approaches often increase the time users need to climb the learning curve and figure out how they can achieve their goals. Still, how can you present your products in a distinctive way and how to design a truly unique online-store? Let's find out.

Please notice: we don't know if creative design approaches result in better sales. This post is supposed to provide you with some interesting ideas and approaches which you can use in your future projects, not with recommendations for the most effective online-store-designs.

Read more...

7 Essential Guidelines For Functional Design

Look at what you've made. Beautiful, isn't it? But does it work? For whom does it work? Of course you can use it, but can anyone else? In short, is it functional?

At the heart of every piece of practical design, whether it be a website, product package, office building, manufacturing system, piece of furniture, software interface, book cover, tool, or anything else, there is a function, a task the item is expected to perform. Most functions can be achieved in a variety of ways, but there are some basic elements a designer needs to take into account to create a product that best fulfills its intended function.

Screwdriver

These are the elements of functional design, the process of responding to the needs or desires of the people who will use an item in a way that allows their needs or desires to be met. Functional design is both an outcome and a process. As an outcome, it describes products that work well to perform their assigned tasks; as a process, functional design is a set of practices guided by the principles that produce that positive outcome. (Functional design is also a computer modeling technique, but that's not what we're discussing here.)

Read more...

A Small Study Of Big Blogs: Further Findings

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 is 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 that appear there. We have identified significant design problems and considered solutions for each of the problems separately.

ReadWriteWeb

We have posted 30 questions that we wanted to answer with our blog survey. Below we present further findings of our study of popular blog designs — the second part of the analysis of 50 popular blogs according to Technorati'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.

Read more...

A Small Design Study Of Big Blogs

We are quite curious; particularly when it comes to design and web-development we want to know just everything. Therefore, following our web form design survey, we have decided to take a closer look at blog designs, analyze them and find out which design solutions are common and which solutions are not used at all.

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. It doesn't really matter if the Technorati list is correct or not — we wanted to find out what design solutions big players (aka most popular blogs) prefer. Popular blogs are often considered to be examples of effective and functional design (which is not necessarily the case).

Screenshot

We have identified 30 design problems and considered solutions for each of the problems separately. We have posed 30 questions which we would like to answer with our blog survey. Below we present findings of our survey of popular blog designs — the results of an analysis of 50 popular blogs according to Technorati's Top 100.

Read more...

Textures and Patterns Design Showcase

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.

Texture Background Screenshot

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:

Read more...

Web Form Design Patterns: Sign-Up Forms, Part 2

Last week we have presented first findings of our web forms survey. The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed; we also presented some guidelines of how an effective and user-friendly web form can be achieved.

Screenshot

We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Afterwards we've gone through each and every one sign-up form of the selected sites and analyzed the design approaches implemented in these forms. Below we present the second part of our findings — the results of our survey among web-forms of 100 popular web-sites where web-forms (should) matter.

Please notice that this post is not about checkout forms — that's a topic for another discussion, we may consider them separately in one of the upcoming posts. We would like to thank Wufoo for providing us with a framework to conduct our survey.

Read more...

Style Switchers Contest Results

Three weeks ago we have announced the Style Switchers Design Contest where we've presented some ideas for style switchers design and encouraged our readers to create a style switcher for their own web-sites. One of the participants was to be awarded with an Apple Cinema 20 Flat Panel Display. Over 60 designers participated and — as in all of our earlier contests — the results are indeed pretty smashing. Now it's time to review some of the best designs and, of course, announce the winner.

Screenshot

Screenshot

This contest has proved one thing: there are a number of possibilities for creative use of style switchers in your designs. They don't have to be boring and can combine functionality with a beautiful and engaging design. Style switchers are back now; and we are glad that so many designers have participated in our contest learning how to use them and apply them to their designs.

Read more...

Hand-Drawing Style In Modern Web Design – Volume 2

When it comes to web design too often perfect, colorful and boxy designs make the cut; however, the reality is different as it is hard to find objects with a perfect shape and a perfect color in our daily routine. To achieve a unique and communicative design we need to consider more creative approaches. For instance, we can draw sites by ourselves — or at least some parts of it.

The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when perfect, boxy and rounded elements can be found almost everywhere. They look different and they can make a web-site look different. And this is what we usually are after in the first place.

Screenshot

And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn’t matter whether with Flash or (X)HTML. This post presents fresh examples of hand-drawing style in modern web design. All screenshots can be clicked and lead to the sites from which they’ve been taken.

Please also have a look at our previous showcase

Read more...

↑ Back to top