Difference between revisions of "Good v. Bad Web Design"

From Digibase Knowledge Base
Jump to: navigation, search
(Created page with "==Preface== Web design is the "UI" (User Interface) part of a website, and deals almost exclusively with the page structure, graphics, test and other elements. Good design pra...")
 
m
Line 4: Line 4:
 
==Link Buttons==
 
==Link Buttons==
 
<html>
 
<html>
 +
<div style='text-align: center;' align='center'>
 
<div style='padding: 20px; background-color: #555555; color: white; display: inline-block; border: 1px solid black;'>
 
<div style='padding: 20px; background-color: #555555; color: white; display: inline-block; border: 1px solid black;'>
 
<a href='#' style='color: white'>Don't do this...</a>
 
<a href='#' style='color: white'>Don't do this...</a>
 +
</div>
 +
<a href='#' style='padding: 20px; background-color: #555555; color: white; display: inline-block; border: 1px solid black;'>Do this...</a>
 
</div>
 
</div>
 
</html>
 
</html>
  
 +
If you are designing a page with links that appear to be buttons, be sure to always allow the whole button to be clickable, not just the text caption on the button. This is an important usability element as people expect buttons to be clickable anywhere. Try hovering over the above two buttons to see how they differ, focusing on the outer edges.
 +
 +
==Coloured Input Boxes==
 
<html>
 
<html>
<a href='#' style='padding: 20px; background-color: #555555; color: white; display: inline-block; border: 1px solid black;'>Do this...</a>
+
<div style='text-align: center;' align='center'>
 +
 
 +
<input style='background-color: white' value="Don't do this!">
 +
 
 +
<input style='background-color: white; color: black' value="Do this!">
 +
</div>
 
</html>
 
</html>
  
 +
It may not seem apparent immediately if you're using a fairly stock operating system but if you give your inputs, textareas, etc a background, always be sure to colour the foreground. Otherwise on high contrast white (text) on black (background) themed computers, your textboxes will look like this:
 +
 +
<html>
 +
<div style='text-align: center;' align='center'>
 +
<input style='background-color: white; color: white' value="Don't do this!">
 +
</div>
 +
</html>
  
If you are designing a page with links that appear to be buttons, be sure to always allow the whole button to be clickable, not just the text caption on the button.
+
As seen, it is completely unreadable without highlighting the contained text. The same principle applies if you colour your foreground but not your background, again, your textboxes may result in:
  
==Infinite Scrolling==
+
<html>
 +
<div style='text-align: center;' align='center'>
 +
<input style='background-color: black; color: black' value="Don't do this!">
 +
</div>
 +
</html>

Revision as of 07:54, 29 January 2014

Preface

Web design is the "UI" (User Interface) part of a website, and deals almost exclusively with the page structure, graphics, test and other elements. Good design practices follow a set of routines that improve usability and stability of a website. This article will outline good practices of what to do and what not to do.

Link Buttons

Do this...

If you are designing a page with links that appear to be buttons, be sure to always allow the whole button to be clickable, not just the text caption on the button. This is an important usability element as people expect buttons to be clickable anywhere. Try hovering over the above two buttons to see how they differ, focusing on the outer edges.

Coloured Input Boxes

It may not seem apparent immediately if you're using a fairly stock operating system but if you give your inputs, textareas, etc a background, always be sure to colour the foreground. Otherwise on high contrast white (text) on black (background) themed computers, your textboxes will look like this:

As seen, it is completely unreadable without highlighting the contained text. The same principle applies if you colour your foreground but not your background, again, your textboxes may result in: