lectures.alex.balgavy.eu

Lecture notes from university.
git clone git://git.alex.balgavy.eu/lectures.alex.balgavy.eu.git
Log | Files | Refs | Submodules

webpage-design.html (2591B)

      1 <html>
      2 <head>
      3     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
      4     <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
      5     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
      6     <link rel="Stylesheet" type="text/css" href="style.css" />
      7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      8     <script>
      9       document.addEventListener('DOMContentLoaded', function() {
     10         document.querySelectorAll('pre.code').forEach(function(item) {
     11           hljs.highlightBlock(item)
     12         })
     13       });
     14     </script>
     15     <title>webpage-design</title>
     16 </head>
     17 <body>
     18 <style type="text/css">
     19 nav a {
     20     text-align: left;
     21 }
     22 nav #name {
     23     text-align: right;
     24     float: right;
     25     font-style: italic;
     26 }
     27 </style>
     28     <nav>
     29     <a href="index.html">Index</a>
     30     <span id="name">Alex Balgavy</span>
     31     </nav>
     32     <hr>
     33     <div class="content">
     34     
     35 <div id="Webpage design"><h2 id="Webpage design" class="header"><a href="#Webpage design">Webpage design</a></h2></div>
     36 <p>
     37 people rarely read websites, and they teleport from search engines to any page.
     38 so any page should be a plausible starting point.
     39 people have a goal on the page, they don't give a fuck about how beautiful it is (unless it's so ugly that it's unusable).
     40 also, they hate scrolling when they're looking for something. users are lazy.
     41 </p>
     42 
     43 <p>
     44 people ignore banners, image carousels, anything that resembles advertising.
     45 </p>
     46 
     47 <p>
     48 guidelines:
     49 </p>
     50 <ul>
     51 <li>
     52 don't break conventions
     53 
     54 <li>
     55 create visual hierarchies and structure
     56 
     57 <li>
     58 make obvious what's clickable
     59 
     60 <li>
     61 always make a short summary, people are lazy
     62 
     63 </ul>
     64 
     65 <p>
     66 navigation:
     67 </p>
     68 <ul>
     69 <li>
     70 make it clear where people are &amp; where they can go
     71 
     72 <li>
     73 information must be available everywhere
     74 
     75 </ul>
     76 
     77 <p>
     78 Menus:
     79 </p>
     80 <ul>
     81 <li>
     82 desktop
     83 
     84 <ul>
     85 <li>
     86 put them across the top or on the left
     87 
     88 <li>
     89 don't use hidden navigation
     90 
     91 </ul>
     92 <li>
     93 mobile
     94 
     95 <ul>
     96 <li>
     97 if only few items, put them at the top
     98 
     99 <li>
    100 always show <em>most important</em> items
    101 
    102 <li>
    103 provide support to help people find the hamburger
    104 
    105 </ul>
    106 </ul>
    107 
    108 <p>
    109 alignment:
    110 </p>
    111 <ul>
    112 <li>
    113 text: depending on language, most of the time left
    114 
    115 <li>
    116 names: make scanning for surnames easy
    117 
    118 <li>
    119 numbers: align decimal points, or right-align integers. depends on purpose.
    120 
    121 </ul>
    122 
    123 <p>
    124 use whitespace smartly, to delineate/separate/structure, but also to highlight.
    125 </p>
    126 
    127     </div>
    128 </body>
    129 </html>