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.
Concept
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
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).
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. 😫
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.
- 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.
Featured Section
Updating Prototype code
I began the process by first updating the coding that I had used on the design. I decided to use header, nav, section and footer, rather than divs. I still applied id classes to each for navigation and styling.
Looking at the activity HTML & CSS
Next, I looked at the HTML and CSS required for the activity and implemented it into the design. Because my coding was slightly different, I used the appropriate format.
Let’s break it down
The featured section is designed to fit a height of 100% or to use the full-screen visibility. The position of the background image is fixed and at a ‘cover’ size, which means it will take up the whole area. It’s important to make sure that this space is used efficiently through appealing imagery and engaging typography. Currently, the styling doesn’t look that impressive and needs some tweaking!
What does a good featured section look like?
So I know what content I need to add to the site, and I already have styles implemented on the prototype, but how can I create an engaging featured section? Part of this involves following rules of design. Making sure there is good typography, contrast, scale, dynamics, etc. Another part is looking at featured sections or ‘hero’ header and layouts that have been created by other great designers.
Insights
From looking at many websites with hero images, I gained some insights to assist with my prototype.
- Typography should be clear and bold
- Background image should have a darker colour, for clear contrast with text
- Buttons should also provide an interesting contrast
Background Image
Using the image that I had downloaded from Unsplash, I opened it in photoshop and created a gradient with similar colours employed in the header of the prototype. I lowered the opacity of the gradient so that the image was visible, but the contrast was reduced.
Let’s get styled!
As I began styling the elements on the page, I found that the gradient background image was still too light. I opened the photoshop file I had saved and applied another gradient, this time with a darker fill at the top and transparent at the bottom, so the precious gradient was still visible. This changed provided much better contrast for text.
When working on the styling of the site I looked at using different styles for the headings, adding more buttons and trying to focus on achieving the clearest effect without an overuse of text or content.
Forms
Now that the first part of the activity is complete I can move on to the second. This time we are required to create a form on a new page.
Steps
- Open the form.html file (that was a duplicated index, before starting on the featured section)
- Remove HTML sections from file (including; events, about, location and contact)
- Add new form section from provided HTML
- Modified HTML, to add columns and relevant content
- Added name and phone number fields
- Changed email, enquiry and message to required fields
- Checked the required fields would cause an error if left blank
- Added text below submit button, noting * titles were required fields
- Added search form HTML, in new section with search-form id
- Modified primary button CSS
- Modified page title and menu options to link index.html
Testing, Uploading & Testing Again
The final phase of the activity was to test the design, to make sure it was acting ‘responsively’. It was also important to review the code and make sure all selector and declarations were closed.
Testing Steps
- Using the Espresso preview window I opened a preview of the index.html file. I could see that when I resized to mobile, that the featured section was interfering with the menu. I had previously been previewing the design in Google Chrome, but the window was not resizing to that small level.
- Changed the top margin for the #feature .container, so that there was a percentage of 50% from the top.
- Examined the HTML in index.html, to ensure elements were closed correctly. I also checked the HTML in the W3C Markup Validator.
- Using the Espresso preview I looked at the form.html file and it seemed to be working as intended.
- Examined the form.html file, to ensure HTML elements were closed correctly. Used the W3C Markup validator again to confirm page was all good.
- Added a heading to search form section.
- Discovered that the form was using incorrect ‘for’ labels, and renamed them to the correct ids.
- Had some problem validating the enquiry option, with a required field. Viewed the article Using the required attribute with the select element by Russ Weakley which provided helpful insight.
- I examined the CSS file to ensure that all elements had been closed and also tested the code in the W3C CSS Validator.
Uploading
Once I was happy with the private testing, I uploaded the files to the web server via FileZilla. I had to overwrite the index.html, custom.css and skeleton.css, as well as add the new file form.html and images. I loaded http://paperdear.com/development/prototype/ in my browser to confirm upload was successful.
When loading the website, I could see that there was a problem.
I went through each file, and rechecked all the code and was having a hard time trying to figure out what was wrong. I tried disabling certain features (such as js and scripts), but to no avail. I decided to use an online screen shot generator, and it showed that the website did load with the intended style. I realised that it was a problem with the cookies in my browser that was not updating to show the new stylesheet and was using the previous one! Once I cleared cookies, it was working!
Testing Again
Responsive Testing
I used the website Am I Responsive? to check the design across some devices. What I could see was that the mobile version was not acting as I intended.
I checked the design further on Responsive Design Testing and could see that was a problem on the mobile version. This was no doubt relating to the fixed position of the ‘featured section’. I was able to confirm this, by comparing the index.html with the featured section and form.html without the featured section which was loading as intended.
I ran out of time this week, but to continue with the prototype attention needs to be paid to make sure that the featured section does not wander into the header or events section below.
Cross-browser Testing
I began the process of testing the design in different browsers, by using the Browser screenshots from Microsoft & BrowserStack. This revealed that in earlier versions of internet explorer and some Windows browser that the design was not consistent and needed further improvements. I also checked the form.html page and could see that this page loaded with a much better result.
The cross-browser testing revealed that I needed to pay more attention to the featured section and the fixed position to try and make it work better in various browsers.
