Interactive Design

INTERACTIVE DESIGN - PROJECT 1

13/9/2023 - 4/10/2023 Week 3- Week 6
Yang Xu Guo 0362534
Bachelor of Design (Honours) in Creative Media
Interactive Design
Project 1: Prototype Design

INSTRUCTION


Description: In this task, you will create a personal profile webpage that includes basic information about yourselves. This exercise will require them to apply the HTML skills they've learned.

Instructions:
HTML Structure:
  • Begin by creating a new HTML file and setting up the basic structure with <!DOCTYPE html>, <html>, <head>, and <body> elements.
Page Title:
  • Inside the <head> element, add a <title> element with a title for your webpage, like "My Profile."
Header Section:
  • In the <body> section, create a header section using the <header> element.
  • Add a main heading (<h1>) with your name.
  • Optionally, include a subheading (<h2>) with a brief tagline or description.
About Me:
  • Create a section for information about yourself.
  • Include a <h3> heading saying "About Me."
  • Add a couple of paragraphs (<p>) with a brief introduction of yourself.
My Interests:
  • Create another section to list your interests or hobbies.
  • Use an appropriate heading, such as <h3>: "My Interests."
  • Add an introduction for this section using <p>.
  • Create an unordered list (<ul>) and list some (more than 3) of your interests using <li> elements.
My Photo:
  • Insert an image of yourself using the <img> tag.
  • Specify the image source (src attribute) and provide a brief description using the alt attribute.
Contact Information:
  • Create a contact section with an appropriate heading.
  • Include your email address and optionally other contact details like your social media profiles or phone number using the list item.
Testing and Validation:
  • Test your webpage by opening it in a web browser to ensure everything displays correctly.
  • Use online HTML validators to check for any syntax errors and fix them if needed.
Publish Your Webpage:
  • If possible, publish your webpage online using a free web hosting service or GitHub Pages
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, colour palette, and imagery.


Comments

Post a Comment

Popular posts from this blog