OUGD504 - Design for Screen - Cross Device Example / Design Extension

Here evidences the Style Library Visualiser app's potential for translation across other platforms, the iPad in this particular instance. By simply introducing an additional column to the existing visual language layout, the design shows the apps prospects for usage on a larger scale format whilst maintaining the integrity of the original iPhone application and Style Library webpage from which influence has been derived. Although only a limited glimpse into the alternative formatting of the Style Library Visualiser app for iPad, it is clear to see how the pages would evolve in this point of delivery. 

The image below provides a visual representation for the full optimisation of Style Library as a multifaceted, cross-device formatted utility for use by the target. With multiple tools and points of access at their disposal, the app's original objective to alleviate the struggles typically faced in the interior design process regarding the planning, selection and purchasing of wallpaper for the home is achieved. 

OUGD504 - Design for Screen - App Journeys

With the Style Library Visualiser App design complete, the 'journeys' below show each and every circumstance/possibility of page interaction to be experienced by the target starting with an overview of the navigational pages, followed by the navigation bar from left to right, and finally the personal account section of the app. These pages document all eventualities that can be experienced by the user when using the app as well as act as a showcase for all pages designed in response to the design for print brief.

Please note: upon opening of the app, the opening screen exhibited immediately below will be visible for 1 second.

OUGD504 - Design for Screen - Colour

The Style Library Visualiser app, in cohesion with its existing visual language, is void of any colour that is not supplied via the use of photography of the interiors and wallpapers is exhibits. This means that excluding white, the app features only three tones/shades, these being exhibited below in addition to their numeric coding:

Left - R: 153 G: 153 B: 153

Middle - R: 153 G: 153 B: 153

Right - R: 255 G: 255 B: 255

OUGD504 - Design for Screen - Symbols & Iconography

The symbols/iconography featured on the Style Library Visualiser App are used to convey particular ideologies through associative imagery to objects and beings. Immediately decipherable, easily understood and recognisable on an international level - regardless of language, culture and identity - these pictograms rely on semiotic recognition. Though in some instances the symbols are accompanied by a typographic label to ensure the user experience is as clear as possible, for the most part the human mind is able to determine and establish an immediate connection with these symbols as a result of familiarity and social/cultural awareness. They enhance the user experience through provision of choice and exploration, allowing the user to navigate subconsciously based on their knowledge of what they are looking for and the mind's established visual associations.

The symbols were taken from website https://thenounproject.com, an online platform to which designers and creatives can upload and share symbols, pictograms and icons to be used within applicable design formats. This website for 'Creating, Sharing and Celebrating the World's Visual Language' allows designers to download and use the symbols so long as either royalties are paid to the creator or the creator's work is clearly credited - especially in terms of commercial development of the app.

Once downloaded the symbols were subtly edited to achieve a more consistent stroke/weight of line whilst keeping the integrity of the creator's original artwork.

Below are the original files and artist credits:

OUGD504 - Design for Screen - Style Library Visualiser App Design

Having designed all the pages required in order to produce a seemingly fully functional/working prototype - at which stage commercially it would be passed on to a developer to be produced - I have created an engaging iPhone app that relieves and aids the interior design process regarding the planning, selection and purchasing of wallpaper for the home using augmented reality technology to allow consumers to confidently identify and purchase a wall covering(s) from one of the Library's renowned brands.The app allows the consumer to undertake this process with enjoyment and ease as they immerse themselves in the brands that provide to the Style Library and the wall coverings they sell. 

The app, which allows consumers to buy with confidence and assurance that their interior decisions will be met with satisfaction and gratification, follows the visual language established on the original desktop site of the Style Library which is clean, clear, well structured and suitably stylish - reflecting the sites content/context as 'the premier destination for Stylish and Quality British Design.' 

The apps primary content is framed by two bars: a brand mark bar at the top and a navigational bar at the bottom, both of which hold permanency due to their locked positions which enhance the user experience through complete ease of use and assured functionality of app exploration. The 'Style Library' word mark is featured left aligned in the bar at the top of the composition on any given page of the app in keeping with the suspected brand guidelines of Style Library. 

Using a limited colour palette of white and tones/shades of grey for the navigational visual information of the app, the design allows for focus to be given to the beautifully designed wall coverings created by the Library's contributing brands and the spectrum of colour they themselves provide. The navigational system of the app has been designed to ensure focus is on the products of the Style Library - being the primary purpose and feature of the app - to inspire, showcase and sell wallpaper.

Almost all typographic headings featured within the app are set in upper-case Arial, reflecting the Style Library's position in its sector of premier quality wallpapers from leading British interior brands while creating cohesion and consistency with the original desktop site. Featuring type at 3 sizes consistently throughout the app page design, these sizes being 12pt, 20pt and 30 pt, all typographic information set at scale appropriate to design for screen. Where appropriate, type has been set as standard with capitals only at the start of words for ease of readability of the smaller type size and for a less dominating tone of voice where un-required.

From here, the apps user experience will be enhanced via transitional animation.

OUGD503 - Responsive - YCN: UK Greetings - Development - Biscuit Foiling

Previous suggestions provided from critique advised that tactility of the cards was important in creating a collection of cards and should be emphasised through texture, embossing and/or foiling. 

Foiling as a finish immediately provides printed matter with the perception of luxury as a result of the semiotic field regarding the material and its imitation of precious metals. With a market value up to a value of £1.7 billion (2016), the greeting card industry is of a competitive nature and therefore new greetings collections being brought to market need to have the ability to stand out and create appeal. By creating a collection that features more luxuriously crafted products, consumers are more likely to make a purchase as they feel they are paying for quality that is superior to other options available on the market. 

Initial foiling of each biscuit featured only one tone through a single layer of gold foil, with detailing and information left as space within the biscuit shapes. This initial approach provided results that looked simplistic, and ‘lacking of something’ according to feedback received in critique. 

Following this, a more experimental approach was taken to the foiling process - using layering of multiple tones of foil to differentiate visual information. Foiling layers range from 2-3 and include Gold, Rose gold, Light Pink and Red dependant on biscuit detail and required colour(s).

This approach produced results with a fuller, more captivating aesthetic with visual interest as a result of the combination of metallic tones. 

OUGD504 - Design for Screen - Critique with Matt from Only Studio

Today Matt and Greg from Leeds-Based studio Only came in to stand in on the day's critiques, proving professional advice and suggestion on how to go forwards with design for screen 

I presented my designs of the app pages thus far and the concept behind the app to Matt and a small group of peers.

The overarching feedback that I received was that so far the app appeared stylish, well structured and clean, successfully evidencing influence from the visual language of the original Style Library site.

Matt said he really liked the concept of the app as it was something that he would have thought of but could see a gap in the marked for the augmented reality wallpaper visualiser. The constructive criticism I received was that there needed to be greater contrast/distinction between the selected icon on the navigation bar at the bottom of the screen design in comparison to those that are unselected.

OUGD504 - Design for Screen - Design for Screen Principles

Colour

Where the application of colour to screen based design is concerned, there are multiple options available dependant on the range and accuracy required - these being:

• 5 digit hexadecimal code - '#' followed by 5 digits, being letters and numbers. These are typically web colours.
• 3 digit hexadecimal code - similar to the above however providing a smaller range of colour.
• RBG - Red, green and blue - the values of light a screen uses to create colour. Details of each colour quantity provide colour information. e.g - 100% red = (255, 0, 0) [RGB].
• RGBA - Red, green, blue and alpha channel. More advanced proving opportunity for use of altered opacity/transparency. e.g. 50% opaque red overlay = (255, 0, 0, 0.5)

FACT - Blue is the most commonly used colour on the internet.

Typography

When designing for screen, a point size of 12 is the smallest a designer can use before legibility issues would ensue.

Web/screen safe fonts

The fonts that are most safe to use are:

• Arial / Helvetica
• Times New Roman / Times
• Courier New / Courier

Alternate options that work cross-platform are:

• Palatino
• Garamond
• Bookman
• Avant Garde

Fonts that work exclusively on Windows and MacOS:

• Verdana
• Georgia
• Comic Sans MS
• Trebuchet MS
• Arial Black
• Impact

Grids

For larger screens, Massimo Vignelli and other masters of design say a 12 column grid should be used to create and produce and broad range of layouts while still maintaining consistency.

OUGD503 - Responsive - YCN: UK Greetings - Development - Biscuit Illustrations

British Biscuit Illustrations

Before each of the individual elements of the UK Greetings collection can be created, first the under-pinning visuals need to be created - these being British Biscuits - that can be transferred across the  collection materials. Below are the the biscuit illustrations created for this purpose:

Each biscuit has been created digitally using simple vector shapes and/or detailing for a playful aesthetic that could also easily be translated into individual separations for foiling and embossing shapes - as suggested in concept feedback.

The illustrations bear respective patterns and/or line work to each of the biscuits that allow them to be immediately identifiable by consumers as their favourites through familiarity of visual representation and association. 

To maintain visual simplicity, each biscuit uses only two tones to distinguish shape/detail information, with the exception of the Jammy dodger which features three tones. 

OUGD504 - Design for Screen - The User Experience: Target Viewpoint

When designing the app, the viewpoint of the target audience must be taken on to determine how they go about buying interior wall coverings to ensure that the app provides them with a number of initiatives on how to buy with an enjoyable confident demeanour. The target, although passionate about interiors and most typically acquainted with the brands of the Style Library, are in need of a utility that makes the entirety of the interior design and selection process a joy from start to finish. 

This leads me to think about what the process is from start to finish, determining the following:

1. The target initially look to the app for Inspiration.
2. They then Search for the particulars they have been inspired by.
3.The target find wall coverings they favour, but are unsure of what it would like like in their home - they save the image for reference: Scrapbook.
4. Using the augmented reality feature of the app, the target Visualise the wall covering in their desired room.
5. Happy with the augmented reality result, they add the wall covering to their basket to purchase. 

This is how I anticipate the user experience to progress: Inspire, Search, Scrapbook, Visualise, Basket.

This will be reflected in design and functionality of the Style Library app.

OUGD504 - Design for Screen - Typeface Identification / Analysis

In search of the typeface used by Style Library in attempt to establish and maintain brand cohesion and consistency - I found that the typeface Arial was of a very high likeness, however the brand word mark has increased tracking and decreased vertical scaling. Subtle discrepancies are also identifiable through shaping of the 'S' and tail/leg of the 'R' being straighter and more definite on the word mark.

Despite these differences, both types have an undeniable likeness to one another. In addition to this, Arial is considered as one of the most web/screen safe fonts as a result of its creation as Microsoft's answer to Helvetica, and therefore is undoubtedly appropriate for the use in the Style Library app and is a commercially viable option due to its free cost as a result of its instalment as standard on computers.

OUGD504 - Design for Screen - Style Library Visual Language Analysis

The Style Library desktop website is clean, clear, well structured and suitably stylish - reflecting the sites content/context as 'the premier destination for Stylish and Quality British Design.' The Library is the home of ground-breaking British design from the internationally renowned brands: Sanderson, Morris & Co, Harlequin, Zoffany and Scion. A unique destination to source inspiration and discover the broad spectrum of wall coverings available from these leading British interior brands.

In using a limited colour palette of white and tones/shades of grey for the navigational visual information of the website, the design allows for focus to be given to the beautifully designed wall coverings by the Library's contributing brands and the spectrum of colour they themselves provide. The navigational system of the website has been designed considerately around the strong interior visuals as this ensures the hierarchy is ordered as per importance/purpose of the site - which is to inspire, showcase and sell wallpaper.

The 'Style Library' word mark is always featured left aligned within the composition of any given page of the site, suggesting that this is a part of the brand's guidelines.

All typographic information on the site is set in an upper-case sans-serif typestyle, creating an air of distinction and dominance - perhaps a reflection of the Style Library's position in its sector of premier quality wallpapers from the leading  British interior brands.

Symbols accompany some of the navigational buttons on the site for enhanced visual connotation and representation.

All of the above will be taken into consideration when designing the app to ensure cohesion and consistency of brand integrity is maintained. Where appropriate, the app will follow these guidelines. 

OUGD504 - Design for Screen - Format, Shape/ Size & Resolution

As the Style Library Visualiser app will be designed for screen, that of an iPhone in particular, the format, shape and size will be that of an iPhone screen - this being: 750 x 1334 pixels at a screen resolution of 72ppi. Although the iPhone could take a greater resolution as a result of its retina display, the app will be designed at 72ppi for fasting loading times.

OUGD504 - Design for Screen - Style Library Visualiser App Concept Manifesto

The process of choosing a wallpaper for the home interior may initially seem a painless task, however following copious sample orders that arrive showing only a snippet of the full pattern, working out the required number of rolls considering wall dimensions, fireplaces, doors and/or windows and being unable to truly appreciate the impact of a wall covering design at the proposed scale or expanse in a space — the process can easily become tedious. These considerations and limitations do not allow consumers to buy with confidence and assurance that their interior decisions will be met with satisfaction and gratification.

Style Library - The Premier Destination for Stylish and Quality British Design. The Library is the home of ground-breaking British design from the internationally renowned brands: Sanderson, Morris & Co, Harlequin, Zoffany and Scion. A unique destination to source inspiration and discover the broad spectrum of fabrics, wall coverings and trimmings from these leading British interior brands.

Create and design an engaging Style Library Visualiser iPhone app that relieves and aids the interior design process regarding the planning, selection and purchasing of wallpaper for the home using augmented reality technology to allow consumers to confidently identify and purchase a wall covering(s) from one of the Library's renowned brands.The app should allow the consumer to undertake this process with enjoyment and ease as they immerse themselves in the brands that provide to the Style Library and the wall coverings they sell. The primary function of the app should aim to resolve the most common limitations consumers are faced with when undertaking decorative challenges — such as selection and calculation.

The target audience are those with a passion for interiors, with a particular interest in British design and decor, who are looking to or planning to decorate their walls with a wall covering available from one of the renowned brands featured within the Style Library. With an age range of 25 - 60 — ranging from the age of first time buyers / young working professionals to older persons more acquainted with the brands — the target will be confident in engagement with digital screen based platforms, such as the iPhone. These individuals will have financial stability and therefore will be able to afford and accept the prices of the leading renowned British brands of the Style library. The library provides a diverse range of styles so while this target are not exclusively drawn to one particular aesthetic, they will be cultured in design and interior fashion.

The app, alongside its primary function to visualise using augmented reality, should also let the wall coverings available to purchase from Style Library be the focus of the design; The navigational system should be experienced naturally, subconsciously even as the user experiences the utility guided by instinct rather than heavy overbearing menus, bars and buttons that take away from the brands' designs.

Design of the app should form cohesion with the website and Style Library visual identity as a whole to guarantee brand familiarity and established connection.

OUGD504 - Design for Screen - Design for Screen Critique

Below are the two distinct screen-based concepts devised to relieve and resolve the problems faced relating to interior wall covering selection, sampling and confident purchasing.

• Concept One - To create and design an engaging Style Library Visualiser iPhone app that relieves and aids the interior design process regarding the planning, selection and purchasing of wallpaper for the home using augmented reality technology to allow consumers to confidently identify and purchase a wall covering(s) from one of the Library's renowned brands.The app would allow the consumer to undertake the process with enjoyment and ease as they immerse themselves in the brands that provide to the Style Library and the wall coverings they sell. The primary function of the app is to resolve the most common limitations consumers are faced with when undertaking decorative challenges — such as selection and calculation - through live image capture of they augmented reality they create with the tap of the screen. 

• Concept Two - To create and design an engaging virtual reality head-set screen that relieves and aids the interior design process regarding the planning, selection and purchasing of wallpaper for the home using virtual reality to allow the consumer to see their interior dreams come to reality through immersion into computer-generated recreations of their home decorated with Style Library wall coverings. This screen design will enhance the targets ability to confidently and easily choose a wall covering as a result of the virtual reality head set allowing them to experience the interiors firsthand through authenticated user experience and reflection. 

• Target Audience Consideration - The target audience are those with a passion for interiors, with a particular interest in British design and decor, who are looking to or planning to decorate their walls with a wall covering available from one of the renowned brands featured within the Style Library. With an age range of 25 - 60 — ranging from the age of first time buyers / young working professionals to older persons more acquainted with the brands — the target will be confident in engagement with digital screen based platforms. These individuals will have financial stability and therefore will be able to afford and accept the prices of the leading renowned British brands of the Style library. The library provides a diverse range of styles so while this target are not exclusively drawn to one particular aesthetic, they will be cultured in design and interior fashion.

Question

Which concept do you believe provides a more effective resolution to the problem and why?

Response

• Concept One, the app is much more accessible and would also be a great tool.
• The app - having everything to do with the process in one place would shorten the time consuming process of shopping for wallpaper.
• Concept one is an engaging concept and suitable solution to the problem. This would be something my mum would like to use.
• I like the idea of number two but feel it would not be appropriate to the older end of your target audience. I think they would feel uncomfortable, so concept one.
• Concept two sounds more interesting.
• Concept one is more commercially viable and believable.
• I think the augmented reality app would be a really nice project.
• Concept two is more engaging but less target-appropriate. 
• Definitely the app.
• I would love to use the app!
• Two.
• Concept number two sounds far too advanced for your target.

Reflection

Although there was no unanimous response to the question, the clear majority winner is concept one. I am happy with this as I too held some of the concerns regarding concept number two being too technologically advanced for the older age range of the target audience. Feedback shows that it is believed that an augmented reality visualiser app will be engaging, more accessible, commercially viable as a project and a greater solution to the problem.

OUGD503 - Responsive - YCN: UK Greetings - Further Research & Concept / Rationale

British Biscuits

Every year the average British household consumes 103 packets of biscuits.

It wasn’t until the 19th century that the popular emergence of afternoon tea that Britain began to regard biscuits as something to accompany tea. This is a uniquely British notion that was quickly exported around the globe, establishing the stereotype of Britain as a nation of biscuit-lovers and tea-dunkers.

While biscuits were originally made for soldiers and sailors from a simple flour and water mix as means of preserving carbohydrates, biscuits today have far transcended their original purpose, 

resulting in a range of Biscuits considered quintessentially British. 

The interest the British place in Biscuits can undoubtedly be represented by the mass following of BBC programme ‘The Great British Bake-off,’ for which this years final received 14.8 million viewers, making it the most watched programme of the year so far (2016).

Biscuits, alongside Jam and Tea, will be at the heart of Britain’s Brexit trade negotiations.

The Favourites

Custard Creams, Bourbons, Digestives, Jammy Dodgers, Nice Biscuits, Rich Tea, Malted Milks 

and Pink Wafers.

Concept

To take a selection of Britain’s most loved classic biscuits and transform them in to greeting motifs through alteration of the original biscuit design. These biscuits are ingrained in Britain’s culture and social consciousness, meaning their familiarity to consumers will allow for the collection to appeal to the Nation.

Rationale 

In the wake of Brexit and its ongoing supply of discomfort, Britain is in need of some positivity and a reminder of what we have in common - not our differences. The British biscuit provides a relevant set of visual motifs that both reinforce and establish the notion of quintessential British custom(s) and their un-wavering social presence. Both the sending/displaying of greeting cards and the consumption

/notion of British biscuits come together to successfully and indefinitely reflect British society. Using these as the foundation to form and create a collection/range of greeting material/stationary I hope to capture the traditionalist notions of the UK public to engage and connect with them emotionally and visually.

OUGD503 - Responsive - YCN: UK Greetings - Concepts Critique/Feedback

Following generation of 3 potential concepts for the UK Greetings brief, today these were taken to critique. The feedback attained follows:

• 'Such a fun idea and very relevant to your target audience! Consider embossing/textured paper to make biscuits more realistic!'
• 'Consider texture, touch, how the card will be read etc.'
• 'I feel the idea of natural colours used across the cards with small type would be most effective with the illustrations you have.'
• 'Very clearly British. Gives off a sense of national pride (something that is needed after Brexit).'
• 'Great idea! Sounds effective in many ways. I like the idea of considering texture. Maybe think of the other senses too - e.g. smell etc. ?'
• 'The illustrations look like they will work really well with the cards.'
• 'Really clever idea! Biscuits lend themselves well to having writing on them replaced with greetings, and everyone loves a biscuit. My favourite paper chase cards often involve an element of humour. Biscuit designs would be good embossed into paper. Think about other popular biscuits like party rings, oreos etc.'
• 'A nice idea. I can see it being produced in many ways from monoprint to screen print. I like the idea of having the card to fit the shape of the biscuit as its more unique.'
• 'Living for the variations of biscuit print on one sheet! and the card edges of biscuits has to be done. So much appeal and already built in appreciation from our culture! Worth trying embossing whilst having foil just to catch the attention of the words.'
• 'Try adding puns, as a theme I think this could be carried out amazingly but you need something to bring people back and make them think about their favourite (doesn't have to be humour but that has shown to work).

Almost all feedback suggests concept No.03 is the concept with most potential and is the only concept to have really attracted any response. The feedback received provides clear indication that the British biscuit concept has the most potential and evoked more emotional response than concepts 01 and 02. Key suggestions advise that tactility of the cards is important and should be emphasised through texture, embossing and/or foiling. 

Following this, additional research is required in order to confidently articulate a rationale for the project to be used as a reference throughout the design process to ensure clear aims can be achieved.