Interactive Design - Project 1
18/04/19 - 2/05/19 (Week 3 - 5)
Azmina Fathima Haris (0337113)
Interactive Design
Project 1
LECTURES
Lecture 3: Basic Interface Design
Week 3 (18/04/19)
We had a lecture on basic interface design and we were also briefed about our first project before starting to work on it.
Lecture 4: Web Standards
Week 4 (25/04/19)
This lecture covered issues in the different operating systems (OS), internet browsers and devices used to access the web that leads to differences in the appearance of websites. Web standards are the set rules developed by the World Wide Web Consortium (W3C) that ensure that websites are accessible to all and makes web development is a simpler process. W3C has standard markup languages to build websites - HTML and CSS, amongst others.
Lecture 5: HTML & CSS Document Development
Week 5 (2/05/19)
Today we were introduced to HTML and also a bit about CSS.
Project 1: Landing Page Design
For this project, we are required to create a static landing page for a band or sports team that we like. Before we start designing on Illustrator or Photoshop, we have to create a basic wireframe for the site and determine its purpose along with the call to action button
I decided to create a promotional page for the band Wallows, who recently released an album "Nothing Happens". The page would have a preview of the songs, and options to purchase the album along with tour tickets. I wanted to make use of the layout in this artist's website (http://dodie.co), which uses hyperlinks to direct viewers to specific parts of the continuous scrolling page.
Wireframe of layout
Process:
On week 4, I showed Mr. Shamsul my progress so far and asked for suggestions. He said I should fix the spacing in the listen now section. I showed him Wallows' actual website and he suggested I could add the dividers between the tour dates like they did. He also said the footer wasn't too readable so I could try to reduce the opacity of the background if I really did want to keep the album cover.
 |
| Final outcome |
 |
| Final outcome - with menu bar |
FEEDBACK
Week 3
General feedback: Mr. Shamsul told us to find out about most common screen resolutions before creating the website and to make sure that our call to action/ purpose of the landing page is clear.
Specific feedback: I was told to start working on designing the page on Illustrator as my layout and structure was fine.
Week 4
Specific feedback: Mr. Shamsul suggested making a few changes to my layout so far, primarily adjusting the spacing. He said that it was unclear what was connected (in the listen now section) and to add more spacing to the tour dates and also to add dividers if I wanted.
REFLECTION
EXPERIENCES
Week 3: I went through other bands/artists websites to find a common layout that would work for me, but most artists I found had very simple websites that held basic info and lesser to with their albums or selling their merchandise.
Week 4: Sometimes, I would forget the proportions of each element and the spacing would consequently end up looking off too.
OBSERVATIONS
Week 3: Defining the purpose & the call to action buttons of the page was difficult for me and I spent quite a lot of time poring over what I could do it make it difficult from the bands' own page.
Week 4: Designing this was definitely an interesting experience but I feel intimidated knowing how complex the actual code will be
FINDINGS
Week 3: It was interesting how the website's visual appearance bore a resemblance to the band's aesthetics and the year the album came out, with newer albums appearing different. There is often little consistency in that sense.
Week 4: I really enjoyed creating the band's identity or at least, trying to capture the essence of it.
FURTHER READING
The complete Guide to website wireframe design - Rebecca Costa
Week 3
This article covered prototyping and wireframing and I found it to be helpful while planning the structure of the landing page. A website wireframe is meant to show your website’s structure, and show the main components of each screen. Any given wireframe can be split up into 3 different components:
- Information architecture: organise every piece of content and visual components to ensure a logical and enjoyable user experience.
- Information architecture: organise every piece of content and visual components to ensure a logical and enjoyable user experience.
- Navigation /structure: show global and secondary navigation elements to make sure users can move freely around the product with ease.
- Layout design: includes a few visual elements of the interface before the heavy lifting of visual design begins.
Why and when do you need to design a website wireframe?
Wireframes allow a clear view of what works and what needs work when arranging elements. The goals of a wireframe would be to show the positioning of content and visual elements of the design and to help with internal communications between designers while planning. Wireframes should always be created at the early stages of any product so that it is clear to see if the structure doesn't make sense, or if navigation is difficult, for example. They also provide a solid base on which the whole team can work on.
Wireframes allow a clear view of what works and what needs work when arranging elements. The goals of a wireframe would be to show the positioning of content and visual elements of the design and to help with internal communications between designers while planning. Wireframes should always be created at the early stages of any product so that it is clear to see if the structure doesn't make sense, or if navigation is difficult, for example. They also provide a solid base on which the whole team can work on.
Comments
Post a Comment