10/08/19 - 17/09/19 (Week 3 - Week 4)
Piyaphon Inthavong (0337589)
Interactive Design
Project 1
LECTURE NOTES
Week 3:
September 10th, 2019
Today we learned about the history and background of the web. The world has by far made a significant changes on the web from the accessibility limitations of mouse, keyboard, and monitor to wide ranges of electronic mobile devices using touch screen in our daily manner. These are achieved by setting the web standards for the world, and that is the beginning of world wide web.
Web standards may include common coding languages that are used by almost all types of operating systems and browsers; This helps prevent the probability for our website will look different from each of the visitors that serve the web.
Learning the structure of the web page was the next topic, we learned how to use HTML tags and ways to layout/format our contents in the right way. Going through the HTML basics, we learned how to create a simple web page using tags such as:
<html> for the opening of html code
<body> to fill in contents and information of the page
<h1> is the heading of the paragraphs; Heading size range from 1 to 6.
<p> stands for paragraph, this is where the text are filled in.
<b> for bold text; <i> italic
<ol> for ordered list (numbers); <ul> unordered list (usually bullet points)
Always remember to close all tags with the “/” everytime a tag is opened.
The slides below sums up the lectures we had today.
Week 4:
September 17th, 2019
The lectures today were mainly about the structure of HTML:
<html> <head> <title> Title </title> </head> <body> </body> </html>
<html> <head> <title> Title </title> </head> <body> </body> </html>
English is the universal language for HTML, and lower cases are suggested to use for coding because it is generally understood by all platforms and browsers. All websites have the screen resolution of 72 ppi (pixels per inch) so it is advisable for the quality all images to be reduced into a lower file size for a faster loading time.
INSTRUCTIONS
PROJECT 1: Landing Page Design
Week 3:
September 10th, 2019
The first project requires us to create a static landing page from the choice of our favorite singer, band, or sports team. I have chosen to design a landing page for one of my favorite singers who goes on a tour around the world. The target audience for this particular website is for the fans and music enthusiasts in general. The website's main aim is to give access for people to buy online tickets to his concerts and provide people the details about his tour.
Target Audience: Fans, music enthusiasts.
Goal: Give people the access to buy tickets and learn more about his tour.
Call-to-action button: Buy tickets.
As for the reference, I first looked up at Bruno Mars and Good Vibes Festival website to learn and analyze their layout strategy into use. The links are as below:
www.goodvibesfestival.com
https://www.brunomars.com
Target Audience: Fans, music enthusiasts.
Goal: Give people the access to buy tickets and learn more about his tour.
Call-to-action button: Buy tickets.
As for the reference, I first looked up at Bruno Mars and Good Vibes Festival website to learn and analyze their layout strategy into use. The links are as below:
www.goodvibesfestival.com
https://www.brunomars.com
 |
| Sketches, analytical phase and details on the landing page |
 |
| Variety of wireframes of the website landing page. |
 |
| A relevant reference on the website of a similar artist, Boy Pablo. Expressive and simplicity is the characteristic of this music genre. |
 |
| Reference of Phum Viphurit current flyer used to tell quick details regarding the tour. |
 |
| Assets I've collected and drawn (with Illustrator). |
After finishing my research on the artist, I began by laying out the important texts and element into an artboard in Adobe Illustrator. The most important thing during this step is to make the webpage functional as shown in the previous wireframe, and to lay out in the most simplest way so that the interface is self-explanatory for all users.
One of my main goal for the UI of this webpage is to replicate and apply the artist's style so that the visual appearance of the UI feels more belonging and exclusive to the artist. Phum Viphurit is known to be an expressive type artist and his attributes and styles are as below:
- Indie (music genre)
- Blue (favorite color)
- Expressive person (dislike black and white)
- Fun/outgoing (definitely not a straight or bold text)
I colored the first section blue and apply contrast to by coloring the last section orange. Putting the logo up front in a huge size lets people know they're in the right page, and located below the logo is the call-to-action button "buy tickets," which is the main reason why people entered this webpage in the first place. The little text below the "buy tickets" is an additional information regarding the tickets. Lastly, the hamburger menu serves the purpose of simplifying the visual hierarchy.
Once the pointer clicks on the "buy tickets" or arrow down, the page moves down to the second section, dates and location of the tour. Hovering the mouse over any of the location then the hovered-over text highlights into yellow color, indicating the feedback that allows the user to click once more to get into the further details and so on to buy the tickets. There are two regions available, that is Asia and Europe, the dates and location will change accordingly to the selected region. Below the tour details is the logo of the music producer for Phum Viphurit.
The last section of the landing page acts like an announcement to the newest album released by the artist, and because Spotify have become the standard of a widely accessible music platform, I've chosen to add Spotify as the main function to play their music and to not add any music player in the website since it'll only make the site load slower or either consume more data. The main function of the website is to buy tickets, so fast and efficient loading time means lesser frills or additional features on the page; It's either one or another.
It is essential to include the copyright details as it verifies the validity of the information in this webpage and the tickets the user is going to buy. Few social media icons are located above the copyright details which directs the user to the selected website/app to either the artist's account, profile page, or music page.
One of my main goal for the UI of this webpage is to replicate and apply the artist's style so that the visual appearance of the UI feels more belonging and exclusive to the artist. Phum Viphurit is known to be an expressive type artist and his attributes and styles are as below:
- Indie (music genre)
- Blue (favorite color)
- Expressive person (dislike black and white)
- Fun/outgoing (definitely not a straight or bold text)
I colored the first section blue and apply contrast to by coloring the last section orange. Putting the logo up front in a huge size lets people know they're in the right page, and located below the logo is the call-to-action button "buy tickets," which is the main reason why people entered this webpage in the first place. The little text below the "buy tickets" is an additional information regarding the tickets. Lastly, the hamburger menu serves the purpose of simplifying the visual hierarchy.
 |
| Progress 1: Landing page is divided into 3 sections (buy tickets, tour details, listen now) |
Once the pointer clicks on the "buy tickets" or arrow down, the page moves down to the second section, dates and location of the tour. Hovering the mouse over any of the location then the hovered-over text highlights into yellow color, indicating the feedback that allows the user to click once more to get into the further details and so on to buy the tickets. There are two regions available, that is Asia and Europe, the dates and location will change accordingly to the selected region. Below the tour details is the logo of the music producer for Phum Viphurit.
 |
| Progress 2: I combined the color of the 1st section and the 2nd since they are related to each other. |
 |
| Progress 3: Tour artwork is added to the background in a low opacity overlay mode. The details below "buy tickets" is changed into the end date of the tickets so that the user can plan out their time and know when to purchase before. |
The last section of the landing page acts like an announcement to the newest album released by the artist, and because Spotify have become the standard of a widely accessible music platform, I've chosen to add Spotify as the main function to play their music and to not add any music player in the website since it'll only make the site load slower or either consume more data. The main function of the website is to buy tickets, so fast and efficient loading time means lesser frills or additional features on the page; It's either one or another.
It is essential to include the copyright details as it verifies the validity of the information in this webpage and the tickets the user is going to buy. Few social media icons are located above the copyright details which directs the user to the selected website/app to either the artist's account, profile page, or music page.
 |
| Progress 4: An attempt to introduce gradient into the colors. |
 |
| Progress 5: Introducing the free form gradient to add a modern look to the webpage, also prevents the color from looking dull. |
 |
| Final touch of the webpage. Fully incorporate gradients, decreased the size of "listen now," increased point size of tour details, and removed the producer logo below the tour details as the name is already mentioned in the copyright section. |
 |
| Final outcome of Phum Viphurit website landing page. I have fixed the inconsistency of the second section of the web page, by increasing its width and adding the "buy ticket" button into the tour details section. |
 |
| The first section of the landing page. |
 |
| The screen dims after clicking on the hamburger menu to isolate the viewers attention into the menus. |
 |
| Tour details page. The lists are cleaned up by increasing the point size of the details and lessening the items and dividing the rest into another mini page that can be easily navigated by the small circles (located below the tour locations). |
 |
| The last section of the landing page, "listen now" directs the user into another spotify tab for the most recent music/singles. The guy in the background represents Phum Viphurit. |
FEEDBACK
Week 4:
September 10th, 2019
The overall usage of color is pleasant to look at, the contrast is nicely presented. Use one arrow instead of two for the scrolling symbol on the first page. The column of the first and second section of the landing page doesn’t feel belonging because it is too blank on the sides. Lastly, expand the hamburger menu, design another individual page to show what happens if the user interacts with the menu.
FURTHER READING
 |
| 8 Principles of Good Website Design, article by P. Sujay |
A website’s success mainly depends on its design. A nicely designed site includes more than the visual design but as well the usability and utility. Lacking in any of the aspect may end up ruining your brand impression. Simple is the best The more elements there are in a website, the more things there is for the visitors to look at. Think about the main purpose of the site and include only the necessary things to make the site appealing and clean for the users. Consistency A website’s consistency matters a lot because it creates familiarity to the design elements within the websites and even the company’s brand itself. Your fonts, sizes, headings, sub-headings, and button styles must be the same throughout the website. Come up with the fonts and the right colors for the texts, buttons, etc, and stick to them throughout the development. Typography & Readability Typography must be visually appealing and readable for visitors. Use fonts that are easier to read such as the modern sans-serif fonts like Arial, Helvetica, etc. can for the body texts. Use proper combinations of typefaces for each and every design element such as headlines, body texts, buttons, etc. Mobile compatibility Smartphones and tablets are already everywhere. If users are not able to access the website with the right display with their mini devices then they might as well not use it at all. Websites must be responsive to all screen sizes for users to be able to use them anywhere they needed. Color palette and imagery Color palette is probably one of the things that all users will ever remember in a website because it help brands the company. Enhance users’ experience by choosing a complementary color palette to give a balanced-look to your website design. 3 or 4 tones for the whole websites is optimum to give an appealing and clear design. The same goes for images, do not use multiple vibrant images. Easy loading I once believed that all images must be displayed at its max pixels as possible because the details within the pixels can make a huge difference to some people. However, it is different when creating websites. Everyone hates websites that take forever to load so we must take care of the images file size and compress them as much as we can to display the right quality. Easy Navigation Remember the “three-click-rule” because no one ever likes a complicated system within a website. Everyone seeks simplicity in their lives and so the web developer must plan the navigation carefully so that its effective for use. Communication
The main purpose for users to use any website is to get information. Users tend to spend more time on websites that can communicate clearly and efficiently, so the most important thing here is to organize information in a clear use of visual hierarchy headlines, sub-headlines, use bullet points, etc.
https://wpastra.com/good-website-design/
Comments
Post a Comment