Today’s Goals:

• Finish website design evaluations and begin HTML review

 Today’s Featured Site:

• http://mylacroix.com/– Style your own can of fancy sparkling water!

 Design Evaluations (from Thursday)

2016 Web Design Trends

• Trends include: Bold use of text, animations, vibrant colors, illustrations, minimalist design, and long scrolling (from UXPin.com)
• Example sites:
  • http://le-mugs.com/en/
  • http://www.ot-24.co.uk/
  • http://dreamteam.pl/
  • http://www.vitosalvatore.com/
  • http://www.mdmoch.com/
  • http://www.blizeyewear.com/uls
  • http://www.creationsnamale.com/
  • http://www.makemepulse.com/
• Evaluate sites:
  • Load time– is the site fast or does it take a long time to load?
  • Interaction– how do you get through the site- scrolling, clicking, or using a menu?
  • Colors– dark or light pallete? Do the colors go well together?
  • Typography– how is text size, font, and placement used to guide you through the site?
  • Visual organization– is the site cluttered or busy? Is empty or blank space used to create visual balance?
  • Mobile-friendly/responsive– shrink your browser window to see how the site adjusts itself to smaller screen sizes AND then try it on your phone (are the animations as smooth? does that site take longer to load? what else do you notice?)

 HTML Review

• Important things to know: How to set up a webpage (basic tags, saving and opening correctly, edit with Notepad++) and commonly used tags to add links, insert images, create paragraphs and headlines, make bullets, add line breaks, and add favicons.
• You will have the entire class today and tomorrow to review HTML at your own pace by creating a webpage on a topic of your choice.
• You must follow the instructions below and include everything listed. Here is my example (just an image, links not clickable)
1. Come up with a topic (5-10 minutes)
2. Plan your content: images, text, links. Decide what you want, download and save image(s) you want to use, and save text and link(s) somewhere that you can easily find later (Google doc, Notepad, desktop note, etc.) (10-15 minutes)
3. Code help and hints: Look at your previous projects and try W3Schools.com
4. Open Notepad++
5. Set up a basic webpage with the following opening and closing tags: html, head, title, and body.
6. Save your page in a folder on your computer; make sure to save any images here, too
7. Add a page title that describes what your page is about
8. Add a headline at the top of your page
9. Change your page background color
10. Somewhere on your page you will need one of each of the following: an image, a link to a website, bullets, text in paragraph tags, and a line break.
11. Get images from the following places ONLY: https://stock.tookapic.com/, https://unsplash.com/, https://www.pexels.com/, or Bing.com (do image search, then search for free to share and use). Resize images in Pixlr.com.
12. Add a favicon: you will need a 16 x 16 pixel image and the correct code linking the image in your head section
13. Extra credit HTML: Embed a video, use Font Awesome, add a small table (look at your other pages to get code and/or review how to do this)
14. Extra credit CSS: See if you can figure out how to give your text a shadow by checking out this example
15. Extra credit CSS: See if you can change your font by checking out these examples
16. When you’re done: Read through web design in 4 minutes.