Theme and develop a design guide for an online website. Deliverable will include:
- Develop a concept/brand for your product or service and represent the following:
- Decide on products or services to sell and come up with a company/store name
- Develop a colour scheme for your brand
- For each colour, also consider an alternate shade for tone, as well as the "on" colour for foreground text/icons
- Also consider colour values for errors, alerts, or other major events that might be part of an application in an alternative state (if this was made functional)
- Create a logo (vector image preferred if possible)
- You may also consider designing this with HTML/CSS
- Choose appropriate fonts (1-3 is usually preferred)
- Demonstrate how the fonts will be used, ie, show a sample heading, paragraph, labels, etc.
- Collect images for your products, add them to an
img/
folder in your project
- (OPTIONAL) Use a vector-based drawing applications to create icons for all of the following that apply (you may not need all, or may add more) that match your selected theme, storing each as an appropriately named
.svg
image file:
- Open menu
- Close menu
- Search
- "Favourite" an item
- As well as "Add to favourite" (may be the same)
- Cart/basket
- As well as "Add to cart" (or purchase)
- Rating symbol (like a star or heart - be creative)
- Only required if using a symbol to indicate rating (vs a number, or another scale)
- Consider partially filled symbols as well
- "See more"
- "Sort by"
- You may consider an icon for both "Ascending" and "Descending" ordered lists
- Contact
- Social media icons
- You may use existing versions and modify if necessary to make uniform
- Product specific icons (depending on what your product/service is)
- For the properties of the items, for example: colour, size, quantity, etc
- Design form components that match your theme, exporting them all together as a single vector based
.svg
image files, for at least the following:
- Text input
- Both for line input and multi-line input
- Include "placeholder" design
- Include what an "error" looks like for a field
- Include what the field looks like when disabled
- Buttons
- Create a regular action button, as well as a high-priority button (like a "buy now")
- Include what the buttons look like when disabled
- Search
- both input field and a button
- If you have a "clear" icon, be sure to include that
- Drop down
- Optionally, you can decide to only style the undropped select, not the option list that unfolds when clicked
- Include what this looks like when disabled
- Checkbox and radio buttons
- Be sure to show both "checked" and not checked
- Include what they looks like when disabled
- Labels
- If labels are different when on the side vs above a component, show both
- Other (optional)
- Colour pickers, date pickers, range sliders, etc. No requirement here, but if necessary for your concept, please include it here.