Week 14B In-Class: One-on-One Critique & Further Exploration

I met with my professor today to discuss the progress on my website, 5 days away from the final due date.   Below are just a few notes from the meeting, along with a sketch as I look into adding calls-to-action underneath my headline to add more content & entryways to my homepage.

Following the critique, I was asked to look up some examples to defend my decisions to stick with a left side navigation/sidebar, as well as utilizing both the navicon & call-to-action "MENU" to denote the sidebar.

Bad Assembly's left sidebar on desktop view

Grain & Mortar's left sidebar on tablet view

AndCulture's new website utilizes both a left sidebar & the navicon/menu combo

Web Design Ledger uses a left side bar on all views

Static Interactive resorts to a left sidebar on tablet & mobile views

Marmoset also opts for a left sidebar on tablet & mobile

The Pew Center for Arts & Heritage uses both the navicon & "menu" to lead viewers to the site's navigation

Most of the site's containing left sidebars have been made quite recently, but I'd be interested to see if this is going to be a growing trend & whether in the end it will help or hinder, or even add or subtract nothing, to site view rates & the user experience.  With so many design-related websites utilizing this feature, I wonder if there may be some practical reasoning we just haven't heard about yet outside aesthetic & standing out.

On the navicon/menu combo, I did not find any documentation on which is better or if both is overkill.  My personal opinion is that it works for my site as the sidebar works not only for navigation but also for traditionally footer content like social media & copyrights.

Week 14A Outside of Class:

I worked more to attend to feedback I'd received in last week's critique.  I implemented an image replacement for the background for mobile view.  I also fixed the span so it is not hidden or "off" due to line tension.

I also added some more styling to the subpage, giving the hero image a green overlay to help create a connection to the homepage.  I also attempted to bring in a more handmade-esque typeface, though I'm not sure how I feel about it yet.

Week 14A In-Class:

Week 13B Outside of Class: Persisting Forward & Device Tests

After considering my options, I decided to move forward with my current design instead of changing it.  While I think my new design could be effective, I feel I want to at least try to make this one work.  It's gone through a lot of changes since my first iteration of it, but it's still a design I'm proud of.

After working to fix some kinks, I tested the site on ipad & ipod touch (as opposed to simulating it in Google Chrome.

ipad: home page, menu hidden

ipad: home page, menu displayed

ipad: subpage, menu hidden

ipad: subpage, menu displayed

ipod: home page, menu hidden

ipod: home page, menu displayed

ipod: subpage, menu hidden

ipod: subpage, menu displayed

Right now the most glaring issue is the menu on the mobile view.  The top & bottom elements are pushing into & over each other (like some techtonic action here!), instead of the side nav becoming scroll-enabled.

I also made some headway on the subpage, as could be seen above in my device tests.  This page works great at being responsive.  I'm not sure though how to connect it with the home page though.  Right now there really isn't any element connecting the two.

Week 13B: Mid-Progress Critique & Looking in New Directions

For the mid-progress critique, I presented the two versions of the homepage I'd been working on.  Both are having major technical issues, which were very obvious.

Version 1

Version 2

Critiques:

• Image replacement for background on tablet/mobile
• Round edges for green span
• In version 1, navicon too small; menu should be showing first, then clicked to hide
• Include home in navigation; some users may not recognize logo is clickable
• Background image could be a slideshow
• "Top-Rated NonProfit" competing with logo; too large
• Hide nav for tablet/mobile only
• Social media & awards should be taken out of nav & put into a footer
• Perhaps awards could be included on about page
• Subtle social media can be included in navs; needs to be subtle & STYLIZED
• More line height in nav
• Smaller buttons
• Social media & contact should be moved to bottom of sidebar
• More left padding to green span; add name
• Rid of lines in menu; replace with padding
• Replace navicon with "MENU"

There was great concern about whether I could actually bring this site to a successful fruition.  With that said, I decided to do some further research.  First looking into some other sites who had successfully pulled off some aspects I was hoping to work into my design, like the Pew Center's wide image slideshow & a sleek side nav as exhibited on the websites of Philip House, Haberdash Fox, & Bienville Capital.

I also considered going a totally new direction, doing something less experimental that would be more within my skill set & would not keep me up all night. 

This new direction uses a more standard layout & features such as large explanatory icons.  The sketches above show that I would still plan on using large imagery, though in this case more a hero image, with a caption in a transparent overlay at the bottom of the image.  Perhaps this would contain a link to some sort of feature on the website.  Below would be the oh-so-standard three-icon system.  I'd use this to highlight their mission (upcycling), the store (brown paper bag), & the craft room (paint brush).  The footer would contain award badges, copyrights/address/contact, & social media buttons.