INTERACTIVE DESIGN - PROJECT 1 Prototype Design
Edita Chew En Thung / 0357357
Interactive
Design / Bachelor of Design (Honours) in Creative
Media / Taylor's University
PROJECT 1 : prototype Design
Table of Content
1. LECTURES
2. INSTRUCTIONS
3. PROCESS
i. FINAL
4. FEEDBACK
5. REFLECTION
LECTURES
Week 5
Lecture Summary: HTML & CSS Basics
Interactive Design: ID and Class Attributes
ID Attribute:
- Uniquely identifies HTML elements.
- Useful for styling specific elements differently.
- Must be unique within a page.
Class Attribute:
- Identifies multiple elements as distinct from others.
- Allows for common styling of similar elements.
- Can be shared across multiple elements.
Element Types
Block Elements:
- Always start on a new line.
Examples: `<h1>`, `<p>`, `<ul>`, `<li>`.
Inline Elements:
- Continue on the same line as neighboring elements.
- Examples: `<b>`, `<i>`, `<em>`, `<a>`, `<img>`.
Introduction to CSS
CSS Basics:
- Defines how content should appear.
- Comprises selectors and declarations.
- Declarations include properties (e.g., colour, font) and values.
CSS Implementation
External CSS:
- Linked via `<link>` in the `<head>` element.
- Advantages: consistent styling across multiple pages, easier maintenance.
Internal CSS:
- Embedded within a `<style>` tag in the `<head>`.
CSS Properties
Text Styling:
- Colour, alignment, decoration, transformation, and spacing.
- Examples: `colour`, `text-align`, `text-decoration`, `text-transform`.
Font Styling:
- Uses web-safe fonts for consistency.
- Examples: Arial, Verdana, Times New Roman.
Backgrounds:
- Background colour, images, and other properties.
fig 1.0 | Week 5 LECTURE SLIDES
By understanding and applying these HTML and CSS fundamentals, we can
effectively structure and style web content, enhancing both functionality
and visual appeal.
INSTRUCTIONS
fig 1.1 | Module Information Booklet (MIB)
Week 5
We are to create a UI design prototype for our digital resume/CV using Adobe XD or Figma.
Content Preparation:
- Gather personal details, education, work experience, skills, projects, etc.
- Arrange sections by importance.
Layout and Design:
- Design the resume layout, determining section placement.
- Use consistent typography, colours, and spacing.
Section Organization:
- Organise sections logically: Profile, Education, Experience, Skills, Projects, Contact.
- Prioritise relevant sections.
Visual Elements:
- Add images, icons, or placeholders to enhance visual appeal.
Prototype Presentation:
- Update your e-portfolio with the task process and showcase your work.
Evaluation Criteria:
- Clarity and effectiveness of UI design.
- Appropriateness of typography, colour palette, and imagery.
PROCESS
Resume/CV
I had my own CV/resume that I used when applying for freelance/contract/part-time work so I used my existing resume as reference to start my Digital CV Project 1.
I extracted the information from this page of my CV/resume and adjusted it according to the requirements of
fig 1.2 | Resume (CV) personal
fig 1.3 | PROCESS
I started with a frame (desktop width) then extended the rest to fit my skills, etc. Then I crafted a not totally #00000 black rectangle, but #272727 black to not strain the eyes of the viewer in long duration. Same goes to the choice of my font colour and background later on, it's a #F2F2F2, white smoke.
Note: it is advisable to not use a total black like #00000 because long screen times will affect the comfortability of the viewer as it strain the eyes at long screen times.
Then, I had placed the mockup of my personal name card for clients with a transparent background in front of the background. I continued to insert a simple description for the CV and proceeded to insert icons to show the availability of my skill set, I didn't want it to be too complicated by adding the proficiency of the said skills so I just added the icons.
fig 1.3 | PROCESS
I then used hex code #F2F2F2 white smoke for the content's background, then transferred the content from my previous CV to the digital one.
As mentioned earlier, in order to prevent eye straining, I used a slightly different colour than pure white.
The first mockup looked like this:
fig 1.4 | PROCESS
The first look was created to give off a clean and simplistic look for easy viewing for the user and audience.
fig 1.5 | PROCESS
I added a oval shape behind my figure as a style to have more dynamic.
fig 1.6 | PROCESS
Then, I created a drawing water-like brush stroke to go with the overall look of my CV/resume.
fig 1.7 | PROCESS
Then the overall design went something like this, and graphic designer was added at the end as it clearly states my specialisation.
FINAL Digital CV PROTOTYPE
fig 1.8 | PROCESS
Then the brush stroke was added to the bottom of the CV to give a flowy look to the overall outcome.
FEEDBACK
Week 5
General feedback:
- N/A
Specific feedback:
- Make the CV more appealing than a normal work resume.
Week 6
General feedback:
- N/A
Specific feedback:
- Make it pop, use an accent colour and rearrange the pictures.
REFLECTION
Reflecting on my journey so far, I've been able to creatively utilise various software and digital media skills to effectively communicate and promote my design concepts. This hands-on experience has not only enhanced my technical and digital media competencies but also allowed me to express my ideas more clearly and engagingly.
I've honed my strategic communication competencies, learning to deliver persuasive oral and verbal presentations both individually and as part of a team. This has been a crucial part of my development as a designer, blending creativity with effective communication.
.jpeg)
Comments
Post a Comment