Difference between revisions of "Good v. Bad Web Design"
(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> | ||
| − | < | + | <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> | ||
| − | + | 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: | |
| − | == | + | <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 06: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
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:
