Headers
We had feedback that the header/nav wasn't consistent across the site so I tidied that up, updated the logo from an image to a text-only logotype. Using the fonts Rena had used when creating the infographic, I created two options for our group to consider and vote on. We all agreed that the first option looked best.
Structural elements
I set-up the following pages/sections:- breadcrumbs on all pages
- profile page (editing feature to come later)
- footer on all pages with copyright info (+ footer styles)
- separated the landing page (index.html) where users log-in/sign-up from the home page (home.html) where users browse and select websites to restore
- style log-in/sign-up box on index.html
- moved save/publish to bottom of page (from feedback) on working_panel.html
- created gallery page with lightbox
- used bootstrap's modal to get the lightbox working
- created 'who we are page'
- created a help page and filled with intro content
- created 'getting started' page and filled with dummy content
Home.html/categories
To set-up the categories and websites to choose from on the home page, we looked at a tab layout provided in bootstrap and considered different ways to incorporate images from trove. Rather than repeating the content within html, I looked into using AngularJS repeating function. I used stock images from http://www.fillmurray.com/ and http://www.placecage.com/ to populate the content and took a screen recording of the two category tab options to present to the team.
We decided to go with the second option in the video with the long image taking up the width of the container. After we tested this format, I then made a few style changes (3 col layout, tabs more readable).
We decided to go with the second option in the video with the long image taking up the width of the container. After we tested this format, I then made a few style changes (3 col layout, tabs more readable).
No comments:
Post a Comment