background preloader

A Closer Look at Hierarchy in Web Design

A Closer Look at Hierarchy in Web Design
Many times designers will depend on other great designs for inspiration, trends, or 'tricks of the trade' to get by. However, learning the basic design principles and getting a feel for how they are applied to web design is essential for the career of any designer. In this post, we're going to take a close look at one of those basic design principles, and how it applies specifically to web design. Hierarchy is the element that makes users look where they do and when they do it. The top hierarchical element on a web page will be the first thing the user sees, and the lowest will be the last. What Exactly is Hierarchy? Hierarchy is the division of ranks; the order of things from most important to least important. Hierarchy Applied to Web Design Just like with all other forms of design, hierarchy is an essential feature to web design and the whole user experience. Planning Out the User Experience Before one should ever begin the design phase, a planning stage is essential. Create a User Flow

Case-Study: Deconstructing Popular Websites (Opinion Column) - Smashing Magazine Advertisement In our past articles, we’ve experimented with better ways to engage users on web pages with CSS31. We love getting into the nuts and bolts of web design by showing off some nifty coding tricks. Great web design happens with sound user needs, solid business goals and focused metrics. We deconstructed a few popular web pages below to stimulate the discussion around specific interaction issues many companies face. Mashable Mashable2 is a huge social media news website. Full interactive view3 | Summary view4 Regular readers might understand this statement, but based on the content on the homepage, it’s really hard to understand how these articles tie to social media.Holy navigation! MSN5‘s current design is a radical departure from their old homepage and a welcome change in a crowded market of news aggregators. Microsoft has struggled to drive profits with their web properties because of their lack of laser-like focus on users. Full interactive view6 | Summary view7 TechCrunch

The Case Against Vertical Navigation - Smashing Magazine Advertisement In a recent article about unusable and superficial beer and alcohol websites, I made the claim that using left-hand vertical navigation is an out-of-date method in modern web design. In the comments, a few people wondered why I said this. I was surprised that it got any attention at all, because it was a brief comment in the article, and didn’t constitute a substantial part of the argument I had put forth. Naturally there are exceptions to every rule, and I’ll discuss those briefly at the end. It should be noted here that when I refer to “vertical navigation”, I’m talking about the top-level, primary means of navigating a website. It Discourages Information Architecture Approximately eight to ten years ago when vertical navigation bars were much more prevalent, websites were created using a fairly simple process: The client gave the designer x number of pages, with page titles and content for each. Thora Industrial Plastics Design Should be Based on Careful Content Analysis

10 Principles Of Effective Web Design - Smashing Magazine Advertisement 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 become a standard approach for successful and profit-oriented 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. Please notice that you might be interested in the usability-related articles about 10 Usability Nightmares1 and 30 Usability Issues2 we’ve published before,we’ll cover more principles of effective design in our following posts. This article has been translated to Hebrew4. How do users think? 1. 2. 3.

Website Archives Design: Good Practices and Examples - Smashing Magazine Advertisement The archive is one of those often-overlooked parts of a website that doesn’t get the attention it deserves. Too often it’s thrown on a page that’s no different from any other page on the website, or it’s ignored altogether. Common Design Approaches While there is plenty of room for creativity, there is also a number of things to keep in mind to make sure your archive is functional and user-friendly. 1. There’s no sense cramming your archive into a space that’s too small. 1Neography2 uses a lot of white space to showcase its posts. The opposite is also true. 2. You archive should be findable by casual visitors. 3Instead of naming its archive section “blog posts”, “older blog posts”, “recent articles” etc., Kyle Meyer4 calls it “Archives” and prominently places it in the main navigation on the top of the page. There’s no point in having an archive if you make it impossible to find. 3. 4. 6On Colly.com7 users can browse archives by year or by categories. 5. 6. 7. Showcase (al)

Beginners Guide to Using the Power of Color in Web Design Good color choices should never be taken for granted in web design. A bad color selection or combination can have the same negative effective as poorly layed-out content or can create the same frustration as an excessively slow loading page. So, underestimate the power of color at your own peril. Even with a myriad of colors, the chances of stumbling into good a eye-pleasing color by mixing two or more together are very very slim. To help make a good color selection or arrangement, the situations when two colors are in a harmonious combination have been split into six color categories or schemes. In this post we will take a look at each, and highlight some effective examples of there use within web design. 1. As the name dictates, this calming color scheme uses only a single color as a base and allows its various shades, tints and tones to be included with in its palette. ← A Monochromatic Color Harmony or Scheme 1.1 Loewy Design 1.2 TagDiri 1.3 WilsonMiner 1.4 nclud 2. 2.1 ustvarjalko 2.2 Ecoki

Related: