RG Phase 1: Wireframe Critique

desktop wire frame for ravenna gardens

mobile wireframe for ravenna gardensToday’s critiques of html, wireframes and style tiles went fair enough. Minus points for me because I didn’t expand out my wireframes. I am so used to doing wireframes as device frames because everything leads out from links on the desktop wireframe. With mobile wireframes, it’s impossible and ill-advised to make everything “above the fold” (within the available screen). Here’s the mobile website expanded. Yes, it will be difficult to code the transition of the map rising to the top of the page for mobile, but I think it’s a critical consideration for user-centered design. The only time see a smart phone being critical is when driving ( I know, scary but unavoidable).

Phase 1 of Web ReDesign: (with *additions)

1. restructure information with user-centered considerations (e.g. if the user is using their mobile device to find the store or look up the store’s hours, I don’t want them to look any further than the homepage.) *Research the competitors What is the industry doing? What are the local guys down the street doing? Get user stories. Understand what they want from the site.

2. communicate style and function Create style tile this is a great way to contain the brand’s essence (colors, fonts, logos) but feel free to explore different layouts. *Annotate wireframes Pretend like you’re not going to be at the presentation. Have clear reasons and content. Consider what the call to action is. Is it reflected in your design?

3.wire-framing explore more efficient (and mobile friendly) layouts: *mobile should correlate with desktop You should see how the boxes flow into a (probably single column) mobile layout, leaving no div unaccounted for. For advanced coders: have good reasons for disappearing divs. mobile should be a smaller file size Though mobile should correlate with desktop, you should have mobile counterparts whether it’s smaller crops of desktop pictures or taking out the CSS sprites to decrease loading time.

5. understand mobile strategy this is important to know what your client wants/willing to pay for. More site options will cost more money. (e.g. this “client” Ravenna Gardens just wants two options: mobile and desktop) *Sometimes, the “lazy cheater” way is the best way. Each website project has different needs, budget, priorities and it’s up to you as the designer as to which corners to cut. Do you want an easy to maintain site? Do you want all content to be SEO-ized (Search Engine Optimized)?

(Earlier Post Relating to This Project)



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s