Interaction Design For Web (Week 4)

Week 4 of Interaction Design for Web is complete. In week four we began to take a detailed look at coding techniques, especially those that followed ‘mobile first’ principles. The activity required us to create style guides for our websites and I devoted a lot of time to refine my concept by looking at the target market, creating a name and improving the sitemap.

This week I spent time exploring potential names for the website. After mind mapping, ideation and research I decided to use the name Paper Dear (paperdear.com).


Concept Refinement

This week I continued to work on and refine my concept for my website. This involved further investigation of the target market, creating a name and refinement of the sitemap.

Title: Paper Dear

Website: http://paperdear.com

Purpose: Daily stationery inspiration, showcasing designer themed personal notebooks, cards, pens & paper from Australian and international artists.

Target Market: Female university students aged 20-25 & busy mums aged 35-44.


Current Market

Current Stationery Market

Last week I examined 30 websites that existed with a focus on stationery inspiration. This week I will focus on further research into the current stationery market within Australia.

The Stationery Good Retailing industry in Australia has a focus on supplying paper goods, writing materials and art specific materials (Richardson 2016, p. 4). Current data infers that the sector is in decline due to increased electronic communication and environmental concerns. However, niche markets for fashion/designer based stationery have had a positive effect on the market (Richardson 2016, p. 5) while also aided with expansion into international markets (Richardson 2016, p. 7).

The industry is characterised by four prominent market segments which include; Business (45%), Households (30%), Education (13%) and Government (12%) (Richardson 2016, p. 13). The most common products include Notebooks & paper stationery with 38% (Richardson 2016, p. 12) with the major retailers including; Officeworks, Smiggle, Typo and Kikki.K (Richardson 2016, p. 22-23).

The number of businesses within the stationery goods market presents 1230 establishments and 735 enterprises in the 2016-2017 (Richardson 2016, p. 28) with New South Wales the leading location of businesses with 30.7% (Richardson 2016, p. 15).

Consumers are the most frequent buyer of stationery items and are typically 35 to 44 years of age (Richardson 2016, p. 12).


Target Market

Target Market

Target Market 1: University Student

Target market 1 is a 25-year-old female who is a part-time university student living in New South Wales and is unmarried with no children (Australian Bureau of Statistics 2017). They work full time in the retail industry with an income between $800-$999 a week (Australian Bureau of Statistics 2012).

Target Market 2: Household

Target market 2 is a 35-year-old female who lives in New South Wales Australia and is married with 2 children (Australian Bureau of Statistics 2017). They have an education level of year 12 or equivalent (Australian Bureau of Statistics 2017) and work full time in the health care industry (Australian Bureau of Statistics 2012). They have a weekly income between $1000-$1249 (Australian Bureau of Statistics 2017).


Personas

Personas

Persona: Jessica The Student

Jessica (Registry of Births Deaths & Marriages n.d., p. 8) is 25 years old and lives with her parents in the Sydney suburbs of New South Wales. Jessica is studying a Bachelor of Arts (Media & Communication) part time at the University of Sydney. When she is not at Uni, she works full time in retail. Jessica likes networking with friends, fashion, streaming movies & TV and browsing websites (Helix Personas n.d.). Jessica is optimistic about the future and wants to express herself in creative ways. She especially enjoys keeping a journal and is always looking for new stationery. Her favourite stores are Typo and Kikki.K.

Persona: Jessica The Student

Persona: Rebecca The Nurse

Rebecca (Registry of Births Deaths & Marriages n.d., p. 8) is 35 years old and lives with her husband and two small children in Sydney, New South Wales. Rebecca works full time as a nurse and is always busy between family, work and social events. Rebecca is a confident person, who enjoys cooking for her family and watching the latest movies (Helix Personas n.d.). She cares about her family and financial security, making sure that her bills are always paid, especially the mortgage. Rebecca likes to keep organised and uses a daily planner to track her family’s schedule. Her favourite stationery store is Kikki.K.

Persona: Rebecca The Nurse


Website Name

Website Name

It’s time to find a name for the website! My process involves creating mind maps to connect different ideas, looking at similar words, checking current name availability and making sure the name will work with both the concept and market.

Mind Maps

I began the process of finding a name by creating a mind map from the word ‘Stationery’.

Website Name: Mind Map (Sketch)

Next, I created a digital version of the mind map and included more options.

Website Name: Mind Map (Digital)

Word Generation

I created a list of 151 associated words and used this for inspiration in name generation. I bolded my favourite words which included; Achieve, Beam, Cloud, Dream, Drift, Flare, Happiness, Joy, Love, Paper, Passion, Pride, Smile, Spark, Switch and Wink.

Website Name: Word Generation

Name Ideas

Using the words generated I began to develop potential names for the website. These included 70 different concepts that involved a combination of separate and combined words. Because the site focuses on stationery and paper goods, a majority of my ideas included the phrase ‘paper’ or ‘stationery’.

Website Name: Name Ideas

Name Analysis

I analysed each name idea by checking Business Name (ASIC Registers), Trademark (IP Australia), domain and social media (Namecheckr) availability. Of the 70 names that analysed, I found that 18 did not have a business name, trademark, domain or social media accounts. These included; Filled Paper, Paper Admired, Paper Ahoy, Paper Awe, Paper Dear, Paper Fave, Paper Mime, Paper Orbit, Paper Purpose, Paper Shire, Paper Wanted, Stationery Drift, Stationery Flare, Stationery Magic, Stationery Pride, Stationery Spark, Stationery Wink and Suddenly Paper.

Note: Business Name, Trademarks, domains and social media were checked on the 1st of August 2017. While Namecheckr did provide a mostly accurate estimate of a domain and social media availability, it was not 100% correct.

Website Name: Name Analysis

Website Name: Name Analysis

Website Name: Name Analysis

Website Name: Name Analysis

Website Name: Name Analysis

Website Name: Name Analysis

Website Name: Name Analysis

Website Name: Name Analysis

Choosing A Name

Once all names were analysed, and I was able to look at available options I had to decide on which name would be most appropriate for the website and market. After review of similar site names and the consideration that ‘stationery’ may require more effort to type, I decided to use Paper Dear. I felt it reflected both on the topic of the site and the potential emotional and psychological needs of the target markets.

Website Name: Choosing A Name

I registered the domain name and set up the hosting account. I created an email address for the website, and once the domain name had correctly propagated to the server, I registered social media accounts. A mistake made, was not physically checking the availability of the username ‘paperdear’ at all sites. Because of this, I found that the Twitter and Pinterest names were taken. I substituted the names for these accounts with ‘heypaperdear’.


Temporary Home Page

Temporary Home Page

Now that the website was registered, the main page of paperdear.com was only showing an empty directory. I decided to create an interim home page that would display information about the site and links to social accounts.

Using Skeleton

To begin creating the temporary home page, I downloaded the Skeleton responsive boilerplate. Skeleton has a lot of features that allow you to create a responsive design quickly and easily. I opened the files in Espresso and edited the index.html file and created a custom.css where my styles would be. I also added the Font Awesome script so I would be able to include icons. I did not add a lot of style elements, and most of the design uses the default Skeleton CSS.

Temporary Home Page: Coding

Previews & Code Checks

To ensure the layout was behaving the way I wanted it to I continually checked the design by resizing the window, both in Chrome and the Espresso preview. Once I was happy with the result, I went through and checked the coding to make sure I had closed all elements. I also used the W3C Markup Validator to check the coding by direct input. When any errors were fixed, I was ready to upload.

Uploading & Responsive Tests

I used the FTP program Filezilla to connect to my website host and uploaded the files to the public_html directory. Once these files had uploaded, I checked paperdear.com in my browser. I could see that all the files had loaded successfully and my design was visible (yay!). I then checked the website design via Am I Responsive? and Responsinator and was happy with the result.

Temporary Home Page: Responsive Test


Sitemap Refinement

Sitemap Refinement

Last week I created a basic sitemap of pages for the website. After further consideration, I wanted to include a category and style option. I also experimented with a ‘colour’ option. However, this may be too broad.

Sitemap Refinement

Sitemap Refinement


Creating A Styleguide

The activity for this week is to create a styleguide for our website. The styleguide will address the main design elements of the site on a single page. Including colours, typography, buttons and more.


Colour

Colour

To begin the process of creating the styleguide, I investigated different colours. I started with inspiration from stationery items and moved to colour palettes.

Styleguide: Colour Inspiration

I create an image board from various stationery items including journals, notepads, pens and tape. I looked at different colour harmonies and thought it was important to draw inspiration from current stationery trends.

Styleguide: Colour Inspiration

Colour Palettes

I continued the process by creating image boards of colours, drawing inspiration from the previous stationery items and exploring similar tones and hues.

Styleguide: Colour Palettes

Styleguide: Colour Palettes

Favourite Colour Palette

After reviewing each set of colours, I found that I liked a particular set the most. The HEX values of these include; #e9e7e7 (Mercury*), #f4abb1 (Wewak*), #88cecb (Monte Carlo*), #f7bd57 (Saffron Mango*) and #3b3b3b (Mine Shaft*).

Styleguide: Favourite Colour Palette

* Name that Color was used to get colour names.


Typography

Typography

To continue my styleguide process I looked at typography. Which included inspiration from stationery, observing fonts from online sources and selecting favourite typefaces.

Typography Inspiration

I explored three online stores (kikki.K, Typo and Ohh Deer) and viewed stationery items. I included some designs that featured the use of different typefaces. I found that it was common to include display or script styles with a combination of sans serif.

Styleguide: Typography Inspiration

Typeface Inspiration

I viewed fonts and typefaces from Typekit, Monotype Library Subscription (fonts.com) and purchased fonts from Creative Market. I focussed on two distinct styles. Display for website title and headings and sans serif for body copy and paragraph text.

Typeface Inspiration: Display
Display fonts that I included resembled hand drawn styles or mimicked those often included in stationery designs. The display typeface will be used in the website title and headings. I felt it was important that the typeface captures the character and personality of the site theme and is appropriate for the target market.

Styleguide: Typeface Inspiration (Display)

Styleguide: Typeface Inspiration (Display)

Typeface Inspiration (Sans Serif)
Sans serif fonts that I included have a focus on clear communication so that all significant portions of paragraph text read efficiently. While many of the typefaces may appear similar, there are small details that can set the right mood.

Styleguide: Typeface Inspiration (Sans Serif)


Styleguide

Styleguide

My creation of a styleguide involved completing the weekly activity by following specific HTML and CSS and uploading files to the hosting server. I looked at styleguides created by other website developers, which may be useful inspiration later in the unit.

Basic Styleguide

For our activity this week, we were instructed to follow guidelines on uploading a particular styleguide using specified HTML and CSS. I have included my example below (resized to show full page).

Styleguide: Basic Styleguide

Styleguide Inspiration

Styleguide inspiration involved looking at styleguides created by other designers (Dribbble was a great source for this). Many of the guides focus on colour, typography and additional elements like buttons, icons and form fields.

Styleguide: Styleguide Inspiration


References

Websites & Books

Australian Bureau of Statistics 2017, Census of Population and Housing: General Community Profile, Australia, 2016, cat. no. 2001.0, ABS, viewed 31 July 2017, <http://www.abs.gov.au/ausstats/abs@.nsf/mf/2001.0>.

Australian Bureau of Statistics 2012, Census of Population and Housing: Working Population Profile, 2011 Second Release, cat. no. 2006.0, ABS, viewed 31 July 2017, <http://www.abs.gov.au/ausstats/abs@.nsf/mf/2006.0>.

ASIC 2017, Search Business Names Register, viewed 1 August 2017, <https://connectonline.asic.gov.au/RegistrySearch/faces/landing/bn/SearchBnRegisters.jspx?_adf.ctrl-state=njva19g6y_12>.

Helix Personas n.d., 302 Career & Kids – Overview | Helix Personas – By Roy Morgan Research, viewed 31 July 2017, <http://www.helixpersonas.com.au/browse/todays-families/personas/302-career-and-kids/overview>.

IP Australia 2017, IP Australia | Trade Mark Search, viewed 1 August 2017, <https://search.ipaustralia.gov.au/trademarks/search/quick>.

namecheckr.com 2017, namecheckr.com – Social and Domain Name Availability Search For Brand Professionals, viewed 1 August 2017, <https://www.namecheckr.com/>.

Registry of Births Deaths & Marriages n.d., Popular Baby Names 1980-1989, viewed 31 July 2017, <http://www.bdm.nsw.gov.au/Documents/stats-names-1980s.pdf>.

Registry of Births Deaths & Marriages n.d., Popular Baby Names 1990-1999, viewed 31 July 2017, <http://www.bdm.nsw.gov.au/Documents/stats-names-1990s.pdf>.

Richardson, A 2016, Stationery Goods Retailing in Australia, IBISWorld, G4272.

Images

Adams, V n.d., ‘Pacifico by Vernon Adams’ [image], in Pacifico (Vernon Adams) in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/samples/1/469/880/1/570e202e/pacifico-vernon-adams.png>.

Adobe 1997, ‘Flood by Adobe’ [image], in Flood in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/8/7730/800/1/596c525e/flood.png>.

aga7ta n.d., ‘planner with stickers’ [image], in planner with stickers – image | Adobe Stock, Adobe Stock, viewed 1 August 2017, <https://as1.ftcdn.net/jpg/01/32/85/66/500_F_132856638_4UiRopoU3bLr4Mh9lA1ztaXkTUGz8UQ3.jpg>.

Apostrophe, C n.d., ‘Finger Paint by Carrois Apostrophe’ [image], in Finger Paint Font Free by Ralph Oliver du Carrois » Font Squirrel, Font Squirrel, viewed 3 August 2017, <https://imgs3.fontbrain.com/imgs/31/6d/9e14230f6800afbd8fd516953128/pt-720×360-5f5562@2x.png>.

Astigmatic 2016, ‘Grand Hotel by Astigmatic’ [image], in Grand Hotel in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/44/42438/800/1/5782e19f/grand-hotel.png>.

Astigmatic n.d., ‘Special Elite by Astigmatic’ [image], in Special Elite in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/32/28465/800/1/57ddb149/special-elite.png>.

BAT Foundry 2012, ‘Instant by BAT Foundry’ [image], in Instant in use – Fonts In Use, Fonts In Use, viewed 4 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/36/32404/800/1/58ad7cb0/instant.png>.

Chatterjee, S 2015, ‘UI Style Guide by Sheta Chatterjee’ [image], in UI Style Guide by Sheta Chatterjee, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/257875/screenshots/2284813/styleguide_1.png>.

Correll, G n.d., ‘GEMMA CORRELL – SLOTH TO DO NOTEPAD’ [image], in Sloth To Do Notepad | Ohh Deer, Ohh Deer, viewed 3 August 2017, <https://ohhdeer.com/media/catalog/product/cache/1/image/565x/9df78eab33525d08d6e5fb8d27136e95/s/l/sloth-to-do-list.jpg>.

Diana C 2016, ‘style guide by Diana C’ [image], in style guide by Diana C, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/1103506/screenshots/2903521/desktop_copy_7.png>.

Dooley, J 2008, ‘Pauline by Insigne Design’ [image], in Pauline in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/30/25516/800/1/5492dc05/pauline.png>.

Dutzel, P 2015, ‘Creative Anchor Style Guide by Pralie Dutzel’ [image], in Creative Anchor Style Guide by Pralie Dutzel, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/573900/screenshots/2208560/creative_anchor_style_guide.png>.

Emigre n.d., ‘Mr Eaves Sans by Emigre’ [image], in Mr Eaves Sans in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/3/2045/800/1/589c5b8c/mr-eaves-sans.png>.

Erickson, B 2017, ‘Style Guide Template by Beccah Erickson’ [image], in Style Guide Template by Beccah Erickson, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/445564/screenshots/3521732/style_guide_template.png>.

FontFont 2010, ‘FF Basic Gothic by FontFont’ [image], in FF Basic Gothic in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/3/2403/800/1/590b7255/ff-basic-gothic.png>.

franklin.planner 2015, ‘CORAL! Planner Love collection | franklinplanner’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://s-media-cache-ak0.pinimg.com/564x/ef/42/f9/ef42f94cf840bd4703c5d7ca6b564311.jpg>.

Fromm, J n.d., ‘Rooney Sans by Jan Fromm’ [image], in Rooney Sans Regular – Fonts.com, Fonts.com, viewed 4 August 2017, <https://cdnimg.fonts.net/CatalogImages/23/1210803.png>.

Goede, J 1999, ‘Amadeo™ By Julius de Goede / Monotype’ [image], in Amadeo in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/5/4859/800/1/5492b51c/amadeo.png>.

goodluz n.d., ‘Closeup of beautiful nurse at work’ [image], in Closeup of beautiful nurse at work – image | Adobe Stock, Adobe Stock, viewed 1 August 2017, <https://as1.ftcdn.net/jpg/01/08/04/20/500_F_108042005_WnnpQNtoIRoglC7MAM7TwTFm8hnAoUdA.jpg>.

goodluz n.d., ‘Happy family standing in front of new house’ [image], in Happy family standing in front of new house – image | Adobe Stock, Adobe Stock, viewed 1 August 2017, <https://as1.ftcdn.net/jpg/01/07/82/16/500_F_107821661_qxjZA9IjBYAAv5IlkMQYs2Xw4DvPjNQP.jpg>.

Hunt, P n.d., ‘Source Sans Pro by Paul D. Hunt’ [image], in Source Sans Pro Font Free by Adobe » Font Squirrel, Font Squirrel, viewed 3 August 2017, <https://imgs3.fontbrain.com/imgs/5e/1d/162e634a102d7da8db597825a764/pt-720×360-5f5562@2x.png>.

Impallari Type n.d., ‘Miltonian Tattoo by Impallari Type’ [image], in Miltonian Tattoo Font, Ffonts, viewed 3 August 2017, <https://d144mzi0q5mijx.cloudfront.net/img/M/I/Miltonian-Tattoo.png>.

Impallari Type, n.d., ‘Dosis by Impallari Type’ [image], in Dosis Font Free by Impallari Type » Font Squirrel, Font Squirrel, viewed 3 August 2017, <https://imgs1.fontbrain.com/imgs/62/ed/be8db877667d703a63578e63d853/pt-720×360-5f5562@2x.png>.

ITC n.d., ‘Frankfurter By ITC’ [image], in Monotype Library Subscription Inventory – Fonts.com, Fonts.com, viewed 3 August 2017, <https://fast.fonts.net/FontsCom/Live/inventory-images/frankfurter_1246-hover.png>.

Jackrabbit Creative 2015, ‘Milktooth by Jackrabbit Creative’ [image], in Milktooth ~ Sans Serif Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/357599/580/386/m2/fpnw/wm0/milktooth-.jpg?1424129637&s=d3e2893649f842cdb4d2f0bf4effb36b>.

jenpol n.d., ‘Minimal work space , sketchbook , pen , glasses , pencil , cactus , rubber on pastel pink and green background for copy’ [image], in Minimal work space , sketchbook , pen , glasses , pencil , cactus , rubber on pastel pink and green background for copy space. – image | Adobe Stock, Adobe Stock, viewed 31 July 2017, <https://as1.ftcdn.net/jpg/01/21/76/76/500_F_121767660_n4lkYzVWrHx0qwVUbp6tn8ziDy59yy6c.jpg>.

JetPens n.d., ‘JetPens Washi Tapes’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://s-media-cache-ak0.pinimg.com/564x/e8/c6/28/e8c6287613328023db1bf5197c66fdd6.jpg>.

Julia Dreams 2015, ‘Olesia by Julia Dreams’ [image], in Olesia ~ Script Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/606636/580/386/m2/fpnw/wm0/cm1-.jpg?1439587128&s=1291c48440d2b08f54038d4db0439774>.

kikki.K n.d., ‘kikki.K – 17/18 A LITTLE REMINDER NOTEPAD: CUTE’ [image], in 17/18 A LITTLE REMINDER NOTEPAD: CUTE, kikki.K, viewed 3 August 2017, <http://cdn.kikki-k.com/media/catalog/product/cache/1/image/700x/040ec09b1e35df139433887a97daa66f/1/7/17_18_a_little_reminder_notepad_cute_front.jpg>.

kikki.K n.d., ‘kikki.K – 99 IDEAS BOOK: TIME IS NOW’ [image], in 99 IDEAS BOOK: TIME IS NOW, kikki.K, viewed 3 August 2017, <http://cdn.kikki-k.com/media/catalog/product/cache/1/image/700x/040ec09b1e35df139433887a97daa66f/9/9/99_ideas_book_time_is_now_white_gold_01_hero.jpg>.

kikki.K n.d., ‘kikki.K – HOME ORGANISER: QUOTE’ [image], in HOME ORGANISER: QUOTE, kikki.K, viewed 3 August 2017, <http://cdn.kikki-k.com/media/catalog/product/cache/1/image/700x/040ec09b1e35df139433887a97daa66f/h/o/home_organiser_quote_pink_cover.jpg>.

kikki.K n.d., ‘kikki.K – THE BEST IS YET TO COME: ALWAYS & FOREVER’ [image], in THE BEST IS YET TO COME: ALWAYS & FOREVER, kikki.K, viewed 3 August 2017, <http://cdn.kikki-k.com/media/catalog/product/cache/1/image/700x/040ec09b1e35df139433887a97daa66f/t/h/the_best_is_yet_to_come_always___forever_front.jpg>.

kikki.K n.d., ‘kikki.K Letter Set: Happy’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://s-media-cache-ak0.pinimg.com/564x/8b/11/7a/8b117ae4f474cd1056db44eb71436cf4.jpg>.

kikki.K n.d., ‘kikki.K Vänskap Planner’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://s-media-cache-ak0.pinimg.com/564x/b0/2a/bd/b02abd1ed102a4a78368e91eb3e12d67.jpg>.

Komae, B 2017, ‘UI Style Guide by Bryce Komae’ [image], in UI Style Guide by Bryce Komae, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/985088/screenshots/3206390/style_guide.jpg>.

Laslo, S 2014, ‘Vintage-Inspired by Shelly Laslo’ [image], in Vintage-Inspired Font- “NET WT” ~ Display Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/99614/580/386/m2/fpnw/wm0/title-edited-01-.jpg?1398007102&s=0235f5b80bee1c7841f2822c66c304f0>.

Lieber, L 2017, ‘Twin Pines by Lili Lieber’ [image], in Twin Pines | Font Duo ~ Sans Serif Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/2694641/580/386/m2/fpnw/wm0/pines_cover-.jpg?1494916945&s=a7d2862f01cf2c73d4e67dd7992711cf>.

Linotype n.d., ‘Avenir Next By Linotype’ [image], in Avenir® Next Font Family – Fonts.com, Fonts.com, viewed 4 August 2017, <https://fast.fonts.net/FontsCom/Live/inventory-images/avenir_next_28057-hover.png>.

Linotype n.d., ‘Univers Next By Linotype’ [image], in Univers® Next Font Family – Fonts.com, Fonts.com, viewed 4 August 2017, <https://fast.fonts.net/FontsCom/Live/inventory-images/univers_next_30509-hover.png>.

Mansfield, J 2016, ‘UI Guide by Jeremy Mansfield’ [image], in UI Guide by Jeremy Mansfield, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/8934/screenshots/2446062/sdc-ui-guide.jpg>.

Mansfield, J 2016, ‘UI Style Guide by Jeremy Mansfield’ [image], in UI Style Guide by Jeremy Mansfield, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/8934/screenshots/2910687/ui-style-guide-thumb.jpg>.

Masharov, D n.d., ‘Poiret One by Denis Masharov’ [image], in Poiret One Font Free by Denis Masharov » Font Squirrel, Font Squirrel, viewed 3 August 2017, <https://imgs1.fontbrain.com/imgs/3b/58/5e0e2f91bef9ab6ea74f7e302f20/pt-720×360-5f5562@2x.png>.

Matteson, S n.d., ‘Open Sans by Steve Matteson’ [image], in Open Sans Font Free by Ascender Fonts » Font Squirrel, Font Squirrel, viewed 3 August 2017, <https://imgs3.fontbrain.com/imgs/62/9a/55a7e793da068dc580d184cc0e31/pt-720×360-5f5562@2x.png>.

MediaLab.Co 2015, ‘Beverly by MediaLab.Co’ [image], in Beverly UPDATED ~ Script Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1153595/580/386/m2/fpnw/wm1/c011-.jpg?1459892189&s=736e6d0b16a1cdc7cebe5015adf3b879>.

MediaLab.Co 2015, ‘Starshine by MediaLab.Co’ [image], in Starshine BIG UPDATE ~ Script Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1605670/580/386/m2/fpnw/wm1/1-2-.jpg?1472556411&s=f11ad8185ce4e0ff1e576808b2b04aab>.

MilkLetters 2017, ‘La Fontaine Brush Font by MilkLetters’ [image], in La Fontaine Brush Font ~ Script Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/2811951/580/386/m2/fpnw/wm0/lefontaine-00-preview-01-correct-.jpg?1496808918&s=1df705bf5c3ce0bb7477ace7ae31df7b>.

Moglea 2015, ‘Moglea Paper Party 2015 Invitations’ [image], in Paper Party 2015 Invitations!, Oh So Beautiful Paper, viewed 3 August 2017, <http://ohsobeautifulpaper.com/wp-content/uploads/2015/05/Hand-Painted-Paper-Party-2015-Invitations-Moglea-Bella-Figura-21.jpg>.

Mostardesign 2016, ‘Filson Soft by Mostardesign’ [image], in Filson Soft in use – Fonts In Use, Fonts In Use, viewed 4 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/44/41807/800/1/571d5e23/filson-soft.png>.

Mr.Typeman 2017, ‘Chokle by Mr.Typeman’ [image], in Chokle Handwritten Font ~ Sans Serif Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/2558193/580/387/m2/fpnw/wm0/chokle-01-.jpg?1492460060&s=4fac88997efc8df39ea6f747b87c2b63>.

Nelson, Z 2014, ‘Style Guides by Zech Nelson’ [image], in Style Guides by Zech Nelson – Dribbble, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/92121/screenshots/1718657/style-guides.png>.

Nelson, Z 2015, ‘Style Guidelines by Zech Nelson’ [image], in Style Guidelines by Zech Nelson, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/92121/screenshots/1883273/shot.png>.

Norde 2016, ‘Website Style Guide by Norde’ [image], in Website Style Guide by Norde, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/135634/screenshots/3045300/styleguide800.png>.

Ohh Deer n.d., ‘Ohh Deer Geometric Paperback Notebook’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://s-media-cache-ak0.pinimg.com/564x/e0/04/4f/e0044f7c817f16bf003ce5e542b4fe86.jpg>.

Ohh Deer, n.d., ‘Ohh Deer – FOREST STICKY MARKERS’ [image], in Forest Sticky Markers | Ohh Deer, Ohh Deer, viewed 3 August 2017, <https://ohhdeer.com/media/catalog/product/cache/1/image/565x/9df78eab33525d08d6e5fb8d27136e95/f/o/forest-2.jpg>.

Papier Tigre n.d., ‘Papier Tigre Notebook’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://s-media-cache-ak0.pinimg.com/564x/93/98/0f/93980f570ae62e63d97a0aba1c016242.jpg>.

Papier Tigre n.d., ‘Papier Tigre Notebooks’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://s-media-cache-ak0.pinimg.com/564x/57/48/36/574836f58e311fef2c1dc0661b5c4ed5.jpg>.

Phil’s Fonts n.d., ‘Freight Sans by Phil’s Fonts’ [image], in Freight Sans | Typekit, Typekit, viewed 4 August 2017, <https://typekit.com/fonts/freight-sans>.

Raices, N n.d., ‘Delius Swash Caps by Natalia Raices’ [image], in Delius Swash Caps Font Free by Natalia Raices » Font Squirrel, Font Squirrel, viewed 3 August 2017, <https://imgs.fontbrain.com/imgs/91/5b/94f6cf2adf37284b81c17fbec292/pt-720×360-5f5562.png>.

Rifle Paper Co. n.d., ‘Rifle Paper Co Notepads’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://i.pinimg.com/564x/08/8a/53/088a533d335a116cca4465503b082bb4.jpg>.

Rifle Paper Co. n.d., ‘Rifle Paper Co. – JULEP CITRUS FLORAL MARKET LIST’ [image], in Julep Citrus Floral Market List | Ohh Deer, Ohh Deer, viewed 3 August 2017, <https://ohhdeer.com/media/catalog/product/cache/1/image/565x/9df78eab33525d08d6e5fb8d27136e95/c/i/citrus-markeet-list.jpg>.

Seniors 2014, ‘Shintia Script by Seniors’ [image], in Shintia Script ~ Script Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/199065/580/386/m2/fpnw/wm0/preview_1-o-.jpg?1412430580&s=19954c49a87892b5cfdee775d24cd486>.

Simpson, R 2017, ‘Personal website style guide by Rob Simpson’ [image], in Personal website style guide by Rob Simpson, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/182241/screenshots/3501349/rbs-styleguide-thumb.png>.

Sugar Paper n.d., ‘Sugar Paper Pink’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://s-media-cache-ak0.pinimg.com/564x/0f/d0/2d/0fd02d776d6b2ff6713f088ae41c2839.jpg>.

Syda Productions n.d., ‘female student in eyglasses with folders’ [image], in female student in eyglasses with folders – image | Adobe Stock, Adobe Stock, viewed 31 July 2017, <https://as1.ftcdn.net/jpg/00/59/06/38/500_F_59063897_tVOVDXSH72kgJG7ULomdgyLsqOwJpQQZ.jpg>.

Syda Productions n.d., ‘happy women with shopping bags at clothing shop’ [image], in happy women with shopping bags at clothing shop – image | Adobe Stock, Adobe Stock, viewed 31 July 2017, <https://as2.ftcdn.net/jpg/01/64/85/57/500_F_164855726_akNoaZTadKN8yYcnmmvZizxKrU55F6Nf.jpg>.

The Fresh Exchange 2017, ‘I Need Coffee by The Fresh Exchange’ [image], in I Need Coffee Font ~ Display Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/2176273/580/386/m2/fpnw/wm0/i_need_coffee_cover-.jpg?1485271327&s=df074a92793897ab2eb168fc969378e1>.

The League of Moveable Type n.d., ‘Raleway by The League of Moveable Type’ [image], in Raleway Font Free by The League of Moveable Type » Font Squirrel, Font Squirrel, viewed 3 August 2017, <https://imgs1.fontbrain.com/imgs/58/0d/0778ad254335be45bf58bb449f43/pt-720×360-5f5562@2x.png>.

theinkaffair 2017, ‘Oh Wonder by theinkaffair’ [image], in Oh Wonder Font + Bonus Font & Logos ~ Script Fonts on Creative Market, Creative Market, viewed 3 August 2017, <https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/2787318/580/386/m2/fpnw/wm0/intro-01-.png?1496326822&s=a21d224da05080a57c5ea44f9ac8ed14>.

Think & Ink 2014, ‘Think & Ink Happy Birthday Card’ [image], in Design Week Recap: It’s Summertime at The National Stationery Show – Design*Sponge, Design*Sponge, viewed 3 August 2017, <http://www.designsponge.com/wp-content/uploads/2014/05/thinkink2.jpg>.

Typo n.d., ‘Typo – 2018 A5 DAILY BUFFALO DIARY’ [image], in 2018 a5 daily buffalo diary | Typo | GOOD VIBES WATERCOLOUR, Cotton On, viewed 3 August 2017, <http://cottonon.com/on/demandware.static/-/Sites-cog-typo-master/default/dw885b9d1b/140613/140613-00-2.jpg>.

Typo n.d., ‘Typo – A4 SPINOUT NOTEBOOK – 120 PAGES’ [image], in A4 Spinout Notebook – 120 Pages | Typo | LCN SIMPSONS FRIENDS WITH SALAD, Cotton On viewed 3 August 2017, <http://cottonon.com/on/demandware.static/-/Sites-cog-typo-master/default/dwa48c4e09/137769/137769-109-2.jpg>.

Typo n.d., ‘Typo – A4 SPINOUT NOTEBOOK – 120 PAGES’ [image], in A4 Spinout Notebook – 120 Pages | Typo | NEON LIGHTS, Cotton On, viewed 3 August 2017, <http://cottonon.com/on/demandware.static/-/Sites-cog-typo-master/default/dwdb5eb074/137769/137769-101-2.jpg>.

Typo n.d., ‘Typo – B5 SOFT PU COVER NOTEBOOK WITH PVC COVER’ [image], in b5 soft pu cover notebook with pvc cover | Typo | SHINE BRIGHT BABE, Cotton On, viewed 3 August 2017, <http://cottonon.com/on/demandware.static/-/Sites-cog-typo-master/default/dw76f84579/140564/140564-04-2.jpg>.

Typo n.d., ‘Typo Stationery Collection’ [image], in Pinterest, Pinterest, viewed 3 August 2017, <https://i.pinimg.com/564x/56/83/27/568327800d1da622af7e5fcb539f13da.jpg>.

Urban Outfitters, Ohh Deer n.d., ‘URBAN OUTFITTERS X OHH DEER I WISH I WAS A UNICORN DAILY JOURNAL’ [image], in Urban Outfitters x Ohh Deer I Wish I was a Unicorn Daily Journal | Ohh Deer, Ohh Deer, viewed 3 August 2017, <https://ohhdeer.com/media/catalog/product/cache/1/image/565x/9df78eab33525d08d6e5fb8d27136e95/i/_/i_wish_i_was_a_unicorn_dj.jpg>.

Wacaksara Co. 2017, ‘Baksoda by Wacaksara Co.’ [image], in Baksoda in use – Fonts In Use, Fonts In Use, viewed 3 August 2017, <https://fiu-assets-2-syitaetz61hl2sa.stackpathdns.com/static/renders/55/46441/800/1/59349f19/baksoda.png>.

Wagesreiter, P n.d., ‘Patrick Hand SC by Patrick Wagesreiter’ [image], in Patrick Hand SC Font, Ffonts, viewed 3 August 2017, <https://d144mzi0q5mijx.cloudfront.net/img/P/A/Patrick-Hand-SC.png>.

Wong, C 2016, ‘UI Style guide by Cupi Wong’ [image], in UI Style guide by Cupi Wong, Dribbble, viewed 4 August 2017, <https://cdn.dribbble.com/users/252114/screenshots/2544546/styleguide_01_2x.jpg>.