INTERACTIVE DESIGN PROJECT 1
13/9/2018 - 27/9/2018 (Week 3 - Week 5 )
Ng Shu Zhi (0327158)
Interactive Design - Project 1
LECTURE
Week 3: We had a lecture on UI and UX, what's the difference, Common characteristics of a well designed web page will depend on the user of the web and Golden rules of Interactive Design, then we were given an exercise to do where we designed a low fidelity tester navigation kiosk for Taylor's University.
Week 4: We had a lecture on typography in web design, the history of it and web safe fonts. Usually people now use google fonts to design their web page since everyone can access it.
INSTRUCTIONS
WORK
Week 3
For my landing page I had chosen to do the korean group Red Velvet. For the theme of the website I went with their newest album colour scheme which was blue and yellow because it was an album for summer. For the website itself I had chosen to focus on selling the album and chose that as my purpose so I put the album sales as the third part of the webpage along with a selection of other albums people can buy from.
I researched on mobile friendly websites and analysed a few websites like Maroon 5 and Camilla Cabello for inspiration for the landing page and it seemed like the best way to put the layout is a vertical layout with no complex animations or shapes so when it goes into mobile, there wouldn't be much movement so the phone won't lag.
After some feedback and adjustments, I've aligned the the images to each other and kept the spacing consistent to make a more aligned and neat. Then I changed the landing page image to something more relevant to what I'm trying to promote. I took out the Biography of the group because I thought if the main purpose was to sell their albums, the fans would already be familiar with the group so I took it out.
FEEDBACK
Week 3: General feedback : We were to think about our target audiences and what may be an appropriate design for them. It is important to label our icons and put a home page for easy access. Specific Feedback: Our group didn't have a home button for when the user goes deeper into the directory. So next time we should always include the home button on every page.
Week 4: General feedback: We were to design a landing page for our celebrity of choice. We had to have a footer, align everything on the page, and look at other website designs to find examples of thh landing page. Making a mood board and colour scheme to the website at the beginning is also a good start. Specific Feedback: I had to align everything on my page and made sure the spacing for everything was consistent. I had a part to my original design for the landing page but after hearing the advice that the design for it wasn't very mobile friendly, I took it out since it doesn't make sense for a site for fans to have another biography of celebrities they already knew and it would've taken up too much space before the important parts.
REFLECTION
Experience
Week 3: At first it was confusing, not knowing where to start and what is a good directory board to take reference from so one of our group members looked up the Taylor's website to get inspiration of content we can put into the kiosk. The later we were told to only do 1 specific scenario and it became much easier after given a direction to go for.
Week 4: It was exciting being able to design a landing page for the celebrity of our choosing. Colour palettes and mood boards are a good beginning to planning a page, then comes the layout plans in a low fidelity design.
Observation
Week 3: It was easier to design the navigation page after getting a specific scenario to design the interface for.
Week 4: I need to be more conscious about alignment of the page because in coding, we'll be using grids to align our websites.
Findings
Week 3: We learned about categorising and looking at the target audience for designing something while keeping that target audience in mind while designing. A home button is also very important to leave on every page to a design.
Week 4: Aligning the website to each other is important to make it look neat and clean. Some designs just don't work for mobile versions of a website and sometimes a there are some parts which might just take up too much space so they aren't needed. It is important to also have a good choice of font which still matches the context of the page but is still readable.
FURTHER READING
From this website I learned what made a mobile friendly website and what I understood was:
- Keep text short and simple
- Have designs that won't require much change/motion when the screen becomes a smaller size or else it will lag the page.
- Have designs that won't require much change/motion when the screen becomes a smaller size or else it will lag the page.
- Use YouTube videos for your web pages as using YouTube is easier for people on mobile to view the videos.
Comments
Post a Comment