Interactive Design - Project 2

-

Week 6 - 8
SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media
GCD60904 Interactive Design
Project 2 - Website Design Prototype


Instructions


Project 2 - Website Design Prototype


About Website Prototype
As this was a website made for architectural and engineering services, I decided to focus less on making it look pretty and aesthetic and more on making it look minimal and easy to navigate with visible interactive prompts. 

The colour scheme I picked is based on the company's logo, to make the website look cohesive and tied together by making every page share the same colour palette, as my problem with the original website is that some pages have completely different colour palette and can throw some people off with its inconsistency. The contrasting colours in this palette allows for clearer visibility on the page contents and it is also visually pleasing to the eyes, especially with the dark background.

In the homepage, I liked the style of a wide image with the company's logo in front of it in the original website, so I decided to incorporate that into the redesign. For the boxes where users can find out more details about the company's certifications, I made it so that there would be less scrolling down, and instead they can scroll horizontally on the boxes since I wanted to have some contents on the bottom of the page to be a replacement for other elements in other pages that would be better suited for the homepage.

The content pages I decided to do are 'Markets' and 'About Us'. 

As mentioned in the previous paragraph, some pages in the original website are inconsistent with the colour, so I decided to redesign the 'Markets' page because of it. As for the contents in the page, I removed the unnecessary white buttons of the original website and replaced the lower contents of the page, which does the same thing as those buttons, with those buttons. I recoloured them as well to fit the colour scheme.

For the 'About Us' page, the page in the original website was messy, and the font they used was unreadable especially for such a long body of text. In my redesign, I decided to change the font, which was used in most of the prototype, and increased the text size by a little for better legibility. I increased the text box size horizontally, so users won't have to scroll down a lot to read the text. I decreased the opacity of the background to give users an easier time to read.

While there was nothing wrong with the original contact page of the website, I decided that I wanted it to fit the colour scheme of the redesign, so I made a simple contact form using a contact form asset as a reference to decide on how I wanted it to look. I put it on the left side of the page, while details such as the company's external contacts such as email and contact number will be on the right side, so users can choose whichever method they would like to use to get in touch with the company.

My goals for this redesign is to make it look minimalistic and yet appealing, and easy to navigate with no complicated details.

Comments

Post a Comment

Popular posts from this blog

Interactive Design - Project 1

-
Image
Week 1 - 6 SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media GCD60904 Interactive Design Project 1 Instructions Submission Presentation Design Evaluation From the homepag e, it can be determined that the website’s representative colours are red, black and white. These colours contrast with each other nicely and makes the important information stand out clearly. The colours could be applied differently to make the website look more visually pleasing to the eye. The fonts used in this website are Arial and Helvetica. These fonts make the contents of the pages look easy to read without looking too cluttered. However, In some pages, the font used is Cormorant Garamond, which looks very different from Arial and Helvetica , so there is a dip in consistentency in its font choices. The same can be said about the branding or logo, which has 3 different fonts that don’t match with each other at all. User Experience (UX) When a user wants to go to any of the tabs such as ...
Read more

Design Research Methodology : E-Portfolio

-
Image
  Week 1 - 14 SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media RES 60603 Design Research Methodology Final Report Instructions Final Report Video Presentation Presentation Slides Feedback Reflection Experience Task 1 At the beginning of the module, we are required to search for a topic that interests us, with various sources that are related to it, whether it is directly related or mentioned somewhere else. A topic came to mind about minimal illustrations because I had been looking at some minimal designs prior to the start of the semester, so I decided to base my topic around it. It was a bit difficult to think of the research questions and research objectives that aren’t too basic and easy to answer. I came up with some and received feedback from Miss Jinchi to improve the research questions and research objectives to make them more interesting. I wrote down the problem statement using paraphrased sentences from existing sources and shortened it more to make it mo...
Read more

Information Design - Exercises

-
Image
Week 1 - 7 SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media GCD 60504 Information Design Exercises Instructions Exercises Exercise 1 - Quantifiable Information I have a packet of colorful cotton balls that I could use for this exercise. There were too many so I picked out a usable amount that still has some variety in colors.  Fig. 1, unsorted cotton balls Then I arranged them by color in a swirly pattern and counted how many of each colored cotton ball there is. Final Composition Fig. 2, final composition with cotton balls Exercise 2 - L.A.T.C.H Infographic Poster For this exercise, we needed to organise a group of information that combines and utilised at least 4 of the L.A.T.C.H principles. I have decided to choose sharks as my topic and listed out the L.A.T.C.H principles I will be using, which will be; L (Location) = The Mediterranean Sea A (Alphabet) = Shark Names by Alphabet C (Category) = Species of Sharks H (Hierarchy) = Apex Predators, Mid-Level Predators,...
Read more