BDGASTORE.COM Proposed Interface Changes (aesthetic) (Walkthrough w/ Explanations)
1
GENERAL/HOMEPAGE INFORMATION Notes: + All Type is set in Open Sans + Nav Bar is extended (new grid alignment) + Nav Bar now includes a soundcloud player for pirate radio + Landing Page now includes new arrivals + Footer container is now a full black with white knockout text and items are redesigned in new order (from left to right - quick links then customer support then locations then newsletter. Below are the accepted payment methods and copyright)
2
3
Login / Signup Page
Popdown Menu (footwear)
Notes:
Notes:
+ Separate returning users from new users
+ Shaped like a folder with “shop now� button in green in the call out
+ Keep the login from separate account feature + Use new green color for call of action throughout the site (#51B266) and remove red where capable + Overlay darker background
+ Sections are given more baseline space (leading) + The three shown products should be featured new arrivals + Should be an animated pushdown bar
+ Once Logged in user will see their name in nav bar where the log in button was
4
5
Categories Page (footwear) Notes:
Selected Filter Notes:
+ Filter bar is collapsed
+ horizontal buttons become bolder and darker when selected
+ Organization feature is now in the top right hand corner + No more guides/rules that run across the screen
+ Small squares (color, brands, and size filters) become slashed diagonally when selected
+ Filter section also includes categories (ex. footwear > athletic)
+ Filter can still be collapsed / partially collapsed (even with selected filters)
6
7
Popdown Menu (Brands
Editorial Page (Landing)
Notes:
Notes:
+ Now 3 columns that have far wider containers (to accommodate the longer brand names like “Bedwin & the Heartbreaks” )
+ Images are now the full width of container
+ Only sharing featured brands
+ Type sits in a black partial opacity box that hugs the right side of the container in the image - type is in white
+ Design treatment is now consistent in all the popdown menus (same folder shape, type hierarchy, type size)
+ dates are in the same type treatment as the “read” more without the line and hugging the right side of the text box
8
9
Editorial Page (Blog) Notes: + All type on the site is in open sans (NO MORE SERIF TYPEFACE) + Type container is more narrow + Image container is also hugged to give padding space on the sides (and so viewer can see the whole image at once) + Remove guides / rules
10
11
Shopping Cart (popout)
Shopping Cart (new page version)
Notes:
Notes:
+ animated popout from the side with
+ page is padded in far more than existing design
+ shopping cart container is narrow that hugs the right side of the webframe (look at endclothing.com)
+ 2 products can be shown next to one another
+ Shipping estimate will now stack on top of payment estimate (where the user proceeds to checkout)
12
+ Shipping estimate is next to the payment method (similar to the way products stack next to each other)
13
Important Links listed below Invision https://invis.io/6GG4E37PAZ3 Video Walkthrough https://drive.google.com/file/d/1bxmxSobVIAKegzmnIfCWysB3aUm3pAHx/view?usp=sharing
14