OUGD504 - Design for Screen - Chrome Tab Bar

In order to make my solution more consistent and make the new symbol more recognisable, I changed the tab bar by removing the pixelated logo and adding my CMYK symbol.

Current:

My solution:

This makes it easier for the user to find the site if they have numerous tabs open and communicates the brand, ultimately enforcing the new brand on the user which current users will get used to the more they interact with the site. I mocked the tab up in Chrome because I identified it as the most used web browser by the target audience.

OUGD504 - Design for Screen - Objectivity

Why would they visit the interface? What is their motivation?

The target audience would visit the site in order to gain inspiration and a further understanding of print media. The ability to save projects and discover new designers and agencies based on their previous searches motivate the user to create an account and utilise everything the site has to offer. The minimalist and predominantly image based layout will present the work in a more engaging manner which will encourage the user to use the site more frequently. The user can also use the site to get to the shop.

What do they aim to achieve?

• Increased understanding of the techniques and processes involved in print
• Get exposed to designers and projects they aren't familiar with
• Save projects to their own personal library where they can refer back to them
• Find news and events about the world of print media

Are they already aware of the content on the website?

As People of Print already have a large following, the target audience will already have an understanding of the context of the site. Depending on how much they use the site. A lot of people that I have spoken to said they discovered the site through social media therefor they already knew the site was about print media design.

Do they need specific information?

The new menu bar and navigation system shouldn't require any instruction because such a wide audience will visit it, however for the new account feature a short and concise explanation of the site will inform both new and existing users on what the account offers, giving motivation to join. 

OUGD504 - Design for Screen - Audience

Only's visit has informed my research method as I intend to thoroughly analyse and identify the audience in order to target my give my project more direction and inform my user interface.

People of Print is essentially a design website for designers.

The design community is extremely broad as different disciplines and practitioners prefer different research methods as well as all taking inspiration from different places. The current and most obvious target audience are followers of creative culture with specific interest in print media. Whether these people are professionals, students or people who simply have an interest in design is something I need to identify.

Individuals

Age - Focusing on 18 - 26 year olds will cover training design students from A level/college all the way through university. It can also be used by graduates for visual inspiration and also for submitting their projects and gaining exposure.

Gender - Site is currently gender neutral. The blue and pink colour scheme currently used by People of Print along with the diverse content will appeal to a wide audience, both male and female. I aim to keep it gender neutral because the audience is still the same.

National/International - Currently the work displayed is international which suggests the site is used and relied upon around the world.

Company

Facebook presence is high and the expansion into retail with projects such as Posterzine and Magazine draws a lot of their audience. However I have identified this to be obtrusive to the catalogue of print media.

Will the users be using the site for themselves or for someone else?

Predominantly for themselves in order to gain inspiration for themselves. Everyone becomes inspired in their own way.

I aim to tailor the website in order to engage design students, graduates and professionals in a smart, efficient and visual platform.

OUGD504 - Design for Screen - My Brief

My research and potential concepts for bringing hands on processes onto screen lead me to look into the resources that I use to inspire creativity. Based on the crit sessions and feedback I have received, it is clear that I have explored a lot of solutions, however identifying a problem was proving harder than I thought. My research into immersive and engaging websites such as Les Garcons Sauvages and Studio Lauke Siebien demonstrated what can be achieved on screen which has been really inspiring. By analysing user interfaces that I am interested in and use on a regular basis in relation to my interests, I identified that People of Print has a lot of potential for improvement as the content is all present and contemporary, however the interface doesn't reflect the raw and physical presence of print media.

The Brief

Problem

People of Print is a dependable design website that focuses on inspiring and educating creatives in the world of print media, however their website interface doesn't engage or excite creative minds. Considering People of Print's website provides a plethora of print media, the website struggles to deliver this content in an engaging and immersive fashion due to the static and crowded interface which doesn't reflect the raw and physical presence of print media. People of Print's expansion towards retail and promotion has crowded the site, making the user experience frustrating and problematic, ultimately hindering creative inspiration.

Question

How can I take advantage of the potentials of user interface and experience to help People of Print fulfil its purpose to inspire and educate creatives?

Objective/Aims

Create an immersive and engaging user interface for People of Print that evokes the characteristics of print media on screen whilst aiming to inspire and educate its audience.

• Make it efficient in order to aid research
• Engage and excite creatives - Increase the sites ability to inspire and educate
• Improve user experience 
• Encourage creatives to engage with the company

Target Audience

• Followers of creative culture and design with a specific interest in print media.
• Design Students
• Design Graduates 
• Professionals

Deliverables

• Working mock ups of the interface
• Extensive research and development 

Supporting Resources/Information

• It'sNiceThat
• Creative Review
• AIGA
• Studio Lauke Siebien 
• Les Garcons Sauvages

OUGD504 - Design for Screen - Design Process Lecture

Focus on emotions

Every user interface should be designed for a specific target audience:

Individuals

Age
Men/women
National/internation
What is their occupation
Average income
Urban/rural areas

Companies 

What is the size of the company?
What is the position of people in the company?
Will the users be using the site for themselves or for someone else
How large is there budget?

Conducting Research

In order to identify my target audience and also inform the design to suit them:

• Page impressions - A request to load a single page on a website
• Unique Users - Number of individual users to a site over a defined period, often a month. This method allows 
• Personas - Create characters based on the target audience and test the website using there persona. 
• One on One interviews - Approach members of the target audience and see what their opinions are - good/bad
• Questionnaires 

Why would they visit the interface? What is their motivation?

What do they aim to achieve?

Are they already aware of the content on the website?

Do they need specific information?

What information do the users need and in what order to achieve the goals quickly and effectively?

Idea Generation 

Have the idea, write it down, move on

Frees experimentation - Step outside the box

Sketches, mood board, mindmap

Solution

Sketches and wireframes

Visualising Ideas

Site maps - Get to any page from any page

What's most important? Hierachy

Allows me to see how the navigation of the site will work:

Useful for sorting out hierarchy 

This can inform the wireframe of the website:

Wireframe

Images - Box with a cross through it

Text - Box with lines

Ensure all information is on the required page - order of importance

Provide structure for the design page before deciding how it looks

OUGD504 - Design for Screen - Concept 1 and 2

Website

Keeping People of Print as a website is appropriate because I am trying to aid and engage creative's research processes. I have found that students and designers use computers when researching, rather than apps or tablets because the computer allows the user to view images and text on a wider screen, providing more room for larger images and type, increasing legibility. Laptops and computers also have more controls due to the touch pad/mouse and keyboard allowing the user to easily navigate and explore the interface.

Concept #1

Educational Research Hub

User can create an account so that they are able to save projects and designers to their own 'library'. The directory can become more of an important section of the site as it will suggest projects and designers based on previous searches, further enhancing the research/inspiration process. 

• Organise the information into clear categories and disciplines of design

Finding a specific category is problematic on the current site as the 'categories' section of the site is hidden. Making this more obvious will allow the user to explore specific and relevant research more easily. 

• Save projects

Due to the large amount and continuously updated content, trying to revisit a project can be almost impossible. To solve this the user can save projects and/or designers to their 'library' so that all their projects are in one place. 

• Personalised

Being able to save projects allows the user to personalise the information they look at. The site can also use cookies in order to suggest relevant projects based on the users previous searches and saved projects.

• Discovery

This can feed into the previous point. The current directory is random inconsistent, in order to inform the user on design studios and designers they're not familiar with, the directory can be personalised to the user based on their previous searches and liked projects. 

Accounts usually get rid of adverts which dominate the sites side bar, this gives the user an incentive and motivation to join.

Site Map:

Created an initial site map so that I can determine what the navigation menu should display. As I have identified that the People of Print's navigation bar is obtrusive and crowded, I aimed to simplify it with the intent to immerse the user in print media.

Disciplines

User can search specific disciplines of design such as graphic design, illustration, fashion and photography.

Techniques and Processes

User can search for articles and submissions from specific techniques and processes to do with print. Eg - Lithography, typesetting, embossing, etc

My POP

Central in the menu to draw the audiences attention and encourage them to use it. This is where the user can view their saved projects, suggested projects and a personalised directory.

Shop

Magazine, Posterzine and Store - The current menu has 3 tabs that takes the user to the same shopping page. Simplifying this to one will declutter the menu.

Community

Submit to people of print, news and events - Currently, to find specific articles about events, the user would have to browse through the small categories bar to find the events section. This is a time consuming and un-engaging user experience. Hiding this section in the small categories bar doesn't expose the user to all of the sites features.

Created a sitemap that illustrates how the sites menu bar will aid the user to gain as much inspiration as possible and take advantage of all that People of Print has to offer:

Concept #2

Make the site immersive and interactive so that the navigational system is as inspiring and engaging as the content. 

Make the sites navigational system similar to the techniques and processes used in print - interactive features will help to achieve this and make the experience more immersive and inspirational. This was influenced by my research into Minimalist design in order to see how successful design organises a lot if information.

Minimalist Graphics, Julia Schonlau:

'With today's visual landscape cluttered by advertisements, ranging from backlit poster displays to guerrilla marketing strategies, minimalist design can appear almost reactionary.'

Colorcult created a magazine and screen printed posters to accompany it with the purpose to make the information immediately readable in a society where we are constantly showered with information trying to communicate with us:

The content could be argued to be ambiguous as the purpose of minimalist design is to put the function as the primary consideration. The large amount of white space focuses the audiences attention on all aspects of the design, immediately informing the audience. The use of geometric shapes, icons and lines help to channel the audiences attention to the information.

This design can be translated onto screen and provide opportunity to immerse the user in print media by integrating the physical actions and tools used to create print media.

Icons

• Geometric - Keep it simple
• Lines - Off cuts and scrap paper from test prints, etc can communicate and immerse the user in print media creating an emotional and reminiscent response to their practice. 
• Arrows - Points to key information + navigation

Integrating the physical actions:

• Ink Jet printer - Loading screen or presenting a project
• Rolling ink - Changing from one page to another or as a screen saver and the user must wipe off the ink to view the information below. 
• Printing press - Print the information onto the screen

Creates an emotional response, especially to those who practice with print media.

Decision

The range of feedback I received during 1-1 crits, group crits and anonymous crits has given me a wider perspective of the brief so I can make an informed decision. Concept 1 would be the most appropriate solution to the problem because it allows me to organise the content into categories, thus making exploring the diverse print disciplines and techniques and processes efficient and objective. I also aim to take elements of Concept 2 because the site needs to be engaging and immersive in order to improve the user experience. Integrating physical actions of print, along with the natural and digital marks created during print processes will immerse the user in the world of print. These interactive features aim to create an emotional response to those familiar with the subtle marks and icons usually associated with print media.

OUGD504 - Design for screen - Deliveroo

User experiences can subtly influence the audience to further distribute their brand. Once a Deliveroo order is complete, the user can track the food in order to see its progress. This stimulates emotional responses such as excitement. 

Once the order is accepted, 'Track On App' encourages the audience to download their app so they'll be more likely to use it again:

OUGD504 - Design for Screen - People of Print - Further Research

Typeface

Currently PoP use two typefaces:

Helvetica Neue Bold

Used primarily for titles, headings and links - Easily legible and balanced sans-serif is appropriate for reading key titles on screen.

Georgia Regular

Georgia is used for all body copy, however due to the small size of the copy and condensed structure of the serif typeface the text is hard to read on screen, especially on a mobile screen as I have often had to zoom in on the page in order to read it, decreasing the user experience.

Using two typefaces creates contrast which is often used to create hierachy between titles/links with body copy. This is successful, however the body copy typeface needs reconsidering in order to make the information clearer.

It's Nice That use a similar approach to typography by using a large sans-serif for the titles/links and then a small serif typeface for the body copy:

This is more successful as the bold type immediately creates a hierachy making it easy for the user to interpret the context of the body copy. Making the body copy a grey tone again helps to separate the information. Personally, the grey is slightly too subtle which doesnt create enough contrast against the white background, however this is much more appropriate than the condensed pink typeface currently used by People of Print.

Colour Scheme

Pink and Blue is a consistent colour scheme used throughout the entire site, from the logo to the copy. Again, the use of blue for titles/links and pink for body copy helps the user distinguish links from body copy, making it easier to navigate the site. Making the type pink goes against traditional rules to typography as the lack of contrast decreases legibility. This was picked up a lot during feedback sessions as people believed the pink type wasn't appropriate and doesn't benefit the site. As the primary purpose of the site is to inspire and educate, a more traditional approach to typesetting would be more appropriate to increase legibility.

In order to find the relevance of this colour scheme I researched into colour theory:

Pink is generally a feminine colour and blue is often associated with males which suggest PoP have chosen these colours to be gender neutral.

Navigation Menu Bar

Home

The Home page is a constantly updated feed of projects. The user scrolls up and down in order to explore the content and click on a project of their choice.

Store

Removes the user from People of Print and takes them to 'Department Store':

Directory

The directory is a section of the site that lists design studios that have been featured on the site and further links to aid designers research. This is a really beneficial section of the website, however the sheer volume of sources makes it hard choose a specific one that is appropriate for the user's research.

In order to simplify this section, the user should be able to save projects or design studios that feature on the site so that they can refer back to them for further reference. Personalising their directory

Magazine 

'Magazine' removes the user from People of Print and takes them to an external site. This creates inconsistency for the site, however doesn't impact the users research.

Posterzine

Also takes the user to 'Department Store':

'Shop' and 'Posterzine' are both visible on the main navigation menu but still send you to the same link. This is a waste of space on the navigation bar and distracts the audience from finding inspiring concepts.

Submit

People of Print are open to submissions, creating a design community and exposing designers and studios.

Creatives can submit for:

• Website blog
• Directory
• Department Store
• Print Isn't Dead Mag

About

Hierarchy of information makes exploring the site problematic. Placing the map at the top of the page makes scrolling frustrating as the mouse hovers over the map.

Advertisement Bar

The side bar on the right of the page provides social media account information and advertisements which are visible all the time. These distract the user from the relevant content, thus obstructing their exploration for creative inspiration.

The main menu hosts categories of the site that aren't primary considerations for researching into print media, these include 'Store', 'Magazine' and 'Posterzine'. It seems that People of Print have evolved a lot since 2008 and their focus is expanding more than just for design inspiration and education. With external links to their web store, live feeds of their social media pages and advertisements for other creative blogs, the inspirational and educational media gets lost in promotional content. Therefor it would be appropriate to change People of Print's interface so that there is a focus on inspiring and educating and include the promotional side in a different section of the site.

OUGD504 - Design for Screen - People of Print

The website began in 2008, originally created by Marcroy Eccleston Smith, as a library of illustrators, designers and printers both creatively and commercially with the purpose of educating and inspiring.

From previous research and projects, I have identified that designing for print can be perceived to be in the shadow of design for screen.

The website is very static as the header is fixed the the top of the page. The header contains the logo, search bar and navigation bar which takes up a lot of the space on the page.

The content is centred in the page which leaves a lot of white space on either side - There is potential to take advantage of the size of the screen which allow room for larger more engaging imagery.

Scrolling down the home page reveals a range of projects from random disciplines of design such as editorial, poster, branding, interviews and educational videos. This is relevant for the home page as it should let the user specify what category they want to look at. However, the home page doesn't specify the discipline of design it covers. If this was specified it would make finding a specific category easier so the user can focus on a specific element of design they are looking for inspiration from.

The static header bar and narrow layout condenses and cramps the contents making the copy hard to read. The lack of white space doesn't allow each article to breath which can overwhelm the user.

The further information bar also gets in the way of the narrow and condensed content:

Categories section is in the lower bar which is hard to find. Isn't an easy or visually stimulating set up:

The category section should be a prominent area of the website because it will allow users to specify their search. The 'Category' section should be visible from the home page as it is time consuming to find. 

Once a project is clicked on, the link sends the user to another page. This disrupts the flow of the site as the user has to wait for the loading screen to finish. 

Evidence of the large header intruding on the content:

The large images can not be seen in full which is frustrating as the user has to constantly scroll up and down to see all elements of the composition. I am surprised the website hasn't changed this because it's primary source of material are predominantly high quality images of the work.

Considering the purpose of the website is to inspire and educate creatives interested in design for print, the user interface and experience don't communicate this. The large header make browsing and viewing the large images frustrating as it is impossible to see the full sized image. Giving the images white space will allow them to breath so the user can engage with the work with ease and immediacy.

People of Print provide a 'Submit' section where creatives can submit images of their own work in order to gain exposure from the website, however due to the static and obtrusive interface this may put creatives off submitting work as all the image can't be seen without scrolling up and down.

Problems:

• Large header intrudes the content
• Not user friendly
• Doesn't live up to the standard of work
• Doesn't communicate print pushing boundaries/tactility/texture/tradition
• Categories section is hard to find and isn't visually stimulating - Just a drop down menu
• A lot of specific categories 
• Branding - What is the relevance of pink and blue
• Inconsistent - Clicking Store or Magazine takes you to a different website
• Clicking a link removes the audience from the home page, wait for link to load, then see it. 

Mobile 

OUGD504 - Design for Screen - Design Studio Websites

Computers and smart phones are primary sources for an array of different user interfaces and experiences.

Really useful site for exploring and understanding what the new iOS10 is capable of which can help inform my future concepts:

https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

There are an array of opportunities that Apple have provided from their carefully considered interface. This website has a huge amount of detailed information about each aspect of Apples new interface. As Apple is the leading mobile and computer resource, this information will be essential for creating an app that takes advantage of all interactive features.

Shows how considered each and every element of the user experience is. I can refer back to this source when developing my concept.

Website Research 

Studio Laucke Siebein is a design studio based in Amsterdam and Berlin. Dirk Laucke and Johanna Siebein specialise in creative strategies, dynamic identities, book- and web design for cultural as well as commercial clients. They combine a strategic approach with high-quality design within the scope of different media.

The website's minimalist layout draws the audiences attention to the content due to the large amount of white space. This emphasises the importance of white space as it makes the website easy to browse through.

All attention is focused on the name of the studio once the site is opened, immediately informing the audience on the branding of the studio. During Spiekermann's Typomaniac talk in Berlin, he talked about how importance of typography for a website/app because it reflects the overall branding. This will need to be considered for the purpose of the website and client. The contemporary and minimalist layout is appropriate for SLS because it is a creative design agency.

Opening screen:

Helvetica is easily legible on screen and connotes organisation. The typeface was adopted by the Swiss design movement which focused on clear organisation of typography and layout - This is reflected through the design studios website and shows how appropriate the choice of typeface is. 

The hint of content at the bottom of the screen entices the user to scroll down to reveal it, if it wasn't there the user may get lost/frustrated. However that could be appropriate for the agencies target audience as it would force the user to explore the web page to find the content, connoting the studios creative exploration. 

As the user scrolls down the title is removed from the top of the screen and replaced with web links allowing the user to easily navigate to specific sections of SLS' practice. This menu is always locked to the top of the screen so it is always accessible. 

Noticed the site doesn't have a tab icon which makes it hard to recognise when a range of tabs are open.

SLS should consider creating a simple tab icon so that the site can be easily identified. This could simply be SLS in Helvetica to support the minimalist style and typeface used for the branding.

Navigation menu:

Splitting the sections into categories aids the user by making everything so clear and accessible. Underlining the selected category confirms the page for the user. The locked navigation menu is always visible and overlaps with the content when scrolling through the projects. The text is still legible due to the white background, however when it is layered over a dark image it can be hard to see. To overcome this the user has to move the page up or down. For me, this doesn't intrude on the user experience as layering the menu allows more of the content to fill the page, allowing me to see their work in more detail, making it an engaging experience.

The projects are organised in three columns, taking advantage of computers wide screen by making the images large and visually engaging. Focusing the users attention on the images by making them large gives a taster of the project, enticing the user to click on it to reveal more.

Clicking the image link reveals a pop up box containing further info:

Most sites will direct you to a separate page, however this can be disorientating as it completely removes the audience from the context. SLS continue their layering method which is extremely user friendly because once the user scrolls all the way through the content the box disapears at the top of the screen, placing them back onto the home page. This makes the browsing process really fluid which encourages the user to explore all of the content without long loading screens.

iPhone Screen:

Transferred a lot of the wireframes from the website, however it is simplified to adapt to the smaller screen. Instead of three columns only two are used so the images can still be large and engaging:

Very limited typography is used so the content isn't crowded. Again, the menu is layered over the content:

Simply tapping the image opens a pop with further information:

Swiping down returns the user to the home page or they can press the X icon.

The + icon takes advantage of the limited space instead of using type, revealing the categories:

Simply tapping the X removes the drop down box. Using icons instead of words creates more room on the narrow screen. SLS' website is an example of a well considered user interface that creates a positive and engaging user experience. The continuous flow of visual information engages the audience which is appropriate for a design studio because it makes the user explore past work.

Overall, SLS' website communicates their brand and contemporary design successfully because the website is very simple and easy to use due to the minimal layout. I really like how the site doesn't remove you from the context of the page with the use of pop up boxes. Physical actions with the users thumb and screen such as swiping make the navigation process satisfying.

Key points to take forward

• Minimal layout makes it easier to navigate
• Pop up boxes don't remove the audience from main page and make it easy to return
• Transferrable layout over different screen sizes - Be consistent
• Overlapping the menu bar allows more space for images - More engaging
• Typography cohesive with the brand
• Icons instead of type - Save room and cohesive with the identity of the site.
• Suitable for its target audience - Designers/Potential Clients

My name is
http://www.mynameis.fr/en#les-garcons-sauvages/3

When the page is opened it immediately plays a Gif.
'My name is ...........' - Different names flash up stimulating the audience with the small type and large black ground.

After approx 4 seconds the menu drops down from the top of the screen. The short and sweet transformation doesn't confuse or bore the audience, creating positive emotions due to the slick movements, modernist aesthetics.

To help the audience identify projects from specific disciplines, the site highlights specific projects making the navigation of the site more efficient and also engaging:

Scrolling down reveals previous projects:

The title and menu are all locked to the top of the screen and overlap the content in a similar way to Studio Laucke Siebien.

Projects can be explored using the arrow which automatically appears instead of the mouse. Instead of removing the user from the page the horizontal navigation allows the user to effortlessly view the brief in more detail:

This can be used to organise a lot of information and improves the user experience.

Icons:

? - About & Contact

The question mark isn't prominent on screen due to the small size and large amount of negative space that surrounds it which can be problematic for users who are specifically visiting the site in order to get contact information. However, focusing the audiences attention on their work is appropriate as icons and headings aren't obtrusive to the content. The question mark can easily be transferred onto small smart phone screens, making the interface consistent across platforms.

The site provides slick and concise movements in order to aid the users experience. If the user stops scrolling between projects, the site automatically moves the project so that is central on screen and also lines up with 'My name is...':

'Screen saver' engages the audience if they haven't been active on the site. Simply clicking the screen will bring you back to the page you were on, this doesn't frustrate or impede on the audience:

This playful concept creates a positive user experience which and brings the audiences attention back to the website.

Les Garcons Sauvages
http://lesgarconssauvages.com/

Paul Gacon developed 'My name is' website for Les Garcons Sauvages in 2016

Layering the title pages makes them easily accessible, however the further the user scrolls down, the more titles are stacked over each other.

The interface is extremely immersive due to the type layering and obtruding on the images. Although the type is intrusive, it is appropriate for this website because their target audience will very much be specialised for designers in order to showcase their design capabilities to clients. This is an example of how organisation of documents/projects on screen can be organised in a continuous flow of information which makes it really engaging and visually stimulating.

Easy to get lost on the site as the layered type and images can make the experience problematic.

The title of the project that is being viewed is arranged at the front of the screen, making it clearer for the audience to establish the context of the images.

During this research, I have identified a range of immersive and interactive features that design for screen is capable of. These immersive and forward thinking interfaces are appropriate for the client and target audience. Using these interactive features for corporate identities, or sites that will be visited by an older generation, they may struggle to understand the interface which can become frustrating. The information that design studios put on their website is predominantly visual, therefor a lack of typography is appropriate. Layering image and typography as the user scrolls will can become very problematic if a lot of typography needs to be featured on the website.

OUGD504 - Design for Screen - Coding + Responsive + Hamburger Icon

A programmer, computer programmer, developer, coder, or software engineer is a person who writes computer software. The term computer programmer can refer to a specialist in one area of computer programming or to a generalist who writes code for many kinds of software.
Coding is a key skill to learn for creating websites and specific jobs require different languages of coding. These include:

HTML - Hyper Text Markup Language
CSS - Cascading Style Sheets
Java - Android Language
Javatranscript - Advanced effects and added interactivity
iOS - Apple language
PHP - Server based language
Ruby - Twitter

Developers will rarely have an understanding of all coding languages due to the extensive progression of digital technology, therefor the developer will need to be considered depending on the type of project.

HTML and CSS are most used for web developers because they form the basis for what a website is made out of. Other programs such as Java help to add effects and interactivity to the website, which are dependant on the task.

Browsers

Primarily the software we access the internet through:

• Chrome
• Firefox
• Safari
• Opera
• Internet Explorer

Different devices present a websites differently, however a short survey of the class identified that the majority of people in the room used Google Chrome, a few used Safari and the rest were unused. I can use this to influence my concept because I am creating a design website for designers. A room filled with designers have evidenced that Google Chrome is the most popular. 

Devices

• Desktop Computers
• Laptops
• Tablets
• Mobile Phone
• TV

Changes the way a website/app looks

A responsive web design can transfer the information from one device to another, for example from a desktop computer to a mobile phone. Transferring a website which is predominantly landscape to a mobile phone which is portrait can become problematic.

A good user experience allows the user to get to any page from any page, this is often problematic for transferring long navigation menus onto a small screen. To overcome this, the hamburger icon is used.

Hamburger icon

Used to open a navigation menu on small screens such as mobiles - Accepted as good design practice
HOWEVER they can slows down navigation.

Alex Tyagulsky, an app designer, on the benefits of the Hamburger icon:

"The biggest one is you can put a lot of information inside it, and at the same time provide a consistent way to find this extra information. Facebook is a great example of this."

However James Foster, a web developer based in New Zealand, has surveyed users' interactions with the button over the course of many months. He believes that the icon can be hard to notice and it can mean different things to different people.

Fosters' findings:

• Adding the word "menu" underneath the three lines increases the button's use by 7.2%, according to Foster's tests.

• Putting the hamburger inside a box, so it looks like a button, increases use by 22.4%.

• Switching the lines for the word "menu" makes 20% more people click.

It is clear that if people do not recognise the icon, it can have a detrimental effect on the engagement with design. Personally, I believe that the efficiencies of the Hamburger icon depends on who is engaging with the site; target audience. Perhaps a younger audience would recognise the icon more because they have been exposed to it for years, whereas the older generation will be looking for words, not symbols in order to navigate the site.

Images

Design for screen uses 72 pixels - Quick image loading

However now retina displays make the high quality images take longer to load, this needs to be considered for user experience as a study found that it takes 2.6 seconds for a user to decide whether to stay or leave the site. If the images are taking too long to load, the user will close the website and find another one. 

Coding a basic website:

Used a basic program from Mac - TextEdit

Key information:

HTML - Divides each element of a webpage within an open and closed tag:

Open: <home>

Closing tab: </home>

For example, putting a paragraph on a site

Opening tag:

<p>

at the end of the paragraph, closing tag:

</p>

Basic Website - Have to be included in every single website:

<html>

<head>

<title>

<body>

(All of these will need to be closed) 

Basic Website:

<hmtl> - Tells the browser we are using HTML

<head> - Telling the browser what scripts I am using - Not visible on website

<title>

website

</head>

</title>

<body>

Hello this is a website

</body>

</html>

Save As: Index

The first page has to be saved as an index - From this point on the website can be called what I want

Beginners learning code:

Codecademy

Previously I had very little knowledge on the role of developers and coding, however this research has encouraged me to gain more of an understanding. The digital age we are living in is progressing more and more so it is important I stay on trend. 

OUGD504 - Design for Screen - Only + Primary Concepts

Visiting Professional

Only

Only Studio is a strategy and design consultancy - 'Through research, strategy and design we connect brands with people in unique and compelling ways.' - Primarily, the studio works with digital design such as websites and apps, as well as some print. This is relevant for this brief as they can help to inform my production and research methods for my screen based outcome.

From the presentation they highlighted the broad range of sectors that they have covered from past briefs, these include:

Education - Universities such as Goldsmiths
Music - Promotion/Festivals
Luxury - Car companies such as Aston Martin

Covering a broad range of clients would provide a lot of creative techniques and processes due to the diversity of the briefs. It was encouraging to hear that the designers don't have to have skills in coding, instead a clear visualisation of the concept and clear articulation will help the developer to produce the final digital outcome envisioned.

A developer is responsible for programming the code that “tells” a website how to function. A developer builds a website from the bottom up, which means designing it in such a way that end users have no difficulty navigating the site. The website should not be so simple that it does not appeal to advanced users, nor should it be so complicated that the beginner is easily lost in the process.

Only highlighted the fact that design for screen is constantly evolving and it is becoming the primary way of consuming a brand. The digital world is constantly evolving due to the technological boom we are currently experiencing which ultimately provide endless possibilities for experimental and interactive features. Design for screen is here to stay. 

Design Process:

Aim to take influences from Only's design process as I haven't approached a digital brief like this before. 

1 - Research - Audience - who/how? Personas

Highlighting the specific audience is key as it feeds into appropriate uses of user experience and aesthetics. Think about WHO, HOW, WHY. Only expressed the importance of using personas to create reliable and realistic representations of your key audience segments for reference. These representations should be based on qualitative and some quantitative user research and web analytics.

2 - Wireframing - Good for testing

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. Only expressed the importance of creating wireframes especially for testing how the interface works - Almost like a test print!

3 - Design

4 - Final

Only's aim is to create work that can work on a range of screen/media which is considered through the wireframing and tests.

Goldsmiths University

• Famed for their creative approach to teaching and research, the institution maintains a global reputation for excellence in the arts and design. - Helped to inform the engaging and contemporary layout.
• Expressive elements for inspiring content; readable elements for informative content; and oversized elements for signposting. - Shows how the layout are adapted so that it is appropriate for the type of content. 
• Works across different screen sizes and formats:

Computer:

Ipad:

Only's example of informed, appropriate content based on their research into Goldsmiths historical and contextual characteristics shows how they are leading by example.

Further Notes:

'DON'T CREATE AN APP FOR THE SAKE OF CREATING AN APP' - Designing a website/app needs to be justified by research into target audience and how/where it is going to be used.

Envision - Source for creating working wireframes for free

Text - On screen people don't like to read long lines of text. Particularly with small screen, the type can go off the side of the screen so the user has to keep manipulating the position of the page. To overcome this, Only suggests short line lengths that are bold and considered.

Questions

Who do you test?

Usually people in the building for small briefs
For large briefs they set up a group, however members of Only do not run these tester sessions to avoid bias feedback.

Are there limits?

If something can not be achieved by the developer then you are doing it wrong

Summary:

I found the presentation really beneficial because the studio embrace expression and innovative design whilst making it appropriate for the client. User experience was key to Only and their emphasis on research/wireframes justified how important it is for producing a solid, working outcome. I like how Only consider their target market and client ethos using personas as it helps to create a solid platform to work from, this is importnat for creating a successful and consider user experience.

Primary Concepts

Based on the initial mindmap, I identified a range of screen platforms and user interfaces are commonly used to aid every day life.

In order to produce an objective outcome I need to identify the:

• Client
• Problem
• Target Audience
• Aim of the project

Idea Generation

What am I interested in?

• Art + Design
• Creative practice
• Music
• Film 
• Fashion
• Analogue Processes
• Texture
• Physical publications
• Surfing
• Printing

Considering every day life will help me to consider a problem:

• Shopping
• Maps
• Text
• Call
• Search web
• ATM
• Chip and Pin

1 - Fashion textile patterns - Influenced by my interest in fashion and textiles. I have experience with sewing material using patterns to create clothes. These provide a guide for the size and shape that need to be cut out of the material in order to be sewn together.

Working with patterns make high end fashion available for anyone to make, bringing big labels to a wider audience. These templates are really useful for design students and professionals as they provide exact measurements and sizes.

Client - Vogue Patterns would be a potential client as they offer designer sewing patterns which are constantly updated.

Problem - Finding a specific pattern can be time consuming and often expensive as they have to be ordered in. For design students and people interested in design, this makes the design process expensive and time consuming. The tissue paper stock that it is printed on is very fragile as it tends to rip and crease easily, making them unusable/less accurate.

Target Audience - Fashion/Textile design students/designers

Aim - Provide an App that allows designers to browse an array of patterns that can be immediately available to use in order to push practice.

For this concept i would need to research further into methods of getting content from screen to paper quickly and easily so that the patterns are immediately available. Also creating a creative community where other people can scan patterns using their phone and then uploaded for anyone with the app.

2 - WSL - Increase understanding and awareness of The World Surfing League through their App.

Especially in the UK, surfing isn't widely considered as a professional sport and people don't tend to follow it. This year announced surfing as a new Olympic sport which is a great opportunity for the sport to increase its following.

Looking at the current official WSL App:

Home page:

Highlights from the surfing league are constantly updated through the news feed. The large images are engaging and videos are available to watch immediately by tapping the image, making it quick and efficient for portable media.

• The panel at the bottom is static making it recoginsable for the user to refer back to.
• Swiping the screen provides a continuous stream of information - Fluid
• Colour scheme - Blue and white is cohesive with the colours used in all images - Connotes moving water.

Each heading for specific events could stand out more making it easier to identify what information is for each category, especially for people unfamiliar with surfing.

It is in fact user friendly, specifically for people with background knowledge about surfing which is relevant because it is a specialist app.

Potential

• Surf forecasts
• Events near you
• Increase understanding by having silent videos playing explaining he rules of each event.

Student Banking - Keep track of spending every day. Constant updates every time you spend and a total at the end. Able to see the total spent a week and set a weekly budget.

Beneficial research would include looking at student banking

Traditional Printing

Create a source that makes analogue techniques such as traditional print easier and more accurate.

• Registration sheets for screen printing or lino printing help to make sure the content is in the desired position.
• Usually marked on printing press where the content needs to be
• Projecting an image/laser where the content should go would make the prints more accurate and consistent.
• Specifically for screen print, an app that separates each CMYK for you, making preparation for exposure easier. 
• Letterpress - Type in the text, size and typeface and the app will reverse it for you, making it easier and quicker to set. 

Review

Reviewing these concepts and considering Only's presentation, I have identified that my initial concepts don't solve a problem because they make a process longer, thus degrading the user experience. I don't want to create an app for the sake of creating an app because they create more problems.