INTERACTIVE DESIGN - PROJECT 1
INTERACTIVE DESIGN - PROJECT 1
18.04.19 - 02.05.19 (Week 3 - Week 5)
Maydeline (0335392)
Interactive Design
Project 1 - Landing Page
LECTURES
Lecture 3 : Introduction to the Language of Web
18.04.19
We learned about the establishment and development of web and the terms used in designing a website. We also discuss the differences between web and internet and who created them. World Wide Web Consortium (W3C) is created for web standards.
INSTRUCTIONS
PROJECT 1 - LANDING PAGE
(Week 3)
Our first project we had to do a web landing page based on our interest, could be musician, band, singer, etc. We started off by choosing our topic, target audience and purpose of the website. The screen size is a standard web screen size (1024px by 768). Our landing page should include a header, footer, and a call to action. We're advised to design they layout using Adobe Illustrator or Photoshop.
My topic for this topic landing is make up products made by a make up artist called James Charles. I decided to choose this because James Charles has made his own clothing website but not his make up site.
I looked at some references of makeup websites to help me design my websites. Also, some other good website layout design in pinterest.
The make up products especially the eyeshadow is very contrast as the eyeshadow colours are striking and bold colours so I tried to keep it simple to use white, grey and black as I was going for the minimalistic look.
After sketching, I went to Adobe Illustrator and designed the layouts using artboards.
Mr Shamsul pointed out some minor errors in my 1st attempt and he also reminded to put more in my footage such as the copyright and about, privacy and etc. For the 2nd page, I shouldn't put it as centre arrangement because the rest isn't in centre. In addition, I should give more spaces and also change the color of the call to action on the 1st page maybe either the box becomes grey or black outline with black font. After receiving the feedback, I made some changes to make it look better.
Mr Shamsul also recommended me to make the feedback if the users click on the call to action on the first page. I could make the color lighter or experiment more to get the right one.
FEEDBACK
Week 3
Mr Shamsul approved my idea of making a site to promote the makeup products and he told me that "Buy Now" is a more suitable call to action than "Add to Cart".
Week 4
Mr Shamsul said that for the header part, the menu bars, navigational bars and logo are alright, there is hierarchy. He mentioned that I should add more grey background on top of the picture. I need to add another artboard too at the side tho show that there is feedback in the call to action "shop now". For the second artboard, he said that I shouldn't do centre alignment because it's too inconsistent and that page wasn't clear. For third artboard, I should give more spaces around. For the last page, I should give more space and for the footage, I need to add copyright and about on the left side.
REFLECTION
Experiences
Week 3
I did some research on how to make a good wireframe and examples of good web design layout which really inspire me to design the landing page but I should always keep in mind to sketch the wireframe on paper before executing it or designing it on screen.
Week 4
It was stressful at first to design the layout but the more I put the elements, the more I was having fun during executing and designing. However, I should always remember of the user interface so that it is easier for the users to spot the buttons and read the text.
Observations
Week 3
I observed that some websites are aesthetically good but the placement of their menu bars or navigational bars are sometimes on the side on a 45 degree angle which could be hard to find instantly sometimes.
Week 4
I observed that not all of the websites that consist of make up products are good. Some are good but some are a bit confusing. I took this observation to my layout design and tried to make a better one. I should take lots of reference from the examples of good websites and take it as an inspiration.
Findings
Week 3
I noticed that functionality should come first before aesthetics because it's important for users to be able to easily go through the website. Besides that, I should always keep in mind that if for example I go for right alignment, I should never change the next text to centre alignment so that there is flow.
Week 4
I found that alignment and spacing in a website is crucial, as it is pleasing for the users to look at and also the readability, overall it would look very organised not cluttered. In addition, after getting the lecturer's feedback, I have a more clear understanding of the mistake that I did in this project and a better alternative to fix it.
FURTHER READINGS
Wireframing Essentials by Matthew J Hamm
Week 3
Chapter : The Design Process (Transitioning to wireframes)
A wireframe is the basic blueprint that illustrates the core form and function found a single screen of your web page or application. The fidelity of these wireframes will increase in detail as we refine them. However, our first version is likely to just utilise basic black and white outlines na shapes to hint at where navigational elements, text, and graphics will be placed on the screen. The collection of these wireframes should give a comprehensive skeletal view of our entire product.
As we can see by examining the preceding wireframe, the content of the page supports one primary task : to direct the user to find the product they would like to learn more about.
Web Design : 11 Characteristics of a User-friendly website
Week 4
Link : https://www.socialmediatoday.com/content/web-design-11-characteristics-user-friendly-website
I found this article about how to make a good and user-friendly website. It discusses about how the website should not only look good but also provide a seamless user experience for visitors. In this situation, good usability is important. In web design, good website usability is about making it easy for visitors to find the information they need quickly and easily. This articles listed down 11 essential characteristics of a user-friendly website.
1. Mobile Compatibility
As more and more people use mobile phones to access the internet, creating a mobile optimized website has become a necessity. This means that we should make website not only for computer screen but also for mobile phones.
2. Accessible to All Users
A user-friendly website should also be accessible to everyone including blind, disabled or the elderly. These users typically use screen-readers to access the internet. This is important because this could make your website available to larger audience and it could be accessed easily on-screen readers.
3. Well Planned Information Architecture
How information is organised and presented on your website is vital for good usability. However, it is often neglected. It has become important for websites to offer a wide range of information and resources to attract their target market. We need to always plan our website sections and categories carefully and present information in a way it's easier for users to find. In addition, we should always think from the perspective of the users.
4. Well-Formatted Content That Is Easy to Scan
The average internet user skims through the content on a web page instead of reading each and every word from top to down because they are always scanning quickly to determine if it is relevant to their needs. This is why we need to use the correct use of headings, sub-headings, paragraphs, bullets or list to break up text, making it easier for readers to scan.
5. Fast Load Times
A typical will always only wait for a few seconds to access to your website and if your website is too long then they will leave.
6. Browser Consistency
Although modern browsers have evolved and become more efficient, some inconsistencies still exist. It is important to ensure your website appears and behaves consistently across all major browsers.
7. Good Navigation
Good navigation is one of the most important aspects of website usability. It is equally important for the navigation to be clutter-free. Try to limit the number of menu items as far as possible. A drop-down menu or sub-navigation may work better on large site with many sections and pages.
8. Good Error Handling
Good error handling and description on-screen messages are very important for good usability. Display the right error message improves the user experience and overall usability.
9.Valid Mark-Up and Clean Code
This ensures the website will load faster and appear consistent across browsers and devices. It also makes it easier to locate problems and troubleshoot if the need arises.
10. Contrasting Colour Scheme
The right contrast between background of the website and content is the most important web design principles. Lack of contrast makes it difficult for visitors to read your content in the website. Good contrast for examples is black text on a white background for legibility and readability.
11. Usable Forms
Forms are very important as they allow users to interact with the site. They are also very useful for generating leads for a business. To get the most out of your site, it is important to ensure the forms are easy to use and accessible to everyone.
Maydeline (0335392)
Interactive Design
Project 1 - Landing Page
LECTURES
Lecture 3 : Introduction to the Language of Web
18.04.19
We learned about the establishment and development of web and the terms used in designing a website. We also discuss the differences between web and internet and who created them. World Wide Web Consortium (W3C) is created for web standards.
Lecture 4 : HTML Document Development
25.04.19
Today's class started with a brief lecture regarding to the class activity we're going to do which is coding html. We discussed about the basic elements of html.
INSTRUCTIONS
PROJECT 1 - LANDING PAGE
(Week 3)
Our first project we had to do a web landing page based on our interest, could be musician, band, singer, etc. We started off by choosing our topic, target audience and purpose of the website. The screen size is a standard web screen size (1024px by 768). Our landing page should include a header, footer, and a call to action. We're advised to design they layout using Adobe Illustrator or Photoshop.
My topic for this topic landing is make up products made by a make up artist called James Charles. I decided to choose this because James Charles has made his own clothing website but not his make up site.
 |
| Fig 1.2 Notes |
 |
| Fig 1.3 Notes of header, content, footer |
I looked at some references of makeup websites to help me design my websites. Also, some other good website layout design in pinterest.
 |
| Fig 1.4 References https://kkwbeauty.com |
 |
| Fig 1.5 References https://colourpop.com |
 |
| Fig 1.6 References https://www.fentybeauty.com |
 |
| Fig 1.7 References |
The make up products especially the eyeshadow is very contrast as the eyeshadow colours are striking and bold colours so I tried to keep it simple to use white, grey and black as I was going for the minimalistic look.
 |
| Fig 1.8 Wireframe sketch |
After sketching, I went to Adobe Illustrator and designed the layouts using artboards.
 |
| Fig 1.9 1st attempt of landing page using artboards |
 |
| Fig 1.10 2nd attempt of landing page (Final Result) |
Mr Shamsul also recommended me to make the feedback if the users click on the call to action on the first page. I could make the color lighter or experiment more to get the right one.
 |
| Fig 1.11 2nd attempt of landing page - call to action feedback (Final Result) |
FEEDBACK
Week 3
Mr Shamsul approved my idea of making a site to promote the makeup products and he told me that "Buy Now" is a more suitable call to action than "Add to Cart".
Week 4
Mr Shamsul said that for the header part, the menu bars, navigational bars and logo are alright, there is hierarchy. He mentioned that I should add more grey background on top of the picture. I need to add another artboard too at the side tho show that there is feedback in the call to action "shop now". For the second artboard, he said that I shouldn't do centre alignment because it's too inconsistent and that page wasn't clear. For third artboard, I should give more spaces around. For the last page, I should give more space and for the footage, I need to add copyright and about on the left side.
REFLECTION
Experiences
Week 3
I did some research on how to make a good wireframe and examples of good web design layout which really inspire me to design the landing page but I should always keep in mind to sketch the wireframe on paper before executing it or designing it on screen.
Week 4
It was stressful at first to design the layout but the more I put the elements, the more I was having fun during executing and designing. However, I should always remember of the user interface so that it is easier for the users to spot the buttons and read the text.
Observations
Week 3
I observed that some websites are aesthetically good but the placement of their menu bars or navigational bars are sometimes on the side on a 45 degree angle which could be hard to find instantly sometimes.
Week 4
I observed that not all of the websites that consist of make up products are good. Some are good but some are a bit confusing. I took this observation to my layout design and tried to make a better one. I should take lots of reference from the examples of good websites and take it as an inspiration.
Findings
Week 3
I noticed that functionality should come first before aesthetics because it's important for users to be able to easily go through the website. Besides that, I should always keep in mind that if for example I go for right alignment, I should never change the next text to centre alignment so that there is flow.
Week 4
I found that alignment and spacing in a website is crucial, as it is pleasing for the users to look at and also the readability, overall it would look very organised not cluttered. In addition, after getting the lecturer's feedback, I have a more clear understanding of the mistake that I did in this project and a better alternative to fix it.
FURTHER READINGS
Wireframing Essentials by Matthew J Hamm
Week 3
 |
| Fig 2.1 Book cover |
Chapter : The Design Process (Transitioning to wireframes)
A wireframe is the basic blueprint that illustrates the core form and function found a single screen of your web page or application. The fidelity of these wireframes will increase in detail as we refine them. However, our first version is likely to just utilise basic black and white outlines na shapes to hint at where navigational elements, text, and graphics will be placed on the screen. The collection of these wireframes should give a comprehensive skeletal view of our entire product.
 |
| Fig 2.2 Example of wireframe |
As we can see by examining the preceding wireframe, the content of the page supports one primary task : to direct the user to find the product they would like to learn more about.
Web Design : 11 Characteristics of a User-friendly website
Week 4
 |
| Fig 2.3 Article Website |
Link : https://www.socialmediatoday.com/content/web-design-11-characteristics-user-friendly-website
I found this article about how to make a good and user-friendly website. It discusses about how the website should not only look good but also provide a seamless user experience for visitors. In this situation, good usability is important. In web design, good website usability is about making it easy for visitors to find the information they need quickly and easily. This articles listed down 11 essential characteristics of a user-friendly website.
1. Mobile Compatibility
As more and more people use mobile phones to access the internet, creating a mobile optimized website has become a necessity. This means that we should make website not only for computer screen but also for mobile phones.
2. Accessible to All Users
A user-friendly website should also be accessible to everyone including blind, disabled or the elderly. These users typically use screen-readers to access the internet. This is important because this could make your website available to larger audience and it could be accessed easily on-screen readers.
3. Well Planned Information Architecture
How information is organised and presented on your website is vital for good usability. However, it is often neglected. It has become important for websites to offer a wide range of information and resources to attract their target market. We need to always plan our website sections and categories carefully and present information in a way it's easier for users to find. In addition, we should always think from the perspective of the users.
4. Well-Formatted Content That Is Easy to Scan
The average internet user skims through the content on a web page instead of reading each and every word from top to down because they are always scanning quickly to determine if it is relevant to their needs. This is why we need to use the correct use of headings, sub-headings, paragraphs, bullets or list to break up text, making it easier for readers to scan.
5. Fast Load Times
A typical will always only wait for a few seconds to access to your website and if your website is too long then they will leave.
6. Browser Consistency
Although modern browsers have evolved and become more efficient, some inconsistencies still exist. It is important to ensure your website appears and behaves consistently across all major browsers.
7. Good Navigation
Good navigation is one of the most important aspects of website usability. It is equally important for the navigation to be clutter-free. Try to limit the number of menu items as far as possible. A drop-down menu or sub-navigation may work better on large site with many sections and pages.
8. Good Error Handling
Good error handling and description on-screen messages are very important for good usability. Display the right error message improves the user experience and overall usability.
9.Valid Mark-Up and Clean Code
This ensures the website will load faster and appear consistent across browsers and devices. It also makes it easier to locate problems and troubleshoot if the need arises.
10. Contrasting Colour Scheme
The right contrast between background of the website and content is the most important web design principles. Lack of contrast makes it difficult for visitors to read your content in the website. Good contrast for examples is black text on a white background for legibility and readability.
11. Usable Forms
Forms are very important as they allow users to interact with the site. They are also very useful for generating leads for a business. To get the most out of your site, it is important to ensure the forms are easy to use and accessible to everyone.
Comments
Post a Comment