Interaction Design For Web (Week 3)

Kassy
29 July 2017
2 Comments

6 years

Week 3 of Interaction Design for Web is complete. In week three we continued to develop knowledge and understanding of the principles of website design and explored the creation of wireframes.

It was incredibly insightful watching the talk One design to rule them all by Luke Wroblewski which described the way of developing one website that worked across multiple devices (or screens).

From fixed width to responsive

When I began creating websites in the early 00s, it was basically about designing at fixed widths (maybe even using tables and iframes too haha). I created many sites like this, and it became a large part of my process. When smart phones started to boom, I got bewildered about how to approach it and found myself drifting further away from creating sites myself and using templates or themes instead. It seemed like such a complicated area to tackle with so many different things I didn’t understand. The great thing about taking this class is allowing myself to finally be ‘forced’ into responsive design, or at a basic level how to make an accessible website.

I am learning that you can take one site and allow this to function at screens of many different dimensions. How you do this can involve media queries and operate on a grid system that uses % based columns. I will admit that a grid system was something that also frightened me. That may be related to the fact that I had not completed as much design work as I have now and see how crucial a grid is in many fields of design. By working with the same grid principles, you can have content that has a consistent structure and natural flow.

While we haven’t jumped right into working with grid systems just yet, I know that there are many grid structures that you can download and use. While using these structures or frameworks can save a lot of time, I think it’s important that I also know how I can implement the grid structure myself with a % grid and 12 columns.

Concept Refinement

Before I begin to create wireframes for my mini site, I thought it was necessary to officially ‘lock in’ the concept I will be using for the next nine weeks. After some deliberation between a stationery showcase and a free pattern resource, I have decided to go with the stationery showcase.

Stationery Showcase

The unnamed website will be a stationery showcase that features daily stationery designs gathered from interesting stores and designers. Each feature will include information about the store and designer as well as brief observations about the item/s. The primary focus will be on the imagery. Features will be sorted by categories to allow the visitor to find a particular style that may interest them. Additional pages may include; about the site, archives, contact information, links & more.

Focal Content

The primary content of the site is the daily features or posts that share imagery and details about stationery items. The latest post should be visible on the home page and stand out as the focal point.

The most recent post could be accompanied by smaller thumbnail posts underneath which allow the visitor to view older posts (making sure an archives option is available).

Page Considerations

Home
Including feating content, recent posts.
About
Including information about the website and website owner.
Categories
Posts grouped by themes into specific categories. Some posts may be included in more than one category.
1. Cute
2. Illustration
3. Pattern
4. Photography
5. Typography
Archives
Posts archives which links to posts, displayed by month.
Contact
Contact information for the website owner.
Links
Links to stationery stores and designers that have been featured on the website.

Sitemap

The sitemap outlines the main pages for the website. Additional considerations will include how each page is structured, including headers, footers, navigation & sidebars.

Current Market

I examined 30 websites which shared stationery inspiration or similar topics. Sites included; A Penchant for Paper, All Things Stationery, Boho Berry, Cute Stationery, Love Notes, Lovely Planner, Lovely Stationery, Museum Of Notebooks, My Supply Room, No Pen Intended, Notebook Stories, Office Supply Geek, Oh So Beautiful Paper, Paper Crave, Paper Lovestory, Passion Themed Life, Plan Another Day, Productive & Pretty, Show Me Your Planner, Stationery Blogger, Stationery Overdose, Stationery Trends, The Bullet Journal Addict, The Gentleman Stationer, The Paper Chronicles, The Pen Addict, The Stationery Addict, Tiny Ray of Sunshine, We Love Stationery and Zen of Planning.

Included below are screen shots of each website.

Current Market Analysis

Structure
My market research revealed that 33% of websites use a structure of ‘header, navigation, main content, sidebar & footer’, while the remainder is similar with minor changes with the placement of headers, navigation, etc. Content is more likely to be displayed with images in a list style, with latest posts on the right and a sidebar on the left. Menu options typically vary for each site, with only 13% containing the same options of ‘home, about, contact’ and more.

Design
Analysis of the website designs showed that 57% of sites had a responsive layout or one which would change to suit browser size. The most common use of colour was white & Grey with 83% and applied sans serif typefaces (37%).

Other
Additional research revealed 53% of website owners reside in the United States with only 3% in Australia. Personal stationery was a common theme with 43% of sites, while many others (50%) combined personal, professional or other types. 70% of sites had links to social media accounts, and 27% had a link to a store associated with the site. Only 23% of sites used a secure (SSL) connection, and 90% used a Favicon.

Included below are pie charts of collected data.

Market Gap

By reviewing my market research and analysis, I can gauge where there are gaps in the market. By creating content that focusses on these deficiencies, I can create a website which has the potential for a missed audience. What is important to remember is that while certain gaps can have direct benefits, certain design features may be associated with specific markets and expected from the public (for example the common use of sidebars).

Market Gap 1
Stationery showcase/inspiration focussed on personal stationery by Australian designers.
– Only 3% of website owners are in Australia. By targeting a country, it further defines the market.

Market Gap 2
Professional stationery showcase/inspiration.
– 7% of sites had a particular focus on professional designs.

Market Gap 3
Personal stationery showcase/inspiration with a responsive design
– 57% of sites had a design that would adjust to the browser window. With a large number of users on the internet using many different device sizes, it is important to ensure that the website can be accessed effectively.

I have run out of time this week, however, next week I will continue to refine the concept idea and focus on who the target market is and develop some personas.

Wireframes: Research

One of the key focal areas this week involves the examination and creation of wireframes for our intended mini site. To kick start my journey into understanding the process I re-read chapter 18 on Process & Design (pp. 441-463) from HTML and CSS, Design and Build Websites (2011) by Jon Duckett. I also looked at chapter 7 Wireframes from Communicating Design: Developing Web Site Documentation for Design and Planning (2010) by Dan M. Brown and various online articles. A Beginner’s Guide to Wireframing (2012) by Winnie Lim / Envato Tuts was an interesting read.

It’s crucial that the content is clear and that hierarchy is strong. I want the viewer to know what they are looking at and to find the hero content quickly.

The most important things that I need to focus on is the structural elements of the website. Where is the header, navigation, content and footer? I also need to think about how the site will function differently on smaller screens to compared to larger ones. For example, on a mobile phone, I might have one column that is full or 90% width, while a desktop version may have multiple columns for content and a sidebar that sits on the left or right.

What does the market do?

In my research conducted for the current market, I discovered that 33% used a structure of ‘header, navigation, main content, sidebar, footer’ while the remainder had a similar structure with alteration in the placement of navigation, content and menus. 57% of websites had a responsive design (or one which adjusted to browser window size).

I used the website Wirify (2017) to capture live wireframes of each site. While these wireframes may not be 100% perfect, they do provide a great insight into the structure of the sites.

Wireframes: Sketches

Palm

I created seven quick sketches of a structural design of the website for a small device screen. I focused on content that could be viewed easily in the seen size and excluded items that may cause a design problem (such as a sidebar).

Lap

For the tablet and laptop version of the website (which has a slightly larger screen space), I looked at including a sidebar and adding more blocks of content.

Desk

In the desktop version, I looked at using the maximum amount of space and had more room to include blocks of content and the sidebar.

Wireframes: Digital

In the wireframe sketches I created, I experimented with several layout styles. Now I would like to refine this further by creating detailed digital wireframes.