Tuesday, 6 May 2014

OUGD501- Module Evaluation

1. What skills have you developed through this module and how effectively do you think you have applied them?
I feel like I have improved my writing skills prior to my last critical analysis writing. I now know how to write an academic paper and I feel I am starting to develop my writing style. I understand how to triangulate much better and feel I have showed this in my writing.

In regards to the practical side, I have a much better understanding of designing for digital media and how usability and function are the fundamentals to creating a website that has a clear purpose. I have discovered that navigation is an important aspect of designing websites and making sure the content is most important.

2. What approaches to/methods of design production have you developed and how have they informed your design development process?

I found that planning before moving onto digital is a must when designing the layout for a website. I had to map out how the site would work to make sure every page was easily accessible from any point of the site to see what navigational tools were required. I have realised I like to work digitally to develop my ideas, as I like to experiment on screen so I can see how things will look. I find it hard to visualise my ideas on paper with sketches and find I tend to waste a lot of time in doing so. However, I realise sometimes it can help to establish the relationship between objects and space.

3. What strengths can you identify in your work and how have/will you capitalise on these?

I feel like I have clearly explained the subjects I wrote about in my essay and applied them visually to my website to show my understanding of the content and showed what I have taken from it and formed my own opinions and expanded on the existing theories. This is shown in the practical side in the guidelines section of my site where I have taken elements that I think are successful by offering examples of how to apply them.

4. What weaknesses can you identify in your work and how will you address these in the future?
If I had allocated more time, I would of liked to have ago at coding the website to improve my understanding of designing for digital because it makes you realise the limitations of designing for web and the difficulty to code more complex details.

5. Identify five things that you will do differently next time and what do you expect to gain from doing these?

- If I was to do it again I would like to go more in depth with the actual coding and working of the website. I am sure this would of provided more problems to solve which would challenge me further and improve my knowledge of digital software and the psychology behind how the user interacts with a site.

- My time management has been terrible throughout the practical side of the module. I need to address this to help me when I come into the third year of my degree so I can balance the written work with the practical to get the best out of both.

- I wish I had printed the two web pages because I think they both work as info graphics and would have further enhanced my project. Again this came down to time management, or lack of.

- I didn’t take advantage of getting feedback from my peers; next time I will organise self initiated crits to help me develop my work.

- Next time I want to learnt to balance the writing and practical at the same time because I think it will provide better synthesis.

OUGD501- Studio Brief 1- Critical Analysis- Essay

Skeuomorphism and Flat Design within Contemporary Design Movements.

Designers loaded everything with drop shadows and gradients to give the illusion of depth, and of a light shining above and to the side. They did this because it was comfortable. Society had to adapt to perceiving things on a digital screen.’ (Greenstein, A, 2013)

‘Skeuomorphism’ and ‘Flat Design’ are two terms that refer to different design movements that are at the opposite ends of the spectrum in regards to aesthetics, functionality and usability.  A skeuomorphic design emulates objects in the physical world to make it easier for people to feel more familiar with a device.  Flat design does the opposite, it doesn’t employ any three dimensional realism by disregarding gradients, bevels, shadows and lighting, instead favouring typography and blocks of colour. With such high contrast in philosophy, flat design offers an alternative to the familiarity of skeuomorphic design. In his essay ‘laptop aesthetics’, Adrian Shaughnessy suggests, ‘Within the digital domain, for so long the place for graphic innovation, there are signs that a burgeoning aesthetic maturity has arrived offering an alternative to Toy Story 3D-ness.’ (2003)

This essay attempts to discuss what exactly flat design and skeuomorphism are, the pros and cons of both and the possibility of a new and more balanced system that combines successful elements of the two.

‘More than ever, technology constraints have disappeared, and designers have their version of the mythical perpetual motion machine — a new medium where pixels are infinitely available and infinitely malleable. We should focus on setting them free.’ (Maeda, J, 2013)

Before writing about Skeuomorphism it is necessary to define what it means. The word ‘Skeuomorph’ originated from Greece and is compounded from the Greek words skeuos, container or tool, and morph, meaning shape. The Oxford Dictionary defines the word as ‘an object or feature, which imitates the design of a similar artefact made from another material.’ Around 1980 the term was applied to material objects but now it is most commonly associated with computer applications as well as mobile interfaces. Skeuomorphs are designed to familiarise the user by creating a connection with past experiences that are ingrained into society, making new mediums feel more comfortable and easy to understand.

‘At its core, skeuomorphism is more than just the gratuitous mimicry of the look of a leather calendar. Buttons, shadows, ridges and toggles are skeuomorphic functionalities. Swiping, pushing and pulling are also real life interactions and could perhaps be called skeuomorphic, since they are not absolutely necessary to the functionality of the interface. But this is where the lines blur and I would argue that although not necessary. They make it easier for our 3D brains to understand how to interact with a 2D interface and thus serve an important purpose.’ (Sanchez, E, 2012)

Donald Norman highlights this notion in his book ‘The Psychology of Everyday Things’ suggesting, ‘the human mind is exquisitely tailored to make sense of the world. Give it the slightest clue and off it goes, providing explanation, rationalization, understanding.’ (1988, p2) Victor Dewsbery takes this point about skeuomorphic design further in relation to technology and computer interfaces describing a need in digital design for a metaphor that ‘is often used to place the individual program routines into a meaningful context that can be understood by the user.’ (2002, p112) Kuang would argue ‘When you’re looking at computer windows that layer on top of each other like paper, you’re looking at metaphorical rules for how computer interactions should behave, drawn from the physical world.’ (2013)

Therefore, these ideas about what Skeuomorphic design is comprised of have common threads that exist in all the definitions proposed here. Skeuomorphism could be considered to be the manifestation of ‘root metaphors’ that are now embedded in all of our day-to-day interactions with objects and products. This gives users that sense of a ‘connection to past experiences’ and a familiarity that is sometimes necessary for people to engage with products, emerging technologies and the design of digital interfaces.

The term ‘flat design’ refers to a design trend currently influencing the digital domain that has grown in popularity over the last two years. It disregards visual clutter such as drop shadows, gradients and lighting effects, instead favoring vivid colours, simple shapes and crisp typography.

‘As each new technology matures, customers are no longer happy with the flashy promises of the technology but instead demand understandable and workable design.’ (Norman, D, 1988, p15)

The trend may be current, however the philosophy is not. The aesthetics and ideology associated with flat design can be clearly seen in a historical context when compared with modernism, a philosophy from the 1920’s that emphasized simplicity, truth to materials, the progression of technology and the well-known phrase ‘form follows function.’ Massimo Vignelli confirms this in his essay ‘Long Live Modernism’, stating ‘modernism was and still is the search for truth, the search for integrity, the search for cultural stimulation and enrichment of the mind. Modernism was never a style, but an attitude,’ (1991) a sentiment and ideology that can be clearly seen in today’s current flock of technology, mobile and web applications. Microsoft’s ‘Windows 8’ or Apple’s ‘Maverick’s’ user interface are excellent examples of how when ‘flat design’ is applied correctly, it can exploit the virtues of designing for the screens two dimensional space, adding only what is necessary to maximize usability and functionality. Stefan Mumaw describes this concept stating that ‘designers also use visual tools-colour, shape, size, and layout-to communicate order, emotion, mood, and attraction. These elements allow designers to design and create simple structures from complex assets. In short, designers can make a lot look like a little. They do that by applying not only what they know but what they have experienced. Simplicity is rarely the result of too little to say, but rather, how it is said.’ (2002, p65)

Certain aspects of graphically intense design styles are considered bloated and unnecessary by ‘flat design’ advocates, as is the use of effects such as drop shadows or textures. In his writing ‘Material Honesty on the Web’, Kevin Goldman suggests ‘without all the shading, shadows, and bulbous buttons, we get a flatter (or honest, or native, or authentically digital) web. Call it what you will, the flat web focuses more on content.’ (2013) This ‘visual clutter’ is replaced with simple 2 dimensional objects, typographical styles and block colours that create a relationship between the figure and ground. In turn, this establishes a visual hierarchy in which the content is placed with more importance than other visual elements. ‘The palette of emotional design for flatlanders is instead temporal. Temporal beauty lives in state-change animations, nuanced timing effects, strategically placed user feedback, and other “interesting moments,” not drop shadows and Photoshop layer effects. Flatlanders build all kinds of emotion and depth combining these moments with delightful microcopy, personality, and typography. All honest—all web—all good.’ (Goldman, 2013) This idea is fundamental to the recent success of flat design in the digital space due to technological advances in screen display sizes and monitor resolutions, the mobile web and user interfaces. 

In order to illustrate the ideas talked about above it is necessary to analyze examples of skeuomorphic and flat design. This will form the basis for a discussion of the benefits and draw backs of the two. The skeuomorphic image refers to the Apple Mac operating system 10.1 and the flat design image references the Windows 8 operating system.

In regards to ‘visual clutter’, figure1 overloads the page with information; the main points of interaction are displayed at the top and bottom of the page with the content in the middle. The layering of documents mimics the conventional method of workflow by imitating a physical desktop space with documents placed on top of each other. This is an example of skeuomorphism transferring restrictions of the physical into a digital space. In his writing ‘Flat Design vs. Skeuomorphism - why you are comparing oranges to apples’, James Duval comments on a similar issue with skeuomorphic boundaries. ‘Realism can bring the limitations of the real world with it in its digital form. Think of how most calendars still show you days on a monthly basis, or calculator apps only show you one line for the results, rather than allowing you to keep track of your history or multiple calculations at once.’ (2013) In figure2, it’s clear to see that a strict grid system has been put in place. This creates a consistent layout that helps to organize applications, giving structure and clarity to information. Garaza would argue that ‘society is quickly moving into the Jetsons era and the future is now. This means that some of the original design patterns that we leveraged to introduce people to new technologies are also changing. As users get more sophisticated, design systems evolve into something that is more suitable to the medium, rather than emulating models from the past.’ (2013) This is a good example of how form can follow function as the content avoids unnecessary noise allowing it to become the main focal point.

In figure1, the user interface relies heavily on skeuomorphic indicators to inform the user of points of interaction. For example, the software icons in the dock at the bottom of the page use techniques such as gradients and lighting to portray depth, which in turn creates hierarchy and helps separate the information from the background. In figure2, the majority of icons have been stripped of decoration, solely relying on colour and type to decipher information; this could be a problem for some users that are unfamiliar with navigation. Norman comments on this by suggesting, ‘there must be some way of knowing what action and where it is to be done. This requires a
convention of highlighting, or outlining, or depiction of a actionable object.’ (2004) This is supported by Nishant Agrawal as he suggests, ‘Gradually, you start understanding, and appreciating, the detail of skeuomorphism. There are many layers which separate the button from the background – shadow, color, gradient, border … You start to understand that each has a role to play and together they give a unique individuality to the button.’ (2013) However this could be argued to be something of a one-dimensional outlook on the progression of digital design, stalling innovation and creativity. In his article ‘The Real Problem With Apple: Skeuomorphism In iOS’, Tim Worstall suggests ‘that may well have made sense twenty years ago, when most in the world of work were familiar with the physical world example. It’s quite possibly less so now when a goodly chunk of the labour force have never even seen one. And the perpetuation of this organisational form might be limiting innovation in more modern ones.’ (2012)

As discussed briefly in the last paragraph, a big uncertainty surrounding flat design is the execution of navigation. Typography and colour have a leading role in successfully achieving the distinction of points of action. Figure2 is a good example of this concern; the blocks of vivid colours separate the content from the background, resembling a panel or button. In his article ‘Flat design, iOS7, Skeuomorphism and All That’, Turnbull comments on the importance of selecting an appropriate colour scheme by suggesting, ‘you can still embody flat design using shades of grey with an accent colour, but adopting new colour trends and creating a bright, diverse palette can help to create important contrast and help to recreate effects rivaled only by gradients, shadows and other outgoing embellishments.’ (2013) Payne challenges this by suggesting good design has ‘to be effective, designers must set their sights well beyond easy-to-use. We need to convey more than how. We need to convey what as well. We need to be interpreters, to contextualize and concisely convey their identity, purpose, and value.’ (2013) Further more, Spiekermann would argue ‘Cul­tural para­me­ters like read­ing habits, lit­er­ary cul­ture (or lack of) – our deeply embed­ded fear of change, all these give an excuse to imi­tate the old, even though there are no tech­ni­cal rea­sons to do so.’ (2012) This is clearly seen in figure1 where less attention is paid to type aesthetic and focused more on graphical illustration to communicate a message. Where as figure2, uses sharp, sans-serif fonts designed to take advantage of higher screen resolutions, a variety of weights from the same type family have been carefully selected to enhance an illustration or stand-alone for a call to action.

Figure1 would conventionally be classed as skeuomorphic design, where as figure2 can be classed as flat design. This division between the two can be seen as being inaccurate because of past connections to certain symbols displayed in figure2. For example, the icon that resembles a bag is used to communicate the folders use, to store items. This makes a connection with the users past experience, to the old and familiar, transferring a message that has been ingrained into society through the use of metaphors in everyday life. Kuang challenges this idea of interaction of both design criteria by suggesting,  ‘what should the “trash bin” on your computer desktop look like? After all, it doesn’t really behave like a trash can. Should it look like a trash can? If not, what could it possibly look like while still being totally intuitive?’ (2013) Rahul Sen refers to such metaphors as ‘archetypes’. He argues, ‘archetypes can always be deconstructed, challenged or probed since they merely act as starting points of reference. There are innumerable examples of archetypes that have been reintroduced to us in the most puzzling ways in order to question our own understanding of them.’ (2010)

‘In the information-rich society we will find that users establish many of the criteria for what they want available and how they want it to be delivered to them. As designers we must take account of this, and seek to use technologies to satisfy those desires, as well as to innovate and break through the creative barriers that will enable us to produce the ‘next big thing,’ (Cook, M, 2001, p364)

To enable the progression of digital design a compromise could be a possible solution to the problem. For example, the visual clues of skeuomorphism combined with the functionality of flat design lies somewhere in the middle, taking successful elements of the two and applying them in a way that is still familiar and usable. One term used by design advocates to describe this compromise is ‘skueominimalism.’ Edward Sanchez describes this idea in his writing Skeuominimalism - The Best of Both Worlds’ as ‘skeuominimalistic design is simplified up to the point where simplification does not affect usability. And its skeuomorphic affordances are maximized up to the point where it does not affect the simple beauty of minimalism.’ (2012) Another term used by Mathew Moore is ‘almost flat design.’ He suggests ‘Almost Flat Design doesn’t ignore the concept of depth. Instead, depth is used to support comprehension of the interface. But, just like gradients, this can be done in a subtle way and still allow for separation of information.’ (2013) Figure3 is the new iTunes platform; this is a good example of both parameters being used successfully in conjunction. The use of gradients, shadows and highlights create physical familiarity and are used subtly and tastefully to indicate points of action without affecting functionality.   
Analyzing skeuomorphic design against flat design it is clear to see the positives and negatives of the two. This suggests the two philosophies will remain relevant within the digital domain, and by combining the successful elements from each party, the overall usability and functionality will be better balanced and appeal to a wider audience. In his writing ‘iOS 7, Windows 8, and flat design: In defence of Skeuomorphism’, Grinberg suggests ‘designers should not simply flatten designs arbitrarily, but also address the functional qualities of skeuomorphism on each design decision. With these considerations a balanced approach can drive the optimal design parameters.’ (2013) This is further supported by Duval as he suggests ‘Flat design isn’t good or bad. It’s just flat. It’s one company’s solution to the world of responsive design and touch screens but it isn’t the only solution. You can keep a minimalistic approach while also using shadows and gradients – as long as you do it tastefully.’ (2013) With this in mind, the combination of the two design parameters could aid in finding the solution to resolving the problems of successfully designing for a digital space.
‘The future is bright for visual design. Going away are the days of the heavy real-life metaphors of today’s iOS and as we temper back from the Metro interface, the principles for highly usable, effective, and efficient design languages are emerging. Let’s just not forget the lessons of usability we should already know.’ (Moore, M, 2013)





Mumaw, S (2005) Simple: Websites, America, Rockport Publishers

Dewsbery, V (2002) Navigation for the Internet and other Digital Media, Switzerland, AVA Publishing

Norman, D (1988) The psychology of everyday things, New York, Basic Books

Elsom-Cook, M (2001) Principles of Interactive Multimedia, England, McGraw-
Hill Publishing Company

Payne, J (2013) Does Skeuomorphic Design Matter?: http://uxmag.com/articles/does-skeuomorphic-design-matter/ (Accessed 05.01.2014)

Sen, R (2010) Archetypes and Their Use in Mobile UX: http://johnnyholland.org/2010/05/archetypes-and-their-use-in-mobile-ux/ (Accessed 05.01.2014)

Turnball, C, (2013) Flat design, iOS7, Skeuomorphism and All That: http://webdesign.tutsplus.com/articles/industry-trends/flat-design-ios-7-skeuomorphism-and-all-that/ (Accessed 05.01.2014)

Garza, D (2013) Death of skeuomorphism and the future of design: http://www.chapterthree.com/blog/darius-garza/death-skeuomorphism-and-future-design/ (Accessed 05.01.2014)

Worstall, T (2012) The Real Problem With Apple: Skeuomorphism In iOS: http://www.forbes.com/sites/timworstall/2012/09/12/the-real-problem-with-apple-skeuomorphism-in-ios/ (Accessed 05.01.2014)

Agrawal, N (2013) Why Flat Design Doesn’t Work, While Skeuomorphism Does: http://ncrafts.net/blog/2013/06/why-flat-design-doesnt-work-while-skeuomorphism-does/ (Accessed 05.01.2014)

Vignelli, M (1991) Long Live Modernism: http://www.eppelheimer.com/blogs/ia/pov/1_Vignelli_Long%20Live.txt (Accessed 04.01.2014)

Norman, D. A. (2004) Affordances and Design: http://www.jnd.org/dn.mss/affordances_and.html (Accessed 04.01.2014)

Duval, J (2013) Flat Design vs. Skeuomorphism- why you are comparing oranges to apples: http://gkbcinc.com/flat-design-vs-skeuomorphism-why-you-are-comparing-oranges-to-apples/ (Accessed 03.01.2014)

Kuang, C (2013) The Design Battle Behind Apple’s iOS 7: http://www.wired.com/design/2013/06/ios7_redesign/ (Accessed 03.01.2014)

Shaughnessy, A (2003) Laptop aesthetics: http://www.eyemagazine.com/feature/article/laptop-aesthetics-text-in-full/ (Accessed 03.01.2014)

Maeda, J (2013) The Future of Design Is More Than Making Apple iOS Flat: http://www.wired.com/opinion/2013/06/the-future-of-design-is-more-than-making-apple-ios-flat/ (Accessed 03.01.2014)

Greenstein, A (2013) A roadmap to Modern Design: http://www.plugandplaytechcenter.com/blog/2013/11/06/a-roadmap-to-modern-design/ (Accessed 03.01.2014)

Grinberg, Y (2013) iOS 7, Windows 8, and flat design: In defense of Skeuomorphism: http://venturebeat.com/2013/09/11/ios-7-windows-8-and-flat-design-in-defense-of-skeuomorphism/ (Accessed 03.01.2014)

Goldman, K (2013) Material Honesty on the Web: http://alistapart.com/article/material-honesty-on-the-web/ (Accessed 09.02.2014)

Moore, M (2013) Almost Flat Design: http://www.matthewmooredesign.com/almost-flat-design/ (Accessed 09.02.2014)

OUGD501- Studio Brief 2- Website in Context

OUGD501- Studio Brief 2- Final Website Design


About Page

Guidelines Page

Thursday, 1 May 2014

OUGD501- Studio Brief 2 Development- THEORY INTO PRACTICE - Propose, Produce, Present

My essay was about Skeuomorphism and Flat design. I chose to write about this subject because it was interesting exploring the arguments for both parties with the conclusion that there is no right or wrong answer as to which philosophy is best. I discovered that both have pros and cons that can be intertwined to get the best out of a design depending on the purpose. This is something I want to communicate in my response to the brief by making the user aware of the pros and cons of both and the possibilities of using both tastefully to get the most out of a design.

I started off by listing the pros and cons of each and mind maps for each topic and the brief overall. As the topic is about digital design I am am going to propose a website that is intended to inform and educate.I want to create an info graphic themed page and a secondary page that outlines the characteristics that are successful in my opinion. The first page will be to do with the background to give some context and the second age will be my interpretation of what I have learnt. I want to include both as there is no right or wrong answer and it mostly subjective. 

Whilst researching and analysing common threads i have made a list of elements that I think are relevant. I also starting thinking about how this could be applied in a practical context, such as music software being better suited to skeuomorphic design because it helps understanding of how the software works.

I made a rough plan for how the website, I am going to have a homage with two links, about and guidelines. I will also have a logo to link back to the homepage just to cover all areas of navigation. At the bottom of each page there will be a back to top button for better usability.

I sketched a few ideas down for the guidelines page. I think I am going to have a set of visual guides that show different methods of working that I think are successful. 

The dimensions of the page are 1024 x 768px this is the standard screen size so should work across platforms.Im not sure weather to have the links horizontal or vertical yet so I will just have to experiment when working on screen. 

Open Sans

I have chosen to use this font because it has 10 fonts in the typeface that can be used for different purposes. This is an important feature of flat design so I think it relevant to use in the site.

Digital Development 

I have made an illustration to represent the ting and yang symbol to represent both sides of the content (skeuomorphism/flat design) I have used a square instead of a circle to represent a pixel as its relevant to the theme.

I have changed the colours to work better. The red and orange will relate to the two links on the site.

As I am naming the website 'Almost Flat?' I have applied a drop shadow to the lower section of the logo. This refers to the characteristics of skueominimalism to link all the sections of the website whilst being ironic because all of the styles or relevant within the content. 

I am going to have the links in the top right corner, if the site was live the links would be fixed in place when scrolling down so the user can navigate between pages.

I want to keep the layout relevant to the content so I will be using grids to align the elements for a structured design.

The about page will be in two sections so I have made some guides that divid the page equally.

For extra navigation I have used the illustration logo from the homepage as link back to the homepage. This covers all aspects of navigation for functionally and usability. 

I have divided the two section by visually communicating the different styles with the associated characteristics. This will be the theme throughout the page.

Something didn't feel right to me about the design so I tried a few colour changes however, I felt the page needed to be more open so I had a re-think and started again.

Also, I felt the link buttons looked tacky so I have stripped them back and kept them horizontal.

I wanted the use the colours from the homepage so each page looks consistent. I want the layout to be themed around info graphics so I have stripped back the page to the essential information. I think this is much more appropriate to the context.

I want to construct the symbols and illustrations using both techniques from flat and skeuo design so I have used flat vector lines as well as a drop shadow. I want to synthesis the theories I wrote about in my essay throughout the website to show my understanding of the subject.

I felt the homepage logo looked isolated on the left so I have moved it inline with the link buttons. 

I know feel happy with the first section of the page. I think it looks much better and utilises the negative space for better digestion. I have used the line coming off the question mark to make it clear to the user that they need to scroll drown the page for more info.

On the second page I am going to have a short description of what each subject is. I want use illustrations to support what is being explained in the copy.

To illustrate skeuomorphism I have made the illustration 3d with the extrude and bevel filter. 

To further communicate the two sides of the subject I am going to have the type left and right aligned. 

Second Section

To finish the page off I have made a down arrow for usability, to make it stand out from the line I have used a subtle drop shadow on the arrow.

After finishing the second page I felt the colours of the homepage and buttons needed adjusting because they didn't work overall.

Third Section 

For the third page section I have re-used the illustrations I discarded earlier. I think the problem was the negative space. The first page needed to be open and clear so this works now its into the third page. I am going to alternate the blue and orange arrows for the navigation.

The next section will have the pros for each category but with two conflicting visual styles to illustrate the characteristics of each.

The skeuomorphic side will be over the top and purposely made to look handmade. I tried using hand drawn fonts to illustrate this.

I used some sketch style illustrations to reference some of the statements, I felt the font needed to be a marker pen style to better suit the illustrations. I used a cog symbol the represent the workings behind each design style.

One of the points mentions how it relies heavily on illustration so I have used a combination of vectors and image for a visually rich style. 

I thought about using symbols on the flat side to mimic the skeuo side but decided against it because i thought it contradicted the content so I used simple icons and rainbow colours to reflect this. It uses uses a grid and different weights of fonts to further support this.

I am pleased with the final layout, this will be a two part section and will lead onto the following page with the cons for each subject.

For constancy the layout will be the same but the icons will be the opposite to reflect the the things are not successful.

I have used illustration to convey meaning, the snapped pencil and pentagram bullet points communicate negative connotations.

I am happy with the final layout and think the pro and cons pages work well together.

I realised I had forgotten to change the symbols to the cross is stead of a check mark so I adjusted this  to finish the section.

The next section will show some examples of how they can be used successfully when in the right context. I felt the last section was quite heavy with the colours so I have used a similar layout and colour scheme to the first section to give the eye a rest and make it easy to digest.

In my notes I made a list of possible purposes for the styles that I am going to show with images as examples. It will use the split layout to show the comparison.

I haves used the same shapes as the links buttons and the check marks from the pros section for continuity.

This is the final layout, I have kept the categories to five to relate to the five pros mentioned earlier. 

To finish it I made the flat check mars the same colours as the pros section.

The next section will talk about the combination of the two referred to as 'skeuominimalism' or 'almost flat' The symbols represent the cross over of principles coming together to make one.  

The illustration of the mac uses both ideas of skeuominimalism by having flat shapes with flat drop shadows to create depth.

I have stripped back the symbols to reflect the quote and style of design.

The button at the bottom of the page takes the screen back to the first section.

This is the first page finished now so I can move onto designing the the guidelines page.

I want the guidelines section to be very visual to make the content clear and easy to understand. I have made a range of different icons that I will experiment with in the layout. This was informed by the notes I made at the start, I have taken all the best points that I think are successful form my research.

I have used the three circles to represent the three styles talked about in the last section of the about page.

This section illustrates some of the characteristics and techniques that can be used to best suit the outcome. I want the user to take into consideration the output and chose techniques that are suitable.

Typography is a fundamental element of minimal design and a type face with different weights is preferred to utilise hierarchy.

This section illustrated the different effects that can used such as drop shadows, flat shapes and colour and shading effects. Again, the message is to use them subtly and in the right context.

Bright colours are a common thread in minimal design so I have included some of the most popular colour palettes for inspiration.

I wanted to include a section about geometric shapes and how they can be used to create icons for consistency to create well balanced designs.

This section talks about content taking priority so I experimented with the layout to utilise the negative. I want it to be open to avoid distraction of the illustration and type.

The next section is the final page so I have used the three circles from the first section to symbolise the end of the page. To finish the site off I have used a statement that I wrote to sum up my opinions surrounding the relevance of each subject and the considerations of the output.

To finish the page I added some symbols of digital devices to tie in with the overall theme.


I want to create a short animation to show how the website would work as I am not coding the site. I have arranged each detail onto separate layers so I can later edit them in Flash.

The background colour and the mac screen will be in the same position throughout so I have put them on two separate layers to allow the pages to sit underneath.

I have made separate layers for the links buttons. The colour of the text in the buttons will change colour to show how it would look if the cursor is hovered over.

Finally, I needed to make the links for the about and guidelines pages. I want them to be fixed with the content scrolling so they needed to be on a separate layer.

Adobe Flash Animation

I hadn't used flash before so it was a lot of trail and error to figure out how it worked. The principles are similar to photoshop and music software so I had a rough idea of how to use it. 

The static images were easy to arrange, I had to load them onto separate layers and arrange the time frames accordingly. The hardest bit was the moving sections, I have to create motions tweens to allow the about and guidelines page to scroll.

I have made it so once the viewer reaches the bottom of the pages there is the option to go back to top  button. I have made it so the animation show this by scrolling fast back to the top of the page before going to the next.

Once I had all the timing sorted out and in place I had to mask out the top and bottom where the scrolling pages were visible, I simply drew two boxes that were the same colour as the background.

For hand-in I have rendered the video to a quicktime file to it can be played on any mac, to upload to my blog I had to use Vimeo to embed the code. Considering I haven't used flash before I am pretty pleased with the outcome.