Category ArchiveDesign

The story of the ribbon

Watch this beautiful story on how the Microsoft Office 2007 user interface was designed.

It makes for fun and interesting viewing, even if design doesn’t excite you.

Choosing between adaptive vs. responsive design

Often I see, designers presenting both versions of the design to clients, however I believe that choosing the right style at the outset, is the key to executing the design with better direction and focus on results.

content-is-like-water-12402

 

Responsive design:

A responsive website will show content based on the available browser real estate. A responsive site on the desktop will move dynamically and arrange itself, as you change the size of the browser window. This process is automatic, on mobile phones – where the site verifies the available space to presents itself in an ideal arrangement.

responsive-is

Responsive design

 

As a concept responsive design is pretty straightforward, as it is very fluid the user gets a seamless view of the site on a handheld as they would on a large screen.  To implement this in theory, requires deep understanding of the client and the end users and also in depth visual conceptualization of the site from early on.

Example: The Microsoft website is a great example to check the features of a responsive site.

 

Adaptive design:

While responsive design, is about changing the design pattern to fit the screen – adaptive design relies on multiple fixed layout sizes. The site/app detects the available real estate and then displays the layout most relevant to the screen. In such a scenario, resizing the browser will have no impact on the design and layout on display.

versus-adaptive-responsive

In adaptive design, it’s normal to develop six designs for the six most common screen widths; 320, 480, 760, 960, 1200, and 1600 pixels. This style of design is in demand for e-commerce websites, where businesses require handheld device- optimised websites. So much so, that popular UX design tools now come with predefined template sizes for each device.

Example: Amazon is a great example to check the features of an adaptive site over various devices.

Choosing between the two 

Note: I’d like to point out here, that there is also a third option, which is still relevant although losing out on popularity. This is the ‘Standalone Mobile Design’. You would have seen mobile only websites – these are usually denoted in the URL bar of a browser using the “m.” prefix. Once a design alternative of choice ( even Google used to enable search engine rankings to such sites), this option is falling out of favour, as it requires double the effort to maintain two versions of the same site.

Coming back to choosing between a responsive versus an adaptive design, a broad stroke would imply that if designing a website for high mobile web browsing – responsive web design is a goof fit. Similarly for mobile features that rely on touch, the accelerometer or geolocation, adaptive website design may be required.

While broad generalizations can be made,  the solution needs to be flexible on a case by case basis.

The case for responsive design:

Pro’s

  • Responsive is easier to design as it is essentially a flexible flow elements
  • Takes less work to implement
  • Easy to find pre-designed templates
  • Uniform and seamless transition when viewed on different screen sizes
  • SEO friendly

Con’s

  • Lesser control of design, on each screen size
  • Lot’s of testing is needed to ensure that visual hierarchy is manintained as elements are shuffled on screen screensizes
  • Advertisement sizes need not translate well on smaller screens
  • Flexibility of images needs to be considered – like enabling preview images for smaller screens
  • Longer mobile download times

The case for adaptive design:

Pro’s

  • Tailormade screen solutions
  • Better user experience, as the display adapt’s to the users situational needs and capabilities
  • Better for touch friendly interface
  • Can be designed to optimise advertisements
  • Adaptive sites are often 2-3 times faster than responsive ones

Con’s

  • Lesser data is presented o user, but this is a small price for increased convinience
  • Usually a lot more work – six designs are th current standard, but it could vary
  • Tablet and notebpk users need to be provided with option to togge between available versions, as this ‘mid’size’ segment is often neglected
  • SEO challenged – most search engines still don’t rank identical content over multiple URLs equally

Learn Sketch with me – Create pages and artboards

The messages we continue to send ..

A side by side comparison of September 2016 issue of two magazines, and the light it sheds on everything we are doing wrong with the messages that are send out to girls and women.

 

girlslife

 

Below is designer, Katherine Young’s vision on how the Girls’ Life cover could do better, by focusing more on empowering and inspiring girls:

girls-life

 

Break Free – visual design for a lingerie website

Online lingerie stores should trigger an indulgent, intimate, informative and easy affair.

 

Break Free is an uncluttered e-commerce site for lingerie shopping, offering a relaxed browsing and shopping experience.

A deck of the websites visual design : 

1

 

2

 

3

 

3a

 

4

 

5

 

6

 

7

 

8

 

More design work coming soon here .

 

In praise of prototypes

Basic engineering design involves iterations of four major steps : designing, prototyping , testing and redesign.

The similarities in product development workflow in engineering and design industries are hard to miss. Agile methodology is used in abundance in both fields, while prototyping is an often neglected crucial step.

This happens, despite proven cases of early and iterative prototyping as a great method to bring forth design flaws.

One example comes to mind:

Not so long ago, while designing jewelry storage cases for a startup, we focused on a design that would double up as display & store decor for the startups tiny storefront.

An early drawing:

jewellery case

It would have been ideal to sit on these early sketches for a couple of days, before making any changes or adding detail.

However, with a few planks of wood and acrylic sheet’s lying about, we got straight to making the first physical prototype.

DSC_0041.1

 

Some flaws were immediately apparent, others surfaced as we deliberated the design and usage.

Having an early prototype ready, allowed us to make the below design changes without multiple iterations:

  1. Using plywood and plastic to make the body – this dramatically reduced the weight of the case
  2. Added a small handle at the top of the box, so it would be easy to carry and handle
  3. Replaced the rivets to smaller ones to add to the minimalist look
  4.  Used custom brass chains with fewer loops to use as jewel hangers
  5. Embedded a magnet clasp in the body so the “doors” would snap shut and not keep popping out
  6. Added a small hook handle to the doors for ease in opening the case
  7. Wood & glass as raw materials were replaced by plastic, ply and acrylic.

This kind of early prototyping, works best when the cost of making the prototype is really low.

Many would say that experienced carpenters would have provided time proven design and development ideas, thus rendering prototyping irrelevant. I would disagree, I believe that any design should be approached with fresh eyes – without prejudice on what successful design is or can be.

If design thought is tangled with best practices in the early stages, alternative ways of doing things tend to be neglected in favour of the tried and tested.

30 minute challenge

 

UX interface for the Rio Olympics made for Android.

30 minute challenge - App for Olympics