<
# A4: Update Mockups and Style
## Assignment Description
Update your mockups to incorporate a more complicated design elements. Reference the given designs to update your demo site mockups in photoshop.
## Instructions
1. Find the reference design specifications (specs) in the [specs](specs/) folder
1. Recreate the designs in Photoshop
- Make a copy your previous photoshop file and adapt the design to match the new specs.
- Use the eye dropper tool to sample colors from the designs
- Make a quick logo to put as your home link in the navigation.
- Add background images behind your hero sections. The images are found in the [images](images/) folder)
- on the coffee page, add the pricing information.
- on the search page, add the search form, video thumbnail, and map
1. Save out each mockup as a flat PNG
- right click on your artboard, select `Quick Export as PNG`
- name your files: `home.png, about.png, coffee.png, search.png, assignments.png`
1. Upload and turn in your mockups
- Log into cloud 9
- Upload your mockups to the `assignment-4/images` folder
- Once uploaded, you should be able to view all your mockups by opening your `assignment-4/index.html` file.
- Turn in
## Requirement Checklist:
- Can you access the assignment mockups online? `https://{username}.github.io/web1/assignment-4`
- Are the images saved as .png not .psd files?
- Are there 5 mockups? home, about, coffee, search, and assignments?
- Does the content on each mockup generally match the [example images](specs/)?
- Check the home page:
- Is there a new logo in the nav?
- Is there a rounded outline button to go to about me?
- Are there 3 cards with drop shadows?
- Does the footer exist with yellow links?
- Check the coffee page:
- Are the prices listed to the right of each menu item?
- Are the descriptions italicized and a slightly lighter gray?
- Check the assignments page:
- Are the assignment titles blue and underlined?
- Is there consistent spacing between each set of assignments?
]]>