22/10/19 - 19/11/19 (Week 9 - Week 13)
Piyaphon Inthavong (0337589)
Interactive Design
Final Project
INSTRUCTIONS
FINAL PROJECT: Client's Website
Week 9:
October 22nd, 2019
Our task for the final project is to create a professional website for a classmate. I partnered up with Zain and was assigned to create a portfolio website for himself. I started up by asking him about his contents, and the most important thing about the website. His answers were to showcase the artworks he's been working on for years.
Through our discussions, we decided to look at samples and templates to decide upon the themes and the styles that our website would look like. Zain was very happy about this template below:
Through our discussions, we decided to look at samples and templates to decide upon the themes and the styles that our website would look like. Zain was very happy about this template below:
 |
| https://colorlib.com/wp/template/studio/ |
To finalized the first week of discussion, Zain and I discussed about the contents and the overall layout of the website. As for the logo of his website, he wanted a simple look to feature his artworks and not steal any attention from it. Due to the time limitations that we have, we both agreed that a classic sans serif typeface was the perfect solution to the logo, so I quickly worked through his logo so that he would be happy about it.
Week 10:
October 29th, 2019
As a week passed by, I showed my progress to Zain and asked for his feedback. It all nice all around due to the big help from bootstrap template. Zain was happy about the artwork showcase that I thoughtfully named for him and the artworks which I had categorized in the “portfolio” section of the website.
However, by only stuffing the contents and details into the bootstrap was clearly not enough. There are much more things to be fixed as highlighted below:
Both Zain and I spotted a few errors from the template and made suggestions to fix them. One of them was the large social media tab in the homepage. The huge numbers which was displayed in the template was unnecessary and at the same time was distracting the main artwork. The amount of artworks that was initially displayed in the homepage was a little too much and Zain had told me to lower it down.
This version is yet unfinished, but it still face the same issue from the previous discussion. The bar on the left side was still too big and distracting. The homepage looks dull, and monotone.
Again, the next issue that I have noticed was the overall color of the template. All the pages displayed only black and white and showed no emotion to the viewers. That was when I had to start planning and redesign the website a little to increase the attractiveness of the website as an artist portfolio.
The following is an updated mood board after finishing with the final website: |
| Categorized "Paint" artworks |
 |
| Categorized "Pencil" artworks. |
However, by only stuffing the contents and details into the bootstrap was clearly not enough. There are much more things to be fixed as highlighted below:
 |
| Spotting mistakes and changes from the template. |
Both Zain and I spotted a few errors from the template and made suggestions to fix them. One of them was the large social media tab in the homepage. The huge numbers which was displayed in the template was unnecessary and at the same time was distracting the main artwork. The amount of artworks that was initially displayed in the homepage was a little too much and Zain had told me to lower it down.
Week 11:
November 5th, 2019
 |
| Fixed homepage of mine from the previous session. |
 |
| Contact page from the template. |
Again, the next issue that I have noticed was the overall color of the template. All the pages displayed only black and white and showed no emotion to the viewers. That was when I had to start planning and redesign the website a little to increase the attractiveness of the website as an artist portfolio.
Week 12:
November 12th, 2019
This week, I start planning through the color selection of the website portfolio. The main idea behind this was to carefully select a color which can be used as the main theme of the website. The single selection of the main color as a theme may sound uncomplicated, but once done, it will be the main influence to the branding of the website and will strongly affect how users think about the artist which in this case is my classmate, Zain.
Through mind mapping, it helps me grasp a quick idea about the main look of the final website. As an art portfolio, the website should look expressive and creative in a way that brands the artist into looking skilled. This can be achieved by using a violet tone color which has the most suitable attributes such as unique, creative and youth. Purple is often seen in general as a feminine color, so I dimmed its brightness and slightly shifted its tint to give it more of a masculine look.
Other than the artistic sides, the website has to be friendly and approachable as the main purpose of the portfolio is to allow visitors to connect with the artists. A clean white background with a normal contrast of the dark text is a clear winner to create the most professional look into the portfolio website. I also chose the violet-purple color as an additional accent to the layout of the web pages to make the website more interesting and at the same time approachable to all ages.
It was a little late, but I had noticed how important the social media section bar is so I redesigned it. The bar is presented in every pages of the webpage so it is very noticable by the users, and because the previous design was already quite good, I decided to improved upon it. The overall size is reduced to make the bar less noticeable and hence less distractive. The ALL CAPS from the original template was redundant to the design, which makes the typography even harder to read as it is already aligned vertically. To further improve upon the typography, I increased the font size of the words by a little, which made the text way easier to read compared to the template preset. The huge icon of the mail was again reduced by a little, the width was also reduced so that it takes up less space from the original which is the in-your-face design type. Lastly, the color was changed to match the theme of the entire website.
As seen from the images above, I try to keep the design as consistent as possible, which is state in one of the most important design element and key in website design. I implied the violet color into important titles, footer, navigation, and buttons, while the rest of the design remains either black and white to keep the design as minimal and so to frame the colorful artworks of the artist.
 |
| Website color mind map planning phase. |
Through mind mapping, it helps me grasp a quick idea about the main look of the final website. As an art portfolio, the website should look expressive and creative in a way that brands the artist into looking skilled. This can be achieved by using a violet tone color which has the most suitable attributes such as unique, creative and youth. Purple is often seen in general as a feminine color, so I dimmed its brightness and slightly shifted its tint to give it more of a masculine look.
 | |
|
Other than the artistic sides, the website has to be friendly and approachable as the main purpose of the portfolio is to allow visitors to connect with the artists. A clean white background with a normal contrast of the dark text is a clear winner to create the most professional look into the portfolio website. I also chose the violet-purple color as an additional accent to the layout of the web pages to make the website more interesting and at the same time approachable to all ages.
 |
| Redesigned social media section bar. |
It was a little late, but I had noticed how important the social media section bar is so I redesigned it. The bar is presented in every pages of the webpage so it is very noticable by the users, and because the previous design was already quite good, I decided to improved upon it. The overall size is reduced to make the bar less noticeable and hence less distractive. The ALL CAPS from the original template was redundant to the design, which makes the typography even harder to read as it is already aligned vertically. To further improve upon the typography, I increased the font size of the words by a little, which made the text way easier to read compared to the template preset. The huge icon of the mail was again reduced by a little, the width was also reduced so that it takes up less space from the original which is the in-your-face design type. Lastly, the color was changed to match the theme of the entire website.
 |
| About page of the website. |
 |
| Blog page of the website. |
 |
| Portfolio page of the website. |
As seen from the images above, I try to keep the design as consistent as possible, which is state in one of the most important design element and key in website design. I implied the violet color into important titles, footer, navigation, and buttons, while the rest of the design remains either black and white to keep the design as minimal and so to frame the colorful artworks of the artist.
Week 13:
November 19th, 2019
This week was our last week to complete the website, so I implemented the color plan to the final website and prepared along with the mood board which was made the previous week during the researching and planning phase and compiled it with the final website to show it to Zain.
The link to the final website is below:
FURTHER READING
 |
| 6 Tips to Choose a Stunning Website Color Scheme. |
Previously, I read about elements that builds a successful website and even through my research survey, color seemed to be one of the most memorable design element that heavily influence what users think about any websites they ever visited. Due to its crucial existence in all designs, a single selection of color may either create or break the brand of the website, so I'd like to expand into that aspect.
Through this blog, the author emphasized on 6 important tips to create an attractive website. The following tips are listed below:
1. Get to know color psychology basics
2. Acquaint yourself with color theory
3. Think about mixing color combinations
4. Keep it simple
5. Contrast your colors
6. Integrate your branding
By getting to know the color psychology basics, the author implies that individual colors result in different output towards users' feeling and thoughts within the website and the products. For example, green creates an organic feeling, red means love, passion energy, white is pure, clean, etc. Knowing the right meaning in each colors can change how people view our intended products. Keep in mind that each colors may also imply different meanings in different cultures.
To understand the color theory, we first need to understand primary, secondary, and tertiary colors. Then about warm and cool colors, and lastly the color nuances which is the color tints, shades, and tones in each colors.
In websites, there are five main color combinations, which are the: complementary, split complementary, triads and tetradic, analogous, and monochromatic.
Complementary colors is at the opposite from one another on the color wheel. A complementary color combination will be composed of one warm color and a cool color.
Split complementary colors is composed of a base color and two colors that are adjacent to the complement of the base color.
Triads and tetradic colors have similar relationships. Triads use colors that are evenly spaced on the color wheel (like red, blue, and yellow). Tetradic colors are four colors comprised of two pairs of complementary colors (like red, green, blue, and orange).
Analogous colors are next to each other on the color wheel. As a result, analogous colors are very similar in their tones.
Lastly, monochromatic colors are variations of the same color. The variations can be created by altering their tints, shades, and tones.
https://www.wordstream.com/blog/ws/2019/10/03/website-color-scheme
Comments
Post a Comment