14. As a user, I want the app to look professional and welcoming

[fullybaked]

Summary

The last 2 weeks of the project will function a little differently than the rest. Your team will self-organize around a lightweight design process to come up with a polished look-and-feel for your app.

This will require you to make decisions together as a whole team, then implement your vision. The process outlined here is our best suggestion for how to proceed, but you are free to take whatever approach you see fit!

You’ll notice this is the last issue on the board! That’s because the expectation is for you to write the stories needed to complete the implementation of your design direction.

As always, lean on your mentors for guidance if you are unsure how to proceed!

Design Process

1. What is the tone you’re going for? What feeling are you trying to convey? Come up with 3 to 5 words that best capture how you want users to perceive your app.

• Examples:
  • Fun
  • Clean
  • Ironic
  • Businesslike
  • Many more example words

2. Create a mood board. A mood board helps everyone get on the same page in terms of the direction in which you want to take your design. Add elements to your mood board that represent the tone you’re trying to achieve.
3. Decide on fundamental elements of your design, including the following:

• Typography ← Google Fonts is a good choice for finding web fonts you can use in your app. They have hundreds of typefaces to choose from, but consider usability in whichever one(s) you choose!
• Colors ← Make sure these are accessible!
• Iconography / imagery ← Start here to find free icons you can use in your app!

4. Decide whether you want to code your CSS from scratch or integrate a CSS framework. There are pros and cons to each!

• Vanilla CSS gives you more control, but it can be harder and/or take more time to achieve a given effect.
• Frameworks help you get things done faster, but often at the cost of not giving you full control of the design.

5. If you choose to use a framework, evaluate your options to make sure you pick one that will suit your needs.

• Consider the following:
  • Quality of documentation
  • Ease of integration
  • Built with accessibility in mind
  • Activeness of the community
• Quality frameworks you might consider include the following:
  • Bootstrap
  • Chakra UI
  • Material UI
  • Semantic UI
  • TailwindCSS

Sub-issues

• List Name Button Redirect #31
• As a user, I want to be able to see the date info for each item in a list.  #33
• As a user, I want to be able to click between empty spaces on the page without unintended checkbox toggling. #36
• [AM] Bug Fix For listPath #41
• [AM] Clear localStorage on signout, redirect to home #43
• Improve dialog status messages for sharing list #45
• Turn add item into dialog #46
• Add Footer #49
• Create landing page #55
• Create 'About' Page #53
• Restrict Route Access  #51
• On About page, swap out temporary app name with 'Aisle Be There' #59
• Fix bug for items search bar #60
• Alert user: "/" not allowed in List name #63
• Add the ability to delete lists #65
• Change App Name on Landing Page #66
• Only use "+" button for adding items #68
• Clean up display of list items and sub-lists #70
• Refactoring List.jsx for readability and maintenance  #72
• [JH] Refactor list items from List to ManageList #78
• Change footer heart color #76
• Stylize the Navbar #80
• [JH] Update Link location in SingleList #81