INTERACTIVE DESIGN: PROJECT 1
Week 05 - Week 06
Adrianna Sofea Mohd Fauzi (0350661)
Bachelor of Design (Hons) in Creative Media
Interactive Design: Project 1
CONTENT:
3. Final Outcome
Week 4:
HTML (Hyper Text Markup Language) serves as the standard markup language for crafting web pages.
HTML codes consist of both an opening and closing side. CSS (Cascading Style Sheets) is responsible for styling web pages generated from HTML.
Attributes, which consist of properties and values, play a crucial role (also known as style). Remember to include a space after one attribute to introduce another. The format is as follows: property="value".
In the context of web design, there are several key elements:
- The <head> section contains the <title>, which serves as the icon displayed on browser tabs.
- The <body> section encompasses all the elements meant for display in the web browser.
- Headings are categorized into <h1> as the main heading, <h2> for subheadings, and <h3> to <h6> for further subheadings. Avoid using the <b> tag for headings, as <h1>, <h2>, and so on are inherently bold.
- The <p> tag denotes a new paragraph, and to insert a line break within a paragraph, utilize <br> for a line break.
To embed images:
- Use the <img> tag, which is a one-sided tag.
- Specify the image source with the "src" attribute: <img src="link.jpg">.
- Include the file name followed by the image name.
- Additional attributes such as "width," "height," "alt," and "title" can be employed. The "alt" attribute displays when the image is unavailable, while the "title" attribute appears as a tooltip when hovering the cursor over the image.
Example of a complete code for image:
<img src="Images/Beach.jpg" width="200" alt="The Beach" title="Logo"/>
Height adjusts proportionally to the width.
When creating lists:
- An ordered list is indicated by <ol> and displays numbers.
- An unordered list is denoted by <ul> and utilizes bullet points.
- List items are enclosed within <li> tags after opening with <ol> or <ul>.
- Employ the <a> tag for creating links.
- Structure links as follows: <a href="URL or path">text</a>.
- The "href" attribute serves as a hyperlink reference and can be supplemented with "alt" and "title" attributes for additional information.
Introduction to cascading style sheet (CSS).
Interactive Design: Project 1
Our primary goal in the first phase of the work is to create a prototype of the user interface (UI) design for our digital resume or curriculum vitae (CV) utilising prototyping tools such as Adobe XD or Figma. This prototype will show the layout, aesthetic components, and how users interact with the user interface of your digital resume.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.
1. Visual Research
Browsing through to find inspiration for my resume that fits my characteristics and understand its layout and visual elements used:
2. Content and Structure
Before anything else, I had to learn how to use the features of Figma because I had never used them before. Then I started jotting down all of the information and material that I wanted to include in my CV. I began with my biodata, which included information ranging from my birth date to my nationality. I also looked up the crucial information that should be included in a resume. Below are the structure and hierarchy of my content:
3. Layout and Design
For layout, I had multiple ideas for the prototype. I had set the grid into a column of 12 to have a balanced layout for a desktop frame web.
Column of 12
Wireframe Design Ideations:
Wireframe: Frame 01, Frame 02, Frame 03
Wireframe: Frame 04, Frame 054. Sections and Organization + Visual Elements At this point, I already had a clear vision of the desired overall aesthetic and visual style. I selected the colour using the colour picker tool and simultaneously explored Pinterest to discover a colour scheme I found appealing, using a particular colour as a reference:
Color Scheme Reference
Design Details 01
After going through the colour scheme, I went ahead and looked into the appropriate typeface for my Heading, Subheading, Minor Heading, Paragraph, List etc. Then, reorganised the sections from least important to crucial information. I decided to include my initial which is "AS" on the top right as if it looked like a home button on a webpage and below it is a list of key sections of content in my CV.
Design Details 02 of Gradient
I decided to have a gradient background around the section that is filled with most information due to the fact it will give more highlights through the reader's eye.
Chosen Layout Side by Side
I chose Frame 04 for my layout because I think it fits my preference the most and I turn the "Experience" and "Projects" placed it into a rectangle box to attract that area since it requires a lot of reading and information.
Close-up of the Sections
Feedback
Week 4: We were asked to familiarize ourselves with HTML and the terminology that was taught in class.
Week 5: Absent due to Covid-19
Week 6: No class but the lecture was given through Google Classroom
Comments
Post a Comment