Creating a full design for a website takes a lot of experience and specialized knowledge. You'll get an introduction to this in the UX/UI Design module, if you're interested in design can continue practicing by creating the designs for your group projects. If you're not so interested in design you should still learn how to draw a wireframe.
A wireframe is a simplified drawing of what your website will look like. Wireframes don't have any real text, images, or design. The idea is just to lay out the basic skeleton of your site and to make sure that your group agrees on what to build.
Use your Backlog as a guide when designing your wireframe. Make sure that your must-have user stories are in the wireframe. You can also include your should haves into the wireframe, but could-haves aren't necessary. Take a look at this wireframe from Class 13-14 for inspiration. Imagine how helpful it would be to have one of these for your group project!
Pencil and Paper are a great way to get started with your project's wireframes! When you want to go digital here's two websites you can try to create simple wireframes: Excalidraw, wireframe.cc. If you want to get fancy with your wireframes or have a more collaborative design then Figma is a good option.
A wireframe can be as simple as this:
You can also use the design.md file to organize other aspects of your design
such as:
- color palates
- fonts
- icons
- CSS units and measures
- ...
# Design
<!-- give an overview of your project's design -->
<!-- describe the reasoning behind your group's design and wireframe -->
<!-- include other centralized decisions like fonts, palates, ... -->
---
## Wireframe(s)
<!-- provide a link to your wireframe documenting on Figma, or wherever it is -->
[link to wireframe]()