INTERACTIVE DESIGN

Edita Chew En Thung / 0357357
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
PROJECT 2 : Working Webpage
Part 2: Final Design - Creating a Digital Resume/CV

Table of Content

1. LECTURES

2. INSTRUCTIONS

3. PROCESS

i. FINAL

4. FEEDBACK

5. REFLECTION

LECTURES

Display Property

Importance: Controls the layout of elements.

Default Values:

- Block: Elements start on a new line and stretch out (e.g., `<div>`).
- Inline: Elements stay within the line (e.g., `<span>`).

Customising Display:

Override default values to fit specific design needs.
Example: Making `<li>` elements inline for horizontal menus.

Other Display Types:
- Inline-block
- Flex
- Grid

Box Model in CSS

- HTML Elements as Containers: Elements like `<body>`, `<p>`, `<div>`, etc., act as containers or boxes.Layers in Box Model:

Padding: Space inside the element, around the content.
Border: Line surrounding the padding and content.
Margin: Space outside the border, separating elements.

Flexbox

Purpose: Create responsive and efficient web layouts.
Dependence: Relies on understanding the Box Model for manipulating element positioning and spacing.
Key Concepts:
- Flex Container: Parent element with display: flex.
- Flex Items: Children of the flex container.
Important Properties:
- display: flex: Establishes a flex container.
- flex-direction: Defines direction (row, column).
- justify-content: Aligns items along the main axis (start, end, center, space-between, space-around).
- align-items: Aligns items along the cross axis (stretch, center, start, end).

INSTRUCTIONS

fig 1.0 | Module Information Booklet (MIB)

Week 6

In the second part of the assignment, we will develop the final visual design of your digital resume or curriculum vitae (CV) from the UI design prototype created in Part 1. We will focus on refining the visual aesthetics, enhancing user interface interactions, and ensuring a polished user experience.

1. UI Design Prototype Review:

Review feedback on your initial UI design prototype and make necessary improvements.

2. Visual Design Refinement:

Finalise the visual elements, including fonts, colors, and images, to match your personal brand and resume tone.
Polish the design for a cohesive and professional look.

3. User Interface Interactions Enhancement:

Add advanced interactions like animations and smooth transitions to your UI design.
Ensure these interactions improve user engagement and provide a great user experience.

4. Technical Implementation:

Develop the final design using HTML and CSS, reflecting the refined UI design.

5. Presentation and Documentation:

Update your e-portfolio to explain and showcase the steps and processes of this task.

PROCESS

1. Initial Setup and Figma Mockup Translation

Tools Used: Figma (for mockup), VS Code (for coding), Google Fonts, Dreamweaver.
Assets: Profile image, application icons, flow image, business card image.
Objective: Convert a Figma mockup into a fully functional, responsive HTML and CSS webpage using Dreamweaver.

Translating Figma Mockup to HTML:

Extracted visual elements from the Figma mockup including layout structure, images, text content, and colour schemes.
Created an index.html file and a style.css file.

fig 1.1 | PROCESS

fig 1.2 | PROCESS

Header Section:

Constructed a header with a div for the profile image and another for textual information.
Included heading elements (<h1>, <h2>), a profile image, and descriptive text.

Main Content Section:

Divided into two columns using <div> elements to separate experience, education, and personal skills on one side and awards, certifications on the other.
Used sections to organise content logically with appropriate headings and paragraphs.

Footer Section:

Added a footer to include contact information with email and phone number links for direct actions.
Initially centered the footer, later adjusted based on requirements.

Styling with CSS

Applied a basic reset to ensure cross-browser consistency.

Defined styles for body, headers, paragraphs, and images.

Imported Google Fonts (Libre Caslon Text for body text and Italiana for titles).

Layout and Positioning:

Used Flexbox for the header and main content to achieve a responsive layout.
Styled the profile image and application icons to have hover effects.
Set widths for columns to ensure 50% width distribution for header content.

Interactive Elements:

Added CSS transitions for hover effects on the profile image and application icons to provide visual feedback.
Ensured the footer links change appearance on hover to indicate interactivity.

Responsiveness:

Implemented media queries to adjust layout for smaller screens, ensuring columns stack vertically and text remains legible.
Adjusted padding and margins to maintain visual balance on different devices.

Interactive Features Implementation

Hover Effects:

Enhanced interactivity by making the profile image and application icons enlarge slightly when hovered over.

Contact Form Functionality:

Added a script to the HTML to handle form submissions and redirect to an email client with pre-filled contact information.

Direct Actions:

Configured the phone number link to open WhatsApp with the correct number.
Set the email link to open the default email client with the recipient address pre-filled.

Debugging and Refinements

Initial Testing:

Tested the webpage across different browsers and devices using Chrome DevTools and real devices.
Identified issues with element alignment and responsiveness.

Problem Solving:

Adjusted Flexbox properties to ensure elements align correctly.
Fixed issues where the profile image and application icons were not responding to hover effects as intended.
Resolved spacing issues between flow and card images by adjusting margins and padding.

Final Adjustments:

Ensured all interactive elements worked seamlessly.
Fine-tuned responsive design to maintain layout integrity on various screen sizes.

fig 1.3 & 1.4 & 1.5 | PROCESS

Once I had my codes and content in place, I placed my picture/image into the profile section.

Everything was fine until the 2 columns I had coded became 1 and was not going back to the 2 columns.

Another problem was that the footer could not split the 2 texts into left and right, and the icons had gone massive in size and it was hard to revert it back because the code was clearly correct at first.

fig 1.6, 1.7 & 1.8 | PROCESS

Then I resized the icons to a much smaller size to fit the web and I also added hover effects when a mouse pointer is hovering on it. After adding the hover effects in CSS, I had to solve the 1 column mystery after I added the "flow" and "card" images.

fig 1.9 & 2.0 | PROCESS

After adding the images, I finally could see progress in the column mystery, I continued to refine everything in the content and remove the space between the images flow and card.

fig 2.1 | PROCESS

I ended up having to recode some parts for 3 whole days because everything was haywire. In the end, there were in total of 3 files and the 3rd being the successful one.

FINAL

fig 2.2 | FINAL

NETLIFY LINK : HERE.

FEEDBACK

N/A

REFLECTION

Experience

Throughout the development of the CV webpage project 2, I had opportunities to enhance my strategic communication skills. Initially, the process made me understand more about translating the Figma mockup into a functional HTML and CSS design. This task required me to clearly envision my ideas, especially when I encountered challenges.

Presenting my design choices and justifications was a crucial part of documenting the process. For example, explaining why I used Flexbox for layout and how it ensures responsiveness across devices required me to simplify technical things and communicate effectively to a non-technical audience. This skill will soon be tested when addressing the client’s feedback in the future, talking about layout issues and making sure that the profile image and text did not overlap.

Moreover, communicating the functionality of interactive elements like hover effects and contact form capabilities involved not only describing the visual outcomes but also illustrating the user experience enhancements these features brought. I had to persuade the client that these interactions would make the webpage more engaging and user-friendly.

In a multidisciplinary setting, involving discussions with both technical peers and the client, my ability to present and defend my ideas was essential. This experience shows the importance of clear, strategic communication in achieving project goals and ensuring that we understand the project’s direction and progress.

Critical Thinking

This also significantly honed my critical thinking competencies. From the initial stages of translating the mockup to code, I engaged in continuous ideation and problem-solving. Each phase of the project presented unique challenges that required thoughtful analysis and strategic thinking.

For instance, the issue of maintaining layout integrity across various devices demanded a critical evaluation of different CSS strategies. I experimented with Flexbox and media queries, assessing their effectiveness in preserving the design’s structure and responsiveness. This iterative process of testing and refining was crucial in arriving at the most suitable solution.

When implementing some interactive features like hover effects, I had planned to harmonise multiple concepts to enhance user experience. Evaluating the prototype involved assessing the visual and functionality and considering the user’s interaction with these elements. The evaluation led to further development and refinement, ensuring that the feature was intuitive and added value to the overall design.

Critical thinking was also essential when addressing feedbacks from others and making final adjustments. The process involved weighing different approaches, predicting potential issues, and making informed decisions to optimise the final product. This emphasises the importance of using ideation to evaluate and improve design outcomes continuously.

Conclusion

This project was a valuable learning experience that allowed me to develop and demonstrate both strategic communication and critical thinking competencies. Effectively presenting and persuading others about design choices, along with continuously evaluating and refining the product, were key aspects that contributed to the successful completion of the CV webpage. These skills are essential in maintaining discipline and will be beneficial in future projects and professional development.

Search This Blog

Edita Chew En Thung (0357357)