CSCI 499 Unit #2

HikerBuddy Examples

These three sites stood out:

• Hiking Buddy #1
• Hiking Buddy #2 (first trail links to detail page)
• Hiking Buddy #3

And a few more interesting ideas:

Purpose

• Understand the importance of structure and color in website design
• Review and practice using css

Chapter 3 - Reading Assignment

Read:

• Mind in Mind Chapter 3

No chapter summary required, topics explored in programming assignment.

Chapter 4 - Reading Assignment

Read:

• Mind in Mind Chapter 4
• https://neilpatel.com/blog/psychology-of-color-and-conversions/
• https://getflywheel.com/layout/website-color-schemes/

Create a Chapter Summary for this material.

Briefly view these color scheme sites:

• http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
• https://coolors.co/
• https://www.canva.com/colors/color-wheel/
• https://color.adobe.com/explore/?filter=most-popular&time=month

Chapter question (add to your summary): Which of these sites do you like best? Why? No right answer! It's useful to have a familiar site for making color choices.

Extra Material. It's good to be aware of color blindness issues. Try out this site: https://www.toptal.com/designers/colorfilter and skim the related site: https://css-tricks.com/accessibility-basics-testing-your-page-for-color-blindness/. Nothing to submit.

Chapters 3 and 4 - Programming Assignment:

A client has asked you to create a website to connect people who want to hike. They have a rough idea of what they want, as defined by this web page.

Your task: design a page (or pages) to illustrate a possible UI (no backend functionality) for the Hiker Buddy app. Your page may include lists of hikes, form(s) to find commonality, form(s) to set dates for specific hikes, and any other features you think might be useful.

Underlying purpose: apply as many of the guidelines from chapters 3 and 4 you can. Note that my list is intentionally vague... the exact functionality is up to you!

A common technique in prototyping is to hardcode data, so the client (me, in this case) can better imagine how the app will work. For example:

• If you have a table of hikes, hardcode a small number of hikes with sample detail.
• If you have a list of existing users, hardcode a few names (plus other data you think is important,like email, phone, etc.). The data should look realistic (e.g., Mickey Mouse, mmouse@gmail.com, not X with email woieu).
• If you have a drop-down, such as for type of hike, include meaningful options.

I should be able to look at your page(s) in the browser and really imagine how the app would work. To assist me in evaluating your work, create a README that a) lists which which principles from Chapter 3 were applied (and how, if not obvious) and b) explains your color choice.

Submit

Zip your chapter 4 document, README file and all program files (html and css, image files if used) and submit on Canvas. The name of your file should be [yourLastName]Unit2 (e.g., RaderUnit2.zip).

Evaluation

The chapter summary/question should be clear and thoughtful. I love to hike, so I'm hoping your program looks like something I might want to use.

Separate grades will be assigned for HikerBuddy and chapter 4.