Redesign Ravenna Gardens: Web Redesign Phase 1

Katsite Project 1

Assignment description: “You will need to to do a website audit and analysis, determine what needs improvement, and come up with a comprehensive design solution for desktop computers and smart phones . Requirements: Needs to work in IE8 and above, all modern browsers, and iPhones and Android phones. File size needs to be under 200k for the desktop and under 50k for the mobile version. Additional requirements: Code must be w3c valid html5; needs to incorporate  Google web fonts. There will be no initial design “comp”, you will be designing directly in the browser.”

Employing skills as a designer, information architect and front-end developer, my first assignment is a redesign of Ravenna Gardens. Its online information is few and I think that I can put a lot of it on the home page and eliminate 3 of its 8 navigation bar elements. (I also think that its users are smart enough to click on the logo instead of clicking a “home” button.)

As part of the process style we’ll be using in this class (agile development) Phase 1 is also the stage where the designer works on the wire-framing and style tiles (I will be working on this in the following days.)

Phase 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.)
  • create style tile this is a great way to contain the brand’s essence (colors, fonts, logos) but feel free to explore different layouts
  • wire-framing explore more efficient (and mobile friendly) layouts
  • 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)
screen shot of old web site and modified html
Step one: restructure information by changing the html.

 

Advertisement

2 comments

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