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. It's easy to see why hierarchy has such a profound effect on web design — it's all about the user experience, and any website's presentation to the user. In this post, we'll cover some of the basics of working with correct hierarchy, and how it specifically applies to web design. What Exactly is Hierarchy? Hierarchy is the division of ranks; the order of things from most important to least important.
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. The archive offers a lot of room for creativity, though. Whether you opt for an abbreviated one in the sidebar or footer or devote an entire page to it, the archive an opportunity to make your design stand out. 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. 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. 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. They are: Monochromatic, Analogous, Complementary, Split Complementary, Triadic and Tetradic. 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. 1.1 Loewy Design 1.4 nclud. 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. In this article we’ll take a step back to provide some reasoning for designers to embark on that next redesign.
Great web design happens with sound user needs, solid business goals and focused metrics. Learning how to deconstruct a website is an important step in building a plan that aligns the company vision with the needs of users. 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! Full interactive view6 | Summary view7 Smashing Magazine. 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. Nonetheless, I decided to write an article describing what I feel is a solid case against using vertical navigation in modern web design. Naturally there are exceptions to every rule, and I’ll discuss those briefly at the end.
But first I’m going to present five reasons why vertical navigation should not be used and why designers and architects should almost always construct their sites with horizontal navigation in mind. 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. Dan Conaway. 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. After all, if users can’t use a feature, it might as well not exist. 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. 1.