The Design Process: Online presence to wireframing to final design

The Big Idea

Conceptualise the look n’ feel for a lowest unique bid action site, including design rationale and responsive design best practise.

Contents

  • Intro – Research / Scoping / RWD
  • Wireframing
  • Look n feel
  • Concepts
  • Delivery

Intro

What is Responsive Design and how can it help me?

“As mobile devices are increasingly become the way to access online content, responsive design has emerged as a popular design strategy”

A good foundation and approach to web design is to craft an optimal viewing experience that is easy readable and has navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop to mobile). Allmost every new cleint want this type of RWD and automatically thinks this comes as default. I wish! For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical.

My mantra is:

Develop, Maintain and Manage = ONE SITE

See: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Desktop user

“I’m on my lunch break and I want to bid quickly”

Tablet user

“I’m sitting, relaxing on the sofa browsing the internet”

Mobile user

“I’m on the bus and have time to look around”

Conclusion

"I want to quickly and easily discover prizes and bid for them"
Now these groups are likely to be doing all three

Wireframing

Three screen widths

//Desktop //Tablet //Phone

Design Rationale

Concept 1

Zonal control

  • From existing logo develop the colour palette and typeface
  • Brand leverage with Web 2.0 overtones
  • Overall simplification, focus on readability and contrast

Concept 2

Luxury with focus

  • With familiar font and classic styling, this polished approach hits the right demographic
  • Following the wireframes then developed using a neutral palette punctuated with zangy blue
  • Overall simplification, focus on readability and contrast

 

 

Delivery

Final home page, from evolution to revolution

Brand leverage

Taking elements from the brand mark, this design evolved from fresh wireframes through to workable a solution for a demanding client. Providing zonal control with global headers and footers and configurable promotional areas.

This is but part of a selec­tion of design resources rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact us fur­ther to dis­cuss if your brand really wants to ben­e­fit from this new immer­sive expe­ri­ence here:
info@russellwebbdesign.co.uk

If something has peaked your interest. Please leave a comment below.

Tagged with: , , , , , , , , , , , ,
Posted in Brand Design, Brand ID, Graphic Design, New Media, Strategy, UX
One comment on “The Design Process: Online presence to wireframing to final design
  1. You got a really useful blog. I have been here reading for about an hour. I am a newbie and your success is very much an inspiration for me.

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

My Tweets
  • Mobile best practice for registration – Put the users needs before technology April 16, 2013
    User Registration on Mobile Watch the animated version here I have recently been involved in both high-level concept generation through to territory specific text changes in the exiting world of User Registration. These are my top 5 tips to help…Read more › […]
    russellWebbDesign
  • What’s your favourite wire-framing style? April 9, 2013
    Pick your battles, know your styles Whether for desktops, on a tablet or the this mythical idea of a mobile internet (there is only one web to experience – but that a different post!) the modern UX-er should be skilled…Read more › […]
    russellWebbDesign
  • Russian Graphic Identity February 12, 2013
    The branding ‘circle’ Working alongside a complete design team can be very rewarding. Like-minded people, working together to inject new meaning into a tired or misleading brand. This project did exactly that. The brand needed a new visual identity that…Read more › […]
    russellWebbDesign
My Instagrams
Powered by Instapress 
My Flickr Feed
			russellwebbdesign posted a photo:
 
			russellwebbdesign posted a photo:
 
			russellwebbdesign posted a photo:
 
			russellwebbdesign posted a photo:
 
Russell Webb Design's Photostream
My Categories
My Other Site

spindlelegs.co.uk is a creative design service specialising in branding with an expertise in retail, online, mobile and print with over ten years design and managerial experience. Developing brand ID, successful integrated campaigns and design for online experiences across many industries including financial, petroleum, home entertainments, telecoms, FMCG and retail.

info@spindlelegs.co.uk

Switch to our mobile site