INTERACTIVE DESIGN / PROJECT 1 - PROTOTYPE DESIGN

24/04/2023 - 08/05/2023 / Week 4 - Week 6
Chew Zhi Ern / 0358995
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 1 / Prototype Design


INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1O5VSC53JFXRwasT-fvvcldMP48ad3zt1/preview" width="640" height="480" allow="autoplay"></iframe>

LECTURES

Lectures: Refer to Exercises

PROJECT

Task 1: Landing Page Design

Instructions:
Choose an existing website with design problems that you would like to address. Analyze the website's design and identify the areas that need improvement. Develop a concept for your landing page that addresses the design issues and improves the user experience. Create a wireframe or a mock-up of your landing page design. Develop your landing page prototype using any prototype software of your choice (Figma or Adobe XD).

Deliverables:
A one-page design concept that describes your landing page and the design issues you are addressing.

Requirements:
Your landing page should include a clear and concise headline that describes the purpose of the website. The landing page size width is 1366 pixels. Follow the preset in Figma or Adobe XD. The landing page should include a call-to-action (CTA) a button that directs users to the most important part of the website. It should be visually appealing and easy to navigate. The landing page should adhere to web design best practices, including accessibility and usability.

In this project, I selected BERKSHIRE HATHAWAY's webpage. https://www.berkshirehathaway.com
And I used Adobe XD to develop my work.

Existing Original Web Landing Page

To start off, I thoroughly considered the design, layout, content and functioning of the website in my assessment and analysis of it. Also, I searched for related information to learn more, as the page doesn't provide readers with any insight into the origins or goals of the website.

Summary Notes

After deciding which parts require improvement and then I begin to construct different wireframe layouts for my landing page design. Below are the drafts of the wireframe I created.

Mock-up Drafts of the Landing Page Design

Following that, I imported some related images and elements and work on my page design. 
Evidence of the design process:

Clear Navigations Added

Related Images, Headline, Short Introduction and Call To Action buttons included

Category by Layout and Graphic Elements Added

Information Footer Provided

Here is my outcome.

Initial Outcomes

I made some changes to improve my work after receiving some feedback and comments from the lecturer.

Feedback Given & Improvements Needed:
  1. Make sure the content should place within the framework (Grid > Layout > Column Width: 80)
  2. Choose Either the Border or Drop Shadow
  3. The frame below does not fit the whole design (Slogon & Informations)
  4. Call To Action buttons need more margins space
  5. The right design for the Header & Footer looks better

The Outcome of the Task

I have made the final adjustments and revisions to make it better based on the comments from the lecturer.

Latest Feeback by Mr. Shamsul:
  1. Uniformize the typeface; it is too whimsical and unprofessional-looking.
  2. Replace the background of the primary image with one that is more suited. (Eg: an elderly businessman)
    *Search from Pexels
  3. The design of the buttons should be simpler. Instead of making it rounder, make it square.
Hence, here is my final outcome for the task.

Typeface used: 
ITC Garamond Std & Gill Sans MT

Colour Palette Used

Final Outcome for Project 1 - JPEG Format

Final Outcome for Project 1 - PDF Format

Comments

Post a Comment

Popular posts from this blog

MAJOR PROJECT / PROJECTS

Image
26/04/2024 - 26/07/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Minor Project / Bachelor of Design (Honours) in Creative Media / Taylor's University Projects INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1BouMV6wry6NHld6fGib6QdoJmBBcPVMP/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Week 1: Introduction to the Module In the first week of the Major Project module, we were briefed on the overall objectives and guidelines. We were given the option to complete the project individually or as part of a group, with the understanding that there would be some limitations regarding the combination of different specializations and the number of people allowed if we chose the group route. After the briefing, Ms. Anis shared examples of past works from seniors, providing us with inspiration and insight into what had been accomplished in previous years. Following this, we began brainstorming ideas for our pr...
Read more

SONIC DESIGN / FINAL PROJECT - GAME AUDIO

Image
23/09/2024 - 20/12/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Sonic Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Final Project / Game Audio INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1Hm1JQBXG_x3g0XBg7wMGOQajuKAe56gW/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Lectures:  Refer to   Exercises PROJECT FINAL PROJECT: GAME AUDIO In this final project, we will bring a gameplay video to life by designing and implementing its complete audio experience. The task involves creating sound effects, foley, and voice recordings to enhance the game's immersive quality. We will plan and organize studio recording sessions for capturing foley and voiceovers, with access to portable recorders if needed. The project emphasizes creativity, technical skill, and the seamless integration of sound elements to elevate the overall gaming experience. Choosing a gameplay video to...
Read more

SONIC DESIGN / PROJECT 3 - AUDIO STORYTELLING

Image
23/09/2024 - 20/12/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Sonic Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Project 3 / Audio Storytelling INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1Hm1JQBXG_x3g0XBg7wMGOQajuKAe56gW/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Lectures:  Refer to   Exercises PROJECT PROJECT 3: AUDIO STORYTELLING For this project, we will select a fairy-tale story and create an engaging audiobook. This task builds on the skills developed in auditory imaging, requiring us to not only design a compelling soundscape but also incorporate recorded voice acting to bring the story to life. The objective is to integrate sound effects, voice recordings, and creative sound design to enhance the storytelling experience. The final audiobook should mimic a radio show, captivating listeners through immersive audio and carefully crafted sound element...
Read more