OUGD504 - Design for Screen - Only design studio talk

After the talk from Only Studio today I realised that I was going about my design process the completely wrong way. Although it was informative to look at other examples of app or web design it was not a good way to go about designing the task in hand as it wouldn't inspire any creative or innovative pieces of design. 

To start designing you must identify a problem and find a solution. 

Common misconceptions about web design are that you need to be able to code, web design is boring and web design is not innovative. Web design is limitless, constantly evolving and here to stay. It can elevate a brand to a much higher level than previous. Although web design may have some limitations designers embrace these challenges and push opportunities where possible. 

Things to consider when designing UX or UI are:

• What is the primary way of consuming this brand? - google, instagram, app, website etc. 
• Think outside the box, recognise limitations and push past them where possible. 
• Recognise that technology is constantly evolving.
• Think about user experience such as how it feels, sounds, looks and interacts on every layer. 
• Designing for screen has to be universal. Think of all the users. Age, gender, how tech savvy they are. Can 37 year old Jane navigate the website?

Stages of designing for screen: 

1.  Research - Who is the brand? Who are it's competitors? Who is it meant for? Users? Archetypal person. Create 5/6 different personas and evaluate if it will work for them
2. Wire Framing - Paper sketches, processes, tasks to do.
3. Design - Visual Design
4. Front End - Developers, coders, you as the designer don't have to physically do this part but you must communicate. 

Steps 1+2 = You working with others

Step 3 = Your Work

Step 4 = You communicating with others to bring design to life 

In industry you would regularly test designs with users to see if they can complete tasks on the website / app to ensure there are no bugs and that the design is not too confusing. 

As a student I can replicate this process using the crits to test out and get feedback on my design. 

Wire Frames are used to decipher what's on the page and how big it is / each feature is.

Using a black and white mock up as a template you can move on to insert more visual content, injecting a cool factor, or heritage to a design. 

When designing a website you can't design the look of every single page as there may potentially be thousands. However the majority of these pages follow the same grid / patterns as one another so it is possible to design guidelines for other designers to follow to ensure the site is fluent and congruent. These are called Digital Brand guidelines.

In this case you use one 'template' for each relevant page that uses a similar layout and then more can be produced following the same guidelines. 

In total you should have around 7 / 8 different templates including: Landing page, first level page, course (Uni example) page, user interaction, breadcrumb style. use your judgement to see when designing another page becomes unnecessary. 

Design at 4 different sizes to accommodate a variety of screens. 

Producing design like this is fast paced with a quick turnaround. Many of the designs have a slightly editorial look but are designed and repurposed for use on screen. 

Create optimum design solutions for every platform and every device. No worse experience upon switch over. 'Devicegnostic' 'Accessable for everyone' ' Colour Compliant' Design for as broad an audience as possible. 

Space is important in design > Distinguish between content and image. Consider the line length of text aswell. 

Keep checking the advances in design for on screen and mobile. 

Crudely mock up designs and prototypes in After Effects or Invision to make them move and to communicate to the developers what it is that you're after. 

Get statistics up front before starting the design of a project into what devices are most likely to be used for viewing the subject content. I could replicate this through conducting a survey. /decipher whether you're designing for desktop or web.