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?
