Interactive Design - Project 1: Prototype Design
18.09.2023 - 2.10.2023/Week 4-Week 6
Low Li Vern/ 0362678
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 1 : Prototype Design
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 1 : Prototype Design
LECTURES
WEEK 4 : Project 1: Prototype Design
WEEK 4 : Project 1: Prototype Design
Requirements :
1. Content and Structure:
-Prepare the content for your resume,
including personal details, education, work experience, skills,
projects, and other relevant sections.
-Decide on the order and hierarchy of sections based on their importance
and relevance.
2. Layout and Visual Design:
-Design the layout of your digital resume using the chosen prototyping
software. Define the placement of different sections and how they will
flow together.
-Apply a consistent visual design using typography, color palette, and
appropriate spacing.
3. Sections and Organization:
-Organize your resume into logical sections, such as
"Profile," "Education," "Experience," "Skills," "Projects," and
"Contact."
-Prioritize sections based on their relevance and significance to the
position you're targeting
4. Visual Elements:
-Incorporate relevant images, icons, or placeholders that align with the
content and enhance the visual appeal of your digital resume.
5. Prototype Presentation:
-Update your e-portfolio explaining and showcasing the processes of the
task
Evaluation Criteria:
Your UI design prototype assignment will be evaluated based on the
following criteria:
-Clarity and effectiveness of the UI design, layout, and visual elements.
-Appropriateness of the chosen typography, color palette, and imagery.
PROGRESS
1. Content and Structure:
Initially, I compile a comprehensive list of my personal information,
skills, and relevant experiences. This aids me in crafting descriptions
and content more efficiently, with a primary focus on my
Personal Details, which
are of utmost important.
Fig 1.1 Digital Resume Content
Following that, I conduct research on the necessity of a digital resume and
explore strategies for designing its layout. After conducting my research, I
discovered a helpful website that elucidates the significance of a digital
resume and provides insights on enhancing its layout.
Website Link: https://in.indeed.com/career-advice/resumes-cover-letters/how-to-create-digital-resume
Tips For Creating A Digital Resume
Review these tips for making an effective digital resume:
1. Make it readable. It is possible to include too many formatting
options, making your resume difficult to read. This can distract the
hiring manager, so it is important to reevaluate your digital resume to
make sure it is clear and easy to understand.
2. Include a printable version. Depending on the individuals
reviewing your resume, there may be someone who would prefer to see a
printed resume in front of them on which they can make notes. By including
a printable version, you can appeal to the preferences of the company's
representatives.
3. Add vital keywords. When creating a resume that you plan to
upload on a public forum, it can be wise to make it easy to discover.
Include keywords that hiring managers in your industry might search for,
like vital license's, software programs or techniques.
4. Consider making a mobile-friendly version. Many professionals
may use devises like mobile phones or tablets to view files and contact
potential candidates. It could be beneficial to ensure your resume is
accessible and legible on smaller screens.
Sketches :
Fig 1.2 Sketches (20.09.2023-Week 4)
Digitalize :
For the first step I choose a colour theme for the digital resume according
to my picture chosen. I have two pictures that is suitable for the digital
resume, the first one has black background and the other one is with white
background.
Fig 1.3 First version(1.10.2023-Week 5)
In the first place I had intended to utilize a black background color.
However, considering its potential impact on information readability, I
opted for a white background. The paramount objective is readability,
surpassing the importance of color design.
I have decided to implement black, grey, and white as the primary color
scheme. The choice is based on the simplicity and enhanced aesthetics these
colors offer compared to others.
Fig 1.4 Color Palette (2.10.2023-Week 6)
Fig 1.5 Adjustment on color (2.10.2023-Week 6)
I believe sketch #6 is my top choice, so I've opted to digitize it for my
initial attempt.
3. Sections and Organization:
Fig 2.1 Sections and Organization (2.10.2023-Week 6)
After deciding the layout of the digital resume, I listed out the sections and organization of the digital resume.
The content for my resume :
EDUCATION
-Chung Ling Private High School January 2017- December 2022
-Taylor’s University Bachelor Of Design (Hons) In Creative Media August
2023 – Present
SKILLS
-Hand Drawing
-Adobe Illustrator
-Adobe Photoshop
-MS Office
-Video Editing
-Adobe InDesign
WORK EXPERIENCE
2022-2023
Freelance Graphic Designer
-Established and managed a freelance design business, offering design
solutions to various clients in need of branding, print materials, and
digital design.
-Demonstrated effective communication and project management skills,
ensuring timely delivery of design projects and meeting client
expectations.
PROJECT
APRIL 2023 – MAY 2023
Project Name | Music bloodline webpage design | Life skill project
Led a team in designing the website for Life Skill project, enhancing user
experience improved visuals, and streamlined content presentation.
Fig 2.2 Progress (2.10.2023-Week 6)
4. Visual Elements:
Fig 2.3 Visual Elements (2.10.2023-Week 6)
First Attempt of Prototype Design :
Fig 2.4 Final Compilation (2.10.2023-Week 6)
The main idea of my layout of this digital resume is that I want it to be simple, it is important to let users know information directly for a digital resume.
PROGRESS ADD ON :
Fig 3.1 Progress add on (2.10.2023-Week 6)
To maintain a clean and balanced layout, I've utilized lines as a supportive element to adjust the details and ensure a sense of equilibrium in the content.
Fig 3.2 Progress add on (2.10.2023-Week 6)
Fig 3.3 Progress add on (2.10.2023-Week 6)
I intentionally included spacing on both the left and right sides to ensure that the digital resume layout doesn't appear overly crowded. Proper spacing in layout design is fundamental to creating an aesthetically pleasing, easy-to-read, and effective design that engages the audience and conveys the intended message clearly.
I have some research on
leaving spacing on the left and right while designing a layout is
important for several reasons:
2.Visual Hierarchy: Spacing helps establish a visual hierarchy by separating different sections or elements. It guides the reader's eye and helps them understand the relationships and importance of each element on the page.
3.Ease of Scanning: Ample spacing allows for easier scanning of the content. When elements are not crammed together, users can quickly identify and process the information they are looking for.
4.Enhanced Focus: White space (or negative space) allows the viewer to focus on the main content or key elements without distractions. It highlights the importance of what's within its boundaries.
5.Reduced Cognitive Load: Giving enough breathing room between elements reduces cognitive load. It provides mental rest and clarity, making it easier for the viewer to absorb and retain information.
6.Mobile Responsiveness: Spacing is crucial for responsive design, ensuring that the layout adapts well to various screen sizes and devices. It prevents elements from becoming too small or too cramped on smaller screens.
7.Conformance to Design Principles: Following design principles like balance, proximity, and alignment often require appropriate spacing. These principles contribute to a cohesive and visually appealing design.
Final Attempt of Prototype Design :
Fig 4.1 Final Attempt of Prototype Design (2.10.2023-Week 6)
REFLECTIONS
Experience
After class, I discovered that the interactive session underscored the importance of effective communication and teamwork. Participation in group activities facilitated the exchange of diverse perspectives and the pooling of collective expertise, enhancing the overall depth of our learning. Working collaboratively with classmates highlighted the potency of collective intelligence and the advantages of collaboration in attaining shared objectives.
Observations
By immersing myself in practical exercises and analyzing real-life instances, I gained a comprehensive understanding of HTML elements, tags, and their associated attributes. I acquired knowledge on crafting a well-organized HTML document and utilizing diverse elements to serve different objectives, which proved to be highly valuable. Moreover, the class shed light on semantic HTML, underlining the crucial aspect of utilizing HTML in an effective manner.
Findings
Through active participation in hands-on exercises and in-depth analysis of case studies, I significantly deepened my comprehension of how design decisions can significantly influence how users interact with and perceive a digital interface. The class emphasized the criticality of developing intuitive and visually appealing interfaces that amplify user satisfaction and usability. At its core, the key takeaway is that prioritizing users' feelings and experiences is paramount in web design.
THE END
Comments
Post a Comment