Recently our programming novices were working on our Monster Mashup Processing app and it seemed appropriate (and fun!) to tie this into the popular Halloween song Monster Mash. Our web design novices were then tasked to style the lyrics to the song using techniques we've learned so far in web design class.
Some of their work is show below along with 'upgrades' we provided after initial evaluation. See what you can learn by comparing and contrasting the various designs.
No Bootstrap was incorporated into the designs (yet).
Important Design/Evaluation Criteria
These are common evaluation criteria we use when examining novice work
| Concept | Comments |
|---|---|
| HTML Validation | HTML must be structurally sound |
| CSS Validation | CSS must comply with accepted standards |
| Code Indentation and Layout | The browser doesn't care but we care! (It helps with troubleshooting!) Using carefully-selected spacing and alignments of elements make it easier to see a problem in a design |
| Title | Every page should have a meaningful title in the head of the document |
| Visual Impact | First impressions are important; what is the first impression you get when viewing a page? |
| CRAP Rule | These are important design principles that should be considered with every page |
| Imagery |
Images dress up a design, whether placed with In this project, some students found some great artwork at FlatIcon. |
| Font Use | Thematic fonts - probably 1-3 or so work well. Typically, they are sans-serif in nature. Google Fonts are easy to use! |
| Extras? | Students often forget to add elements that elevate their design:
|
| Responsive design | Recent statistics about mobile internet use punctuate the fact that we must make sure our pages look good in a mobile setting! |
| Professionalism | Watch for spelling, copy/paste errors, orphaned code, and bloated CSS to name a few |
Monstrous Mistakes Faux Pas
These are some common errors novices make with their web page designs! Don't you make these grave mistakes!
- Using
brtags for vertical spacing. They add unnecessary bloat to a page: use CSS margin or padding to separate content - Using width and/or height attributes for image sizing: use CSS instead
- Using border attributes rather than CSS
- Be cautious about putting everything in a border-box. That can take on a juvenile look
- Forgetting to check a design in a wide range of browser widths and heights. A page should look good with all geometries!
- Forgetting to use a
mainordivelement to house content that needs to be aligned to the browser window - Failure to use semantic elements when they are called for
- Inconsistencies of coding styles
- Failure to use
property="value"type constructions with HTML attributes - Using Sentence Case for a variable, id or class name in CSS
- CSS: Using classes when ids are warranted and vice-versa; using a class to style an element when a tag style would do. Remember that giving an element an
id(preferably located next to its name) gives you leverage in styling and in applying JavaScrip behavior) - Failure to use top-down CSS design leading to over-styled, bloated CSS. (Example: if all your fonts are "Times New Roman" you don't have to style each paragraph as such. Just style a single p tag, or choose an overall
bodyfont style - Failure to utilize white-space and 'breathe-ability' into a design
- Failure to use 'transparent background images' when they are available
- Violating the 'Less is More' principle
