Interactive Design For Web (Week 6)

Paper Dear Prototype

Week 6 of Interaction Design for Web is complete. In week six we turned our attention to creating a featured section and looking at the implementation of forms. I created the prototype website for Paper Dear and prepared submitted my work for assessment 1.


Title: Paper Dear


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

Concept Refinement

This week my concept refinement involved looking at the limitations of the Skeleton framework and preparing for the first assessment submission (due 28th August 2017).

Skeleton Framework & Limitations

In the wireframes created in week 3, I looked at a design that included different columns for various device sizes and the inclusion of a sidebar in the desktop version. After working with Skeleton on the weekly activities, I realised that using a sidebar may not be possible, and would require embedded columns and rows, which would not work as intended (because of the function of the framework). Meaning wireframes will need revision.

Revised Wireframes

I revised the wireframe for the website after realising the limitations of the skeleton framework. I did, however, decide to keep the sidebar, but only visible on post pages (and of course when viewed on desktop).

Digital Wireframe
Digital Wireframe

Prototype Structure

The process of creating the prototype website began with creating the HTML or structural elements. I copied the Skeleton files into a new folder and began to modify the <head> and create a <header>, <nav>, <section> and <footer>. I focussed on each section slowly, taking my time to ensure that elements had been closed. I then tested the design, using the Skeleton CSS only, to ensure that the flow of the document could be understood.

Next, I focussed on the CSS and began to create my own styling with the custom.css page. I made sure to think mobile first, adding additional styles in the media queries for larger screens. It was important that the colours and CSS remained loyal to the market and target audience, as well as an interplay of the logo design and ‘brand aesthetic’.

Once I was happy with the structural and stylistic results I moved on to refining the prototype. This included using javascript to create a toggle menu, with CSS drop down styling. I also created all pages required for the website. Finally, I checked each page for the coding and did a review on the W3C Validator. I uploaded the design and did some visual checks on modern browser versions.

Please note this is a recap of the process involved. The actual coding and refinement was more detailed, but due to a lack of time it has not been expressed here. 😫

Paper Dear Prototype
Paper Dear Prototype

View the Paper Dear prototype website.

Additional Updates for Submission

Along with the information included above, I also added or improved other areas of the concept to include in my digital workbook for assessment 1.

  1. Added insights and considerations of design brief and design demands
  2. Added concept priorities
  3. Revised sitemap (including footer)
  4. Created content matrix (with detailed information on page/section, content, meta and type)
  5. Created user journeys and task flows for two personas
  6. Created Paper Dear Styleguide
  7. Compiled references

Activity: Featured Section & Forms

For our activity this week we were required to revisit our prototype for a community centre website and add a featured section and form.

Featured Section


Testing, Uploading & Testing Again