Menu Search
Jump to the content X
X

Posts Tagged ‘Web Design’.

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

Smashing Header Graphics Contest

In many blogs header graphics often takes a prominent position as bloggers try to impress visitors with distinctive and appealing visual elements. In fact, designed properly, header graphics can create an appropriate atmosphere and convey the style the designer has chosen. Well-designed themes can be as useful as templates, particularly if you can download them and experiment with them as you wish. However, you won't find that many sources on the Web. That's time to change it.

Blog Header Graphic

We'd like to create a small smashing gallery of blog header graphics which every designer could use for free and without any restrictions whatsoever. To achieve this we need the help of our creative visitors. To achieve this we need your help. Which is why we announce a Header Graphics Contest.

Update (02.02.2008): please notice that this contest is not about designing a header for the Smashing Magazine web-site. Your header graphics don't have to be related to Smashing Magazine at all. This is about sharing your skills with fellows designers and creating a free repository of downloadble header graphics.

Read more...

10 Principles Of Effective Web Design

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 established as a standard approach for successful and profit-oriented web design. After all, if users can't use a feature, it might as well not exist.

10 Principles Of Effective 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.

Read more...

Grunge Style In Modern Web Design

Most design trends come unexpectedly, evolve over time, become pointless and finally disappear from the design landscape. This holds particularly for web design, which is — just as every other creative field — prone for over-hyping and over-usage of trends. Being used excessively (sometimes properly, but mostly without any reasonable purpose), trends lose their ability to communicate information, express something unique or innovative and consequently lose their visual appeal.

Web 2.0 style is an excellent example for this evolution in design. In the last months of 2007 we've observed a clear example of design abuse, as glossy buttons, colorful reflections, 3D-effects, rounded corners and xx-large font sizes could be found almost everywhere (and we've presented some examples a year ago). However, currently we've been observing a new step in this evolution. Web 2.0 elements start to disappear; they become more subtle, more user-centric, more content-oriented and less loud. Is it a sign for coming changes?

Texture Screenshot

Below we've collected everything you would ever need for a perfect design in a grunge style — design examples, free fonts, icons, textures, brushes and even few tutorials.

Read more...

Isn’t it sweet? Mascots in Modern Web Design

The more emotional a site design is, the more likely it is to evoke positive feelings within its visitors. To achieve a lasting impression, designers tend to use visual cues and offer some eye candy for hurried and hectic users. E.g. vibrant color schemes, photos and illustrations can be used to draw user's attention to some specific site section.

But are there any further options? Yes, there are. Actually, mascots are traditional for sports competitions such as Football World Championship or Olympic Games. Mascot is a more or less nicely designed creature which is symbolic for something and is supposed to evoke sympathy and strengthen the sense of belonging to one single team.

Mascot Screenshot

Should Smashing Magazine have a mascot? We’d like to know your opinion. If yes, how should it look like? Please let us know in the poll below and in the comments!

Read more...

Hand-Drawing Style In Modern Web Design

The most valuable and innovative ideas had all been handwritten first. That's no big news, since designers tend to produce first sketches as paper prototypes anyway; still it's important, because web design is different from "usual" design. Of course, it also has a personal note and it is hand-made, however users can't see that. As CSS is "boxy but good", designs tend to have a rather limited appearance — they are too boxy and too right-angled.

If designers want to achieve a different design, they have to draw their sites by themselves — or at least some parts of it. 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. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere.

Screenshot

How impressive can the results be? And when can the hand-drawing style be used? Let's take a look at some excellent 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.

Read more...

Screen Resolutions and Better User Experience

In order to work well, designs have to be optimized for simplicity, transparency and, consequently, optimal user experience. The user experience itself is, however, in many cases just an elegant term employed with false intentions and wrong approaches.

Optimal user experience is rarely achieved by visual design elements, although some stakeholders are strongly convinced that it actually is the case. What actually matters is the fact that the content is accessible and legible — and although visual design can support the content and help to communicate with your target audience in a more effective way, it is not a solid foundation to build a successful web-site upon. (In fact, to compromise stakeholders' understanding of design solutions is your primary task if you strive to be a professional web-developer.)

Chart Screenshot

Whatever stages you are going through in your design process, to perform well you need to make sure that your design works for most visitors, whatever screen resolution they use. It's not about the graphics visitors see; as stated above, it's about the content they are looking for.

Read more...

30 More Excellent Blog Designs

It's not hard to design a weblog, but it's getting harder when you try to achieve a unique weblog design. It doesn't matter what weblog-engine you are using — frequently used themes tend to become boring over time, and they also don't necessarily reflect the unique identity of the blogger.

To create an original design you need fresh ideas and creative design solutions. However, you don't need to go too far with your design experiments. Basically that's a close attention to finest details which makes a weblog stand out and gives it a fresh flavour and soft touch visitors can recognize immediately.

Screenshot Weblog-Design

We've selected more of them — over 30 excellent weblog designs with unusual design approaches; these blogs don't only have a unique voice, but they also pay close attention to the finest design details.

  • You might find not all of the designs listed below beautiful; but that's not what it's about. They are beautiful in their own way as they are both well-structured and originally designed.
  • you can find further blog designs in the post 45 Excellent Blog Designs we've published before;
  • you can find even more designs in our Design Showcase section.
Read more...

Pagination Gallery: Examples And Good Practices

Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways.

In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as "previous" and "next"-buttons.

Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. And there are situations when pagination is also necessary for weblogs. Additional navigation can simplify the access to some site pages — e.g. make it easier for users to browse through the archives of the site.

In most cases pagination is better than traditional "previous - next" navigation as it offers visitors a more quick and convenient navigation through the site. It's not a must, but a useful nice-to-have-feature.

Apple Store
Misal
Flickr

Let's take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented.

Read more...

Tag Clouds Gallery: Examples And Good Practices

Compared to conventional navigation patterns tag clouds don't necessarily offer a more convenient and intuitive navigation. However, used properly, they can provide visitors with an instant illustration of the main topics, giving a very specific and precise orientation of the site's content. Since human beings tend to think in concepts and models, it's easier to get an idea of presented content if the main concepts are given straight away — in digestible pieces, and prioritized by their weight. In fact, the main advantage of tag clouds lies in their ability to highlight the most important or/and popular subjects dynamically which is not the case in conventional navigation menus.

Tag clouds offer a quite interesting approach for site navigation; although the technique is sometimes considered to be an "alternative", it shouldn't replace the "common" navigation but support it giving users additional clues about the content of the site. Due to their "cloudy" form the design of tag clouds sets them apart from other design elements on a page. And although designers don't really have that much choice in designing them, they still find their ways to break through the bounds of creativity and come up with some unusual approaches and solutions.

Screenshot Tagcloud

Screenshot Tagcloud

This article offers some selected examples of tag clouds, its shortcomings and also some suggestions for tagging data and links in a more profound and effective way.

Read more...

45 Excellent Blog Designs

Designing a blog is easy. Whatever engine you are using and whatever style you prefer, you'll always find a number of templates you can apply to your weblog in seconds. No styling is necessary, no playing with colors is needed and no mind jogging about content presentation is required. However, not every weblog should look like a typical blog. After all, not every blogger wants his or her site to look exactly like hundreds of other ones. In fact, there is a small bunch of creative, outstanding and individually designed from scratch blogs.

Screenshot

In this post we didn't try to showcase some eye-candy (although sometimes eye-candy is indeed offered); the designs listed below were selected for their attention to small details. Pretty and colourful header-graphics doesn't make a good blog. The blog needs a solid visual structure, a profound hierarchy of site elements; it also has to be able to build some kind of a bridge between the content and its presentation. To do this, you need to think about precision, minimalism and sound use of illustration. These criteria were the ones we've used to select the designs listed below. All these aspects make the designs we've selected look... well, not always beautiful, but outstanding, almost excellent in their own kind. Mostly it's the idea the designers used to make the weblog as usable as possible - not the implementation of this idea - which we've been after.

Screenshot

Below you'll find 45 excellent blog designs which impress with creative approaches and attention to details; hopefully you'll find new ideas you can develop further in your own designs.

Notice that the screenshots we've provided may give you a wrong impression about the whole design of the sites; in doubt you should take a closer look at headers, footers, comment-areas, site structure and further site elements. Please also notice that you can click on screenshots to get to the sites from which the screenshots have been taken.

We've missed something? Definitely! Let us know in the comments!

Read more...

↑ Back to top