Interactive Design - Project 2: Working Web Page

December 01, 2023

Interactive Design - Project 2: Working Web Page

2.10.2023 - 16.10.2023/Week 6-Week 8

Low Li Vern/ 0362678

Interactive Design / Bachelor of Design (Honours) in Creative Media

Project 1 : Prototype Design

LECTURES

WEEK 4 : Project 1: Prototype Design

Lectures can be referred to TASK 1

INSTRUCTIONS

Project 2/Working Web Page

Part 2: Final Design - Creating a Digital Resume/CV Duration

Objective:

In this second part of the assignment, you will build upon the UI design prototype created in Part 1 to develop the final visual design of your digital resume or curriculum vitae (CV). You'll focus on refining the visual aesthetics, enhancing user interface interactions, and ensuring a polished user experience.

Instructions:

Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.

Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.

Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.

Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog

Prototype Design (Project 1):

Fig 1.1 Prototype Design (2.10.2023-Week 6)

1. First Column

Fig 1.2 First Column (12.10.2023-Week 7)

HTML :

<body>

</blockquote>

<p class="about"> As an aspiring aniamtion student, I am dedicated to honing my skills and knowledg in the dynamic realm of animation. My goal is to contribute to the creation of captivating and immersive animated experiences that resonate with diverse audiences.</p>

CSS :

body {

padding: 0;

margin: 0;

}

.container {

background: rgba(245,245,245,1.00);

width: 70%;

margin: auto;

padding-top: 0px;

}

2. Contacts

Fig 2.1 Contacts (16.10.2023-Week 8)

HTML :

<h2>Contact</h2>

</div>

<p>lowlivern@gmail.com</p>

</div>

<p>Kedah, Malaysia</p>

</div>

3. Information

Fig 3.1 Information (16.10.2023-Week 8)

Fig 3.2 Information (16.10.2023-Week 8)

Fig 3.3 Information (16.10.2023-Week 8)

I added icons to enhance the visual appeal of my resume design, employing two distinct shades of grey to delineate the information columns. This approach aids users in easily discerning different types of information, contributing to a clean and organized website layout.

HTML :

<h2 class="heading-sub">EDUCATION</h2>

<p>-Chung Ling Private High School January 2017- December 2022</p>

<p>-Taylor’s University Bachelor Of Design (Hons) In Creative Media August 2023 – Present</p>

</div>

<h2 class="heading-sub">WORK EXPERIENCE</h2>

<p>Freelance Graphic Designer</p>

<p>-Established and managed a freelance design business, offering design solutions to various clients in need of branding, print materials, and digital design.</p>

<p>-Demonstrated effective communication and project management skills, ensuring timely delivery of design projects and meeting client expectations.</p>

</div>

<h2 class="heading-sub">SKILLS</h2>

<li>-Hand Drawing </li>

<li>-Adobe Illustrator</li>

<li>-Adobe Photoshop</li>

<li>-MS Office</li>

<li>-Video Editing</li>

<li>-Adobe InDesign</li>

</ul>

</div>

<h2 class="heading-sub">PROJECT</h2>

<p>APRIL 2023 – MAY 2023</p>

<p>Project Name | Music bloodline webpage design | Life skill project</p>

<p>Led a team in designing the website for Life Skill project, enhancing user experience improved visuals, and streamlined content presentation.</p>

<p>Typography:</p>

<p>Task 1: Exercise</p>

<p>Task 2: Typographic Exploration and Communication</p>

<p>Task 3: Type Design and Communication</p>

<p>Task 4: Final Compilation and Reflection</p>

<p>Digital Photography: </p>

<p>Project 1: Collage and Digital Imaging</p>

<p>Project 2: Poster Design and Digital Imaging</p>

<p>Project 3: Final Project Self Titled</p>

<p>Project 4: Final Compilation and Reflection</p>

</div>

CSS :

.project {

background-color: gainsboro;

padding: 5%;

box-sizing: border-box;

}

.work {

background-color: gainsboro;

padding: 5%;

box-sizing: border-box;

}

.edu {

padding: 5%;

box-sizing: border-box;

}

.web {

background-color: darkgrey;

}

.skills {

padding: 5%;

box-sizing: border-box;

}

h2 {

font-family: 'Josefin Sans', sans-serif;

font-family: 'Playpen Sans', cursive;

}

p {

font-family: 'Dosis', sans-serif;

font-family: 'Josefin Sans', sans-serif;

font-family: 'Playpen Sans', cursive;

}

li {

font-family: 'Dosis', sans-serif;

font-family: 'Josefin Sans', sans-serif;

font-family: 'Playpen Sans', cursive;

padding: 2%;

}

4. Row

Fig 4.1 Row (16.10.2023-Week 8)

I found the current website design to be too simplistic, prompting me to enrich it with additional information to captivate users. To achieve this, I introduced a new row featuring three elements which is goals, personality, and interests, expanding upon the prototype design established in Project 1.

HTML :

<h2>Goals</h2>

<ol>

<li>Study Habit Building</li>

<li>Time management</li>

<li>Professional Growth</li>

</ol>

</div>

<h2>Personality</h2>

<li>Friendly</li>

<li>Responsible</li>

<li>Confident</li>

</div>

<h2>Interest</h2>

<ol>

<li>Sports</li>

<li>Photography</li>

<li>Drawing</li>

</ol>

</div>

PROJECT 2 FINAL OUTCOME :

Netlify Link: https://lowlivern-project2.netlify.app/

REFLECTIONS

Experience

Participating in the interactive class was a dynamic and engaging experience that brought a new dimension to my learning. The interactive format fostered active discussions, encouraging the exchange of ideas among classmates. This collaborative approach not only deepened my understanding of the subject matter but also provided diverse perspectives that enriched the overall learning environment. The interactive elements, such as group activities and real-time feedback, made the class sessions more vibrant and memorable. I found that this interactive format not only enhanced my comprehension of the material but also contributed to a sense of community within the virtual learning space.

Observations

Creating my resume website was a rewarding venture that allowed me to showcase my skills and professional background in a visually appealing way. The process of selecting the layout, choosing the content, and refining the design proved to be a valuable exercise in self-reflection. Through this project, I gained a clearer understanding of my strengths, accomplishments, and career goals. Constructing the website not only enhanced my digital literacy skills but also provided me with a valuable tool for presenting my qualifications to potential employers.

Findings

The interactive class proved to be fascinating, especially when experimenting with HTML and CSS code. Despite lacking a coding background, the process wasn't easy for me. However, I discovered enjoyment in successfully arranging the desired positions and colors in the CSS code. To enhance my coding skills, I plan to watch more instructional videos and continue practicing. The challenges are part of the learning journey, and the satisfaction of achieving the desired outcomes makes it a rewarding experience.

THE END

Search This Blog

Low Li Vern (0362678)

Interactive Design - Project 2: Working Web Page

Comments

Post a Comment

Popular Posts

Minor Project

Sonic Design - Final Project