{"id":2950,"date":"2019-04-04T10:11:13","date_gmt":"2019-04-04T10:11:13","guid":{"rendered":"https:\/\/demo.dinesh-ghimire.com.np\/wpthemes\/blogmag\/?p=26"},"modified":"2019-04-04T10:11:13","modified_gmt":"2019-04-04T10:11:13","slug":"9-essential-principles-for-good-web-design","status":"publish","type":"post","link":"https:\/\/millionairemag.net\/?p=2950","title":{"rendered":"9 Essential Principles for Good Web Design"},"content":{"rendered":"\n<p>Web design can be deceptively difficult, as it involves achieving a \ndesign that is both usable and pleasing, delivers information and builds\n brand, is technically sound and visually coherent. <\/p>\n\n\n\n<p>Add to this the fact that many Web designers (myself included) are \nself-taught, that Web design is still novel enough to be only a side \nsubject in many design institutions, and that the medium changes as \nfrequently as the underlying technology does. <\/p>\n\n\n\n<p>So today I&#8217;ve put together my 9 principles for good Web design.  These are only my opinions and I&#8217;ve tried to link off to more reading  on subjects so you don&#8217;t only hear my voice. Obviously, I have lots of  disclaimers: rules are made to be broken, different types of design work  differently, and I don&#8217;t  always live up to my own advice. So please  read these as they are intended&#8211;just some observations I am sharing&#8230;<br \/><\/p>\n\n\n\n<p>Capture the Valley uses bars of color to guide your eye through sections from top to bottom&#8230;\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n1. Precedence  (Guiding the Eye)<\/h2>\n\n\n\n<p> Good Web design, perhaps even more than  other type of design, is \nabout information. One of the biggest tools in your arsenal to do this \nis <em>precedence<\/em>. When navigating a good design, the user should \nbe led around the screen by the designer. I call this precedence, and \nit&#8217;s about how much visual weight different parts of your design have. <\/p>\n\n\n\n<p>A simple example of precedence is that in most sites, the first thing\n you see is the logo. This is often because it\u2019s large and set at what \nhas been shown in studies to be the first place people look (the top \nleft). his is a good thing since you probably want a user to immediately\n know what site they are viewing.<\/p>\n\n\n\n<p>But precedence should go much further. You should direct the user\u2019s \neyes through a  sequence of steps. For example, you might want your user\n to go from logo\/brand to a primary positioning statement, next to a \npunchy image (to give the site personality), then to the main body text,\n with navigation and a sidebar taking a secondary position in the \nsequence.&nbsp; <\/p>\n\n\n\n<p>What your user should be looking at is up to you, the Web designer, to figure out.&nbsp; <\/p>\n\n\n\n<p>To achieve precedence you have many tools at your disposal:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\n<strong>Position<\/strong> \u2014 Where something is on a page clearly influences in what order the user sees it. <\/li><li>\n<strong>Color<\/strong> \u2014 Using bold and subtle colors is a simple way to tell your user where to look. <\/li><li>\n<strong>Contrast<\/strong> \u2014 Being different makes things stand out, while being the same makes them secondary. <\/li><li>\n<strong>Size<\/strong> \u2014 Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)<\/li><li>\n<strong>Design Elements<\/strong> \u2014 if there is a gigantic arrow pointing at something, guess where the user will look?<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><em>Further Reading:<\/em><\/h4>\n\n\n\n<p><em>You can read more of my thoughts on Precedence in an old Psdtuts+ post called Elements of Great Web Design &#8211; the polish. Joshua David McClurg-Genevese discusses  principles of good web design and design at Digital-Web. Joshua also has the longest name ever \ud83d\ude42 <\/em><br \/><\/p>\n\n\n\n<p>Marius has a very clean, very simple site with plenty of space\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n2. Spacing<\/h2>\n\n\n\n<p>When I first started designing I wanted to fill every available space\n up with stuff. Empty space seemed wasteful. In fact the opposite is \ntrue.<\/p>\n\n\n\n<p>Spacing makes things clearer. In Web design there are three aspects of space that you should be considering:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li> <em><strong>Line Spacing<\/strong><br \/>   <\/em>When you lay text out, the space between the lines directly  affects how readable it appears. Too little space makes it easy for your  eye to spill over from one line to the next, too much space means that  when you finish one line of text and go to the next your eye can get  lost. So you need to find a happy medium. You can control line spacing  in CSS with the &#8216;line-height&#8217; selector. Generally I find the default  value is usually too little spacing. Line Spacing is technically called <em>leading<\/em>  (pronounced ledding), which derives from the process that printers used  to use to separate lines of text in ye olde days \u2014 by placing bars of  lead between the lines.   <\/li><li> <em><strong>Padding<\/strong><\/em><br \/>       Generally speaking text should never touch other elements. Images,  for example, should not be touching text, neither should borders or  tables.<br \/>   Padding is the space between elements and text. The simple rule here is that you should <em>always<\/em> have space there. There are exceptions of course, in particular if the text is some sort of heading\/graphic or your name is David Carson \ud83d\ude42 But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant.<\/li><li> <strong>White Space<\/strong><br \/>     First of all, white space doesn&#8217;t need to be white. The term simply  refers to empty space on a page (or negative space as it&#8217;s sometimes  called). White space is used to give balance, proportion and contrast to  a page. A lot of white space tends to make things seem more elegant and  upmarket, so for example if you go to an expensive architect site,  you&#8217;ll almost always see a lot of space. If you want to learn to use  whitespace effectively, go through a magazine and look at how adverts  are laid out. Ads for big brands of watches and cars and the like tend  to have a lot of empty space used as an element of design. <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><em>Further Reading:<\/em><\/h4>\n\n\n\n<p><em>At WebDesignFromScratch there is a great article called the Web 2.0 how-to design guide, which discusses Simplicity &#8211; a concept that makes a lot of use of spacing. There&#8217;s plenty of other useful stuff there too!<\/em> <br \/><\/p>\n\n\n\n<p>Noodlebox does a good job of using on\/off states in their navigation to keep the user oriented.\n\n<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" src=\"https:\/\/tpc.googlesyndication.com\/safeframe\/1-0-32\/html\/container.html\" width=\"300\" height=\"250\"><\/iframe><\/figure>\n\n\n\n<p>Advertisement<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n3. Navigation<\/h2>\n\n\n\n<p>One of the most frustrating experiences you can have on a Web site is\n being unable to figure out where to go or where you are. I&#8217;d like to \nthink that for most Web designers, navigation is a concept we&#8217;ve managed\n to master, but I still find some pretty bad examples out there. There \nare two aspects of navigation to keep in mind: <\/p>\n\n\n\n<p><strong>Navigation \u2014 Where can you go?<\/strong> <br \/>\nThere are a few commonsense rules to remember here. Buttons to travel \naround a site should be easy to find &#8211; towards the top of the page and \neasy to identify. They should look like navigation buttons and be well \ndescribed. The text of a button should be pretty clear as to where it&#8217;s \ntaking you. Aside from the common sense, it&#8217;s also important to make \nnavigation usable. For example, if you have a rollover sub-menu, \nensuring a person can get to the sub-menu items without losing the \nrollover is important. Similarly changing the color or image on rollover\n is excellent feedback for a user. <\/p>\n\n\n\n<p><strong>Orientation \u2014 Where are you now?<\/strong><br \/> There are lots of ways you can orient a user so there is no excuse not  to. In small sites, it might be just a matter of a big heading or a  &#8216;down&#8217; version of the appropriate button in your menu. In a larger site,  you might make use of bread crumb trails, sub-headings and a site map for the truly lost. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><em>Further Reading:<\/em><\/h4>\n\n\n\n<p>SmashingMagazine has a selection of CSS-based navigation styles which are nice to go through, and #3 is one of mine! A List Apart also has a good article about orientation called Where Am I? <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n4. Design to Build<\/h2>\n\n\n\n<p>Life has gotten a lot easier since Web designers transitioned to CSS \nlayouts, but even now it&#8217;s still important to think about how you are \ngoing to build a site when you&#8217;re still in Photoshop. Consider things \nlike:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\n<strong>Can it actually be done?<\/strong><br \/>\n    You might have picked an amazing font for your body copy, but is it \nactually a standard HTML font? You might have a design that looks \nbeautiful but is 1100px wide and will result in a horizontal scroller \nfor the majority of users. It&#8217;s important to know what can and can&#8217;t be \ndone, which is why I believe all Web designers should also build sites, \nat least sometimes. <\/li><li>\n<strong>What happens when a screen is resizes?<\/strong> <br \/>\n    Do you need repeating backgrounds? How will they work? Is the design centered or left-aligned?\n  <\/li><li>\n<strong>Are you doing anything that is technically difficult? <\/strong><br \/>\n  Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided.<\/li><li>\n<strong>Could small changes in your design greatly simplify how you build it?<\/strong> <br \/>\n  Sometimes moving an object around in a design can make a big \ndifference in how you have to code your CSS later. In particular, when \nelements of a design cross over each other, it adds a little complexity \nto the build. So if your design has, say three elements and each element\n is completely separate from each other, it would be really easy to \nbuild. On the other hand if all three overlap each other, it might still\n be easy, but will probably be a bit more complicated. You should find a\n balance between what looks good and small changes that can simplify \nyour build. <\/li><li>\n<strong>For large sites, particularly, can you simplify things?<br \/>\n  <\/strong>There was a time when I used to make image buttons for my \nsites. So if there was a download button, for example, I would make a \nlittle download image. In the last year or so, I&#8217;ve switched to using \nCSS to make my buttons and have never looked back. Sure, it means my \nbuttons don&#8217;t always have the flexibility I might wish for, but the \nsavings in build time from not having to make dozens of little button \nimages are huge. <\/li><\/ul>\n\n\n\n<p>If anyone knows good type it&#8217;s iLoveTypography!\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n5. Typography<\/h2>\n\n\n\n<p>Text is the most common element of design, so it&#8217;s not surprising \nthat a lot of thought has gone into it. It&#8217;s important to consider \nthings like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\n<strong>Font Choices \u2014<\/strong> Different types of fonts say different \nthings about a design. Some look modern, some look retro. Make sure you \nare using the right tool for the job.<\/li><li> <strong>Font sizes \u2014<\/strong>Years ago it was trendy to have really\n small text. Happily, these days people have started to realize that \ntext is meant to be read, not just looked at. Make sure your text sizes \nare consistent, large enough to be read, and proportioned so that \nheadings and sub-headings stand out appropriately.<\/li><li> <strong>Spacing \u2014<\/strong> As discussed above, spacing between \nlines and away from other objects is important to consider. You should \nalso be thinking about spacing between letters, though on the Web this \nis of less importance, as you don&#8217;t have that much control. <\/li><li>    <strong>Line Length \u2014<\/strong> There is no hard and fast rule, \nbut generally your lines of text shouldn&#8217;t be too long. The longer they \nare, the harder they are to read. Small columns of text work much better\n (think about how a newspaper lays out text). <\/li><li>    <strong>Color \u2014<\/strong> One of my worst habits is making \nlow-contrast text. It looks good but doesn&#8217;t read so well, \nunfortunately. Still, I seem to do it with every Web site design I&#8217;ve \never made, tsk tsk tsk. <\/li><li> <strong>Paragraphing \u2014<\/strong> Before I started designing, I loved\n to justify the text in everything. It made for nice edges on either \nside of my paragraphs. Unfortunately, justified text tends to create \nweird gaps between words where they have been auto-spaced. This isn&#8217;t \nnice for your eye when reading, so stick to left-aligned unless you \nhappen to have a magic body of text that happens to space out perfectly.\n <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><em>Further Reading:<\/em><\/h4>\n\n\n\n<p><em>Nick La at WebDesignerWall has a great article about online typography called Typographic Contrast and Flow <\/em>.<br \/><\/p>\n\n\n\n<p>Happycog know usability inside out, and their own site is simple and easy to use.\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n6. Usability<\/h2>\n\n\n\n<p>Web design ain&#8217;t just about pretty pictures. With so much information\n and interaction to be effected on a Web site, it&#8217;s important that you, \nthe designer, provide for it all. That means making your Web site design\n usable. <\/p>\n\n\n\n<p>We&#8217;ve already discussed some aspects of usability &#8211; navigation, precedence, and text. Here are three more important ones:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li> <strong>Adhering to Standards<\/strong><br \/>     There are certain things people expect, and not giving them causes  confusion. For example, if text has an underline, you expect it to be a  link. Doing otherwise is not good usability practice. Sure, you can  break some conventions, but most of your Web site should do exactly what  people expect it to do!<\/li><li> <strong>Think about what users will actually do<br \/>   <\/strong>Prototyping  is a common tool used in design to actually &#8216;try&#8217; out a design. This is  done because often when you actually use a design, you notice little  things that make a big difference. ALA had an article a while back  called Never Use a Warning When You Mean Undo, which is an excellent example of a small interface design decision that can make life suck for a user. <\/li><li> <strong>Think about user tasks<\/strong><br \/>     When a user comes to your site what are they actually trying to do?  List out the different types of tasks people might do on a site, how  they will achieve them, and how easy you want to make it for them. This  might mean having really common tasks on your homepage (e.g. &#8216;start  shopping&#8217;, &#8216;learn about what we do,&#8217; etc.) or it might mean ensuring  something like having a search box always easily accessible. At the end  of the day, your Web design is a tool for people to use, and people  don&#8217;t like using annoying tools! <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><em>Further Reading: <\/em><\/h4>\n\n\n\n<p><em>AListApart has lots of articles on web usability. <\/em><br \/><\/p>\n\n\n\n<p>\nElectric pulp manages to look rough, but if you look closely you realize there is a firm grid and things actually all line up. \n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n7.  Alignment <\/h2>\n\n\n\n<p>Keeping things lined up is as important in Web design as it is in print design. That&#8217;s not to say that <em>everything<\/em>\n should be in a straight line, but rather that you should go through and\n try to keep things consistently placed on a page. Aligning makes your \ndesign more ordered and digestible, as well as making it seem more \npolished.<\/p>\n\n\n\n<p>You may also wish to base your designs on a specific grid. I must  admit I don&#8217;t do this consciously &#8211; though obviously a site like  Psdtuts+ does in fact have a very firm grid structure. This year I&#8217;ve  seen a few really good articles on grid design including  SmashingMagazine&#8217;s Designing with Grid-Based Approach &amp;  A List Apart&#8217;s Thinking Outside The Grid. In fact, if you&#8217;re interested in grid design, you should definitely pay a visit to the aptly named themecentury.com home to all things griddy. <br \/><\/p>\n\n\n\n<p>\nThe ExpressionEngine site is the soul of clarity. Everything is sharp and clean.\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n8. Clarity (Sharpness)<\/h2>\n\n\n\n<p>Keeping your design crisp and sharp is super important in Web design. And when it comes to clarity, it&#8217;s all about the pixels. <\/p>\n\n\n\n<p>In your CSS, everything will be pixel perfect so there&#8217;s nothing to \nworry about, but in Photoshop it is not so. To achieve a sharp design \nyou have to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Keep shape edges snapped to pixels. This might involve manually \ncleaning up shapes, lines, and boxes if you&#8217;re creating them in \nPhotoshop.<\/li><li>Make sure any text is created using the appropriate anti-aliasing setting. I use &#8216;Sharp&#8217; a lot.<\/li><li>Ensuring that contrast is high so that borders are clearly defined.  <\/li><li>Over-emphasizing borders just slightly to exaggerate the contrast. <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><em>Further Reading: <\/em><\/h4>\n\n\n\n<p><em>I wrote a bit more about clarity in Elements of Great Web Design &#8211; the polish. I&#8217;ve noticed that print designers transitioning to Web design, in particular, don&#8217;t think in pixels, but it really is vital. <\/em><br \/><\/p>\n\n\n\n<p>\nVeerle does a great job of keeping even the tiniest details consistent across the board.\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\n9. Consistency<\/h2>\n\n\n\n<p>Consistency means making everything match. Heading sizes, font \nchoices, coloring, button styles, spacing, design elements, illustration\n styles, photo choices, etc. Everything should be themed to make your \ndesign coherent between pages and on the same page.<\/p>\n\n\n\n<p>Keeping your design consistent is about being professional. \nInconsistencies in a design are like spelling mistakes in an essay. They\n just lower the perception of quality. Whatever your design looks like, \nkeeping it consistent will always bring it up a notch. Even if it&#8217;s a \nbad design, at least make it a consistent, bad design. <\/p>\n\n\n\n<p>The simplest way to maintain consistency is to make early decisions  and stick to them. With a really large site, however, things can change  in the design process. When I designed FlashDen,  for example, the process took months, and by the end some of my ideas  for buttons and images had changed, so I had to go back and revise  earlier pages to match later ones exactly. <\/p>\n\n\n\n<p>Having a good set of CSS stylesheets can also go a long way to making\n a consistent design. Try to define core tags like &lt;h1&gt; and \n&lt;p&gt; in such a way as to make your defaults match properly and \navoid having to remember specific class names all the time. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web design can be deceptively difficult, as it involves [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[53,54,55,94,114],"class_list":["post-2950","post","type-post","status-publish","format-standard","hentry","category-news-update","tag-design","tag-design-lover","tag-essential-principles","tag-principles","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/millionairemag.net\/index.php?rest_route=\/wp\/v2\/posts\/2950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/millionairemag.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/millionairemag.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/millionairemag.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/millionairemag.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2950"}],"version-history":[{"count":0,"href":"https:\/\/millionairemag.net\/index.php?rest_route=\/wp\/v2\/posts\/2950\/revisions"}],"wp:attachment":[{"href":"https:\/\/millionairemag.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/millionairemag.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/millionairemag.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}