Interactive Design - Final Project: Creating a Single-Page Website for An Artist

 23.10.2023 - 10.12.2023 / Week 9 - Week 16

NieWeiqiu / 0360239 / BA of Design (HONS) in Creative Media

Interactive Design

Final Project

Final Project - Creating a Single-Page Website for An Artist

In this web design project, we will create a one-page website for our favorite artist.

Project requirements:

Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.

Project Requirements:
Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.

Content:
Your single-page website should include the following sections:
Header with the artist's name and a brief tagline.
Introduction: Provide an overview of the artist's background and why you admire them.
Gallery: Showcase images, videos, or other multimedia related to the artist's work.
Biography: Include a brief biography or description of the artist's life and career.
Contact Information: If applicable, include contact details or links to the artist's social media profiles.


Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your personal taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).

Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

1. References

First I did some research and for my one page website, I searched for artist layouts and wanted to observe their layouts to create my draft.Let me get some inspiration.

 

2. Sketches
I started making a wireframe sketch of the website. Through different sketches, I drew different layouts for the website. A total of 5 different website sketches were drawn.


I choose one of the 5 sketches to create.Coupled with some codes taught to me by the teacher, I decided to choose Sketch 1 to create.


I created a prototype in Adobe XD.



Later I will use dw to start writing my code HTML.

HTML codes


Later I will use dw to start writing my code CSS.

CSS codes


feedback

no feedback

Reflection

This is a very big project and a very big challenge, but I am more confident than in past jobs because I have learned a lot during this semester. I knew creating a website would be difficult, but I also believed I could do it. Getting started was the hardest part as I had almost no experience with HTML or CSS. Although I didn't do it perfectly, I'm very happy with my results, I feel like I should be proud of myself for creating something like this, and I'm happy that I was able to create something meaningful to me through this page. I believe I can apply my newfound skills and experience to future projects as well.

Comments

Post a Comment

Popular posts from this blog

Immersive Visual Effects

Image
23.9.2024 - 14.10.2024 (Week 1 - Week 4) NIE WEIQIU/ 0360239 / Bachelor of Design (Hons) in Creative Media / Taylor's University Immersive Visual Effects Task 1 / Pre-production INSTRUCTIONS Fig. 1. Module Information Booklet Pre-production According to the teacher's further explanation, I roughly understood it, so I wrote three ideas PPT introduction After receiving feedback, I finally thought the idea of ​​forest was good, so I continued to use the idea of ​​forest. Final Thoughts Week 2 Exercise: 3D Camera For this exercise, we just had to learn how to use and experiment with using the 3D camera feature. We were given an After Effects file and we had to use it as a template and animate it.  https://youtu.be/eKh4FhTSVNk Project 2 Introduction: Produce 3D block-out pre-visualization. • Produce 3D elements and effects block-out • Composition nesting and layer breakdowns • Timing and transition confirmation • Style frame for final look and feel • Composition ready renderin...
Read more

Design Research Dissertation

Week 1 - Week  NIE WEIQIU / 0373215 Design Research Dissertation  Bachelor of Design (Honours) in Creative Media / Taylor's University INSTRUCTIONS Final Submission Task 1: Dissertation draft Task 2: Visual Design Publication Task 3: Final Dissertation and Turnitin Submission Turnitin Submission Final Dissertation KREATE google drive FEEDBACK Weekly Progress Reflection Sheet.docx REFLECTION Throughout this module, I went through three key stages: drafting the research paper, designing the visual publication, and submitting the final paper. In the initial phase, I reviewed a wide range of literature, gradually clarifying my research topic and objectives, while also learning the fundamental methods and structure of academic writing. During the visual publication stage, I worked on transforming academic content into a visually engaging publication. This not only deepened my understanding of layout design but also enhanced my ability to organize and present information effectively...
Read more

Information Design - Exercise

Image
  6.2.2024 -  / Week 1 - Week  Nie Wei Qiu / 0360239 / BA of Design (HONS) in Creative Media Information Design Exercises 1 - 2 LECTURES Week 1 / 6.2.2024 In the first week, the teacher introduced us to the entire module, and also introduced us to exercises, electronic portfolios and projects.  We have to prepare a presentation on our first week with our group too, one of the first topics we have to prepare is to find out the different types of infographics and we are going to use a free online infographic tool to reframe a poorly structured piece of information  infographic poster. Group Task (FLIP Presentation) FLIP 1: Types Of Infographics Individual Task (Re-design Infographic Poster) I started by doing some research on infographic posters on Pinterest. I found a few posters and analyzed them.I found a poster that I thought was problematic and reworked it Infographic Poster from Pinterest I think its structure is a little too crowded and I want to chang...
Read more