Monday 30 March 2015

How to represent a responsive viewport in the real world...

Illustrative exercise-

Idea:

Test should be done by an illustrator with no connection to web design.
The test will be recorded on film.
They should have no prior knowledge of the test.
Illustrations should be done on a white board.

Test 1

Create a large, landscape area for them to draw in.
Ask them to draw an illustration on a white board.
The illustration can be of whatever they like but must contain certain things:

Several separate elements.
One headline
One representation of a body of text.

Once they have completed the illustration I will draw another area for them to draw in, this time the area will change the orientation and size of the canvas they have to draw on.

They will be instructed to redraw the same illustration in the new area, whilst maintaining the look and feel of the original illustration.

Test 2

This test will then be repeated in exactly the same way but this time the illustrator with have the full disclosure of the exercise.

They will then have 10 questions to answer:


  • Do you feel test 1's original large scale illustration has the same look and feel as test 1 small scale illustration?
  • Do you feel test 2's original large scale illustration has the same look and feel as test 2 small scale illustration?
  • What elements did you feel were important when transferring the designs to a smaller canvas in order to make sure they maintained their look and feel?
  • When you downsized your illustrations to small scale, how did you feel the scale of the canvas affected your illustration? For both exercises rate out of 10 how important scale was. (10 being extremely important, 0 being not important at all.)
  • When you downsized your illustrations to small scale, how did you feel the orientation of the canvas affected your illustration? For both exercises rate out of 10 how important orientation was. (10 being extremely important, 0 being not important at all.)
  • Did you feel less constricted in test 1 than test 2?  For both exercises rate out of 10 how constricted you felt. (10 being extremely constricted, 0 being not constricted at all.)
  • What effect did that have on the creative process? For both exercises rate out of 10 how creative you felt. (10 being extremely creative, 0 being not creative at all.)
  • Did you feel you predetermined a simplified design for test 2's initial illustration in preparation for the scale of test 2's small scale canvas? For both exercises rate out of 10 how simplified you felt the initial designs were. (10 being extremely simplified, 0 being not simplified at all.)
  • How did the knowledge of the exercises outcomes affect test 2?
  • Did that hinder or focus your creativity in any way?



Woodwork - flexible frame

Create a piece of wood with grid set holes that are drilled equal distances apart.
Create a flexible wooden frame that can change size both on the horizontal and the vertical.
Create website pieces that represent elements on a webpage:
Logo
Headlines
Text
Images
Graphic elements

These will be of varying size.

Get people to create a website, test a few people with progressive enhancement and a few with graceful degradation.

Ask them the same questions as above.

Thursday 5 March 2015

Introduction to practice

What did you choose to research? / Why?

I am continuing on my journey to understand the underlining principles of web design. My previous meanderings led me to examining how users navigate web environments, and why the conventions that are now commonplace influence their behaviours. I felt ‘Responsive web design’, was a good move on from my previous research as it is becoming more popular and is fast becoming the next convention to be adopted.

The ‘responsive’ theory proposes that a webpages design should act as a fluid, shifting their shape and composition to accommodate differing screen size, orientation and resolution, hence being ‘responsive’ to the screen. My primary goal in practice 2 was to investigate this concept to see whether there were any pre-existing principles in place for design thinking like this that I could interrogate in order to form my own opinions and design method.

What challenges did this present?

The first month of this project was affected due to the intense time required to finalise the Digital Future exhibition and hand in.

This idea of a responsive design seems straightforward enough but when you scratch the surface you realise that traditional design principles have evolved for thousands of years based on the idea of a fixed width/height canvas. The idea of a designers start point changing from canvas to the content goes against the grain for most design evangelist.

Due to that fact, there is barely any guidance from designer when it comes to new design principles based on how to think and design responsively. Instead the challenge has been left to the developers to build the design system within the browser and modify as they build. This can make the process of taking the initial design through to a responsive build cumbersome, time consuming and clumsy.

Did it evolve from original thoughts?
My original idea was to see if I could create a design principle or mathematical formula to allow a design to be transferred from one format to another without altering the overall aesthetics of the webpage. Through my practical experiments, talks with fellow students and industry professional, as well as a great deal of thinking I realised there was no way to create a formula like this without the end result being monotonous. Instead I focused creating my own responsive philosophy or tenements that could be applied to individual design challenges in the hope that starting out with a responsively adaptable design would make the process of transferring to a developer more streamline and the end result more effective.

Reflection of the process



How did you begin?
My research began with the Responsive Web Design by Ethan Marcotte, he was the first person to coin the term Responsive Design in relation to web design. He advocates three rule for designing responsively, a flexible grid system, media queries (development term for code that recognises screen size) and flexible images. He originally borrowed the term from the architecture movement I decided to start from there looking at ….INSTERT QUOTES/BOOK REFERENCE

He advocates that fixed width units will not work when creating a responsive design, instead he favours em’s, ratios and percentages as this way the design can move fluidly through the different style sheets attached to it.

Using HTML and CSS, I explored the options open to a developer. I created a test using a square made up of individual circles, in my mind the square represented the overall design and the dots the individual elements within that design. I created three versions testing fixed width, magnification and responsive methods. With both the fixed width and magnification versions, even though the overall design was not affected, once you minimised the screen size past a point, areas were excluded and elements were either shrank too small or missing entirely. Where the responsive design differed is that it shifted focus from preserving the ideal of the overall design to making sure that the individual elements were kept intact. The designs hierarchy changes and the design becomes secondary and the content becomes key. This explained why it is favoured by developers and frustrates designers. What I wondered was is it possible to create a design in such as way that the elements and content are still key but the design personality is maintained across any screen sizes?

This thinking led me to wonder about the design process itself and I realised I needed to explore how designers address the challenge of transferring a designs personality to a different dimension or orientation.

I addressed this by writing a brief that was aimed at interrogating the two aspects of responsive design that are greatly contested methods of creating design solutions for multiple screen sizes. ‘Graceful degradation’ vs ‘Progressive Enhancement’ (GD - starting with a large screen design solution and removing elements as you design for smaller screens, such as; less images, less text, less content) (PE - starting with a small screen design solution and adding to the design for larger screens, such as; more images, more text, more content). Here for know as GD and PE

I chose news websites as my subject matter as I thought they would offer the broadest range of content. I picked two ‘local news’ companies in need of a redesign; the Manchester Evening News and the London Evening Standard. I stripped them of their content and rebuilt them both. I decided to recreate the Standard using the 'GD' method, trying to keep to traditional newspaper layout. With the M.E.N I used the 'PE' method, using a contemporary news website design. Throughout the design process I recorded any alterations, marking down any change made to the elements within the page. What I found was that the 'GD' method aloud me more creative freedom and fewer limitation initially but required more thinking in order to maintain the design personality whilst adding functionality. It would also potentially create more problems and confrontation between developers and designers when it came to building due to the technical limitations. The 'PE' method felt it would be smoother to hand to a developer but initially hindered me creatively due to original dimensions and technological restriction. It also took much more thought because I was having to add design elements as I went, I felt I was designing three sites as opposed to one.

Even though I prefer the modern design of the M.E.N site, when it came to the process of designing I preferred the 'GD' method. I found it aloud for more creative freedom and was easier to maintain the personality of the website in spite of scale. I realise this way of designing may create more conflict between designer and developer, but I see that as a positive as it also creates an back and forth dialogue between developers and designers that could potentially lead to a more creative outcomes.

When discussing my finding in the group review week sessions it was suggested that I should leave my comfort zone and explore areas outside the vitual world of web design and take more risks. I also realised that I was heavily relying on my own opinion to form my thinking.

My squares and circles test had left me with a question, when designing a site are developers/designers limiting themselves because they know how hard it will be to transfer the design? Is this why they prefer to use the 'PE' method? In order to truly test how designers transfer a designs personality and whether the knowledge of the task affects the original design. I wanted to set a test that would ask that question.

In order to break away from the screen and answer this question, I set two students two challenges. In the first test I created a large, landscape area for them to draw in, I then asked them to draw an illustration, of what ever they wished on a white board. I told them it could be as intricate or as simple as they like and they had as long as they wanted to complete the task. The only rules were it had to have a theme, contain several separate elements, one headline and one representation of a body of text. After they had completed the illustration I drew a second boundary box this time the orientation and size was much taller and thinner. I asked them to transfer the design they drew into this area whilst maintaining the illustrations core content and personality.

In the second challenge I asked them to repeat the exercise using a different theme, with full knowledge that they would be transferring the design to a smaller size.

My hope was to find out if that knowledge of the task would affect how they approached the illustration and whether the outcome was changed because of this.

My findings were…


Initially, I looked at different materials and explored their properties in order to see if I could create a real world responsive design. However, I soon came to a conclusion; there are three substances in the universe, solids liquids and gases. Two of these are responsive, the problem is that a solid no matter how flexible it is can never be truly responsive to its surroundings. This posses an issue; if every real world weapon in a designers arsenal is made of a solid, (paper, clay, wood, stone, metal) there is no way to create a truly responsive design, instead I could only aim for a modular system that show the potential to be responsive. (Cover arse)

Use this analogy for the bbc exploded website. Connect four, individual elements don't win the game it's the connection between those element, if you don't connect the right elements or other element get in the way you are bound to lose.


 The closest idea was a pieces of wood floating on a body of water where the vessels changed size. I realised there was no creative way of developing a responsive design within the real world the closest too it was to create an idea of a responsive design. An idea is fluid a solid is not.


How did this beginning influence you?

How did you record your research?
I used pintrest to archive any relevant subject material I found on the web, I later printed these online findings off, highlighted any relevant information and edited the important finding into my sketchbook. Conversely, any offline reading material I wanted to reference, I used my experience of blogging to record the key references I found in books and at talks.

Did you do any other research besides online and books?
Lecture on anamophic design


How did the lectures help?

Which area of research did you focus on next?

How did you begin practice 1?

After that what questions did you want to explore?

What methods did you use?
Sketchbook - editing online research, mind-maps, brain storming with others, droodles, taxonomy of website design, word clouds, ordering importance through lists asking questions, visual representing findings, field testing navigation, posing questions to users of reddit and recording findings, designing wireframes.

Computer based – blogging research, pintresting articles, infographics, designed mind maps, writing a brief, testing existing website, testing reddit, timeline, designing wireframes.

Thinking – pondering idea, noting down ideas in jotter and on ipad, setting aside time to allow conscious to work, reflecting on practical design work

How did you review your finding?

Do you think you have found out anything interesting?