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
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.
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).
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’.
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. 😫
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.
- Added insights and considerations of design brief and design demands
- Added concept priorities
- Revised sitemap (including footer)
- Created content matrix (with detailed information on page/section, content, meta and type)
- Created user journeys and task flows for two personas
- Created Paper Dear Styleguide
- 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.