Posts

Showing posts with the label Interactive Design

Interactive Design - Final Project: Single Page Lifestyle Microsite

Image
2/7/2024 - 3/8/2024 / Week 8 - Week 14 Cindy Clarissa Leslie / 0367677 Interactive Design / Bachelor of Design (Hons) in Creative Media Final Project: Single Page Lifestyle Microsite INSTRUCTIONS   Research Figure 1.1 Mood board for final website Before starting the prototype, I first created the mood board for the whole concept and colour scheme. For this project, I wanted to create a fansite of one of my favourite bands, Deftones. As the band is known for their songs that has dark and edgy themes/ambience, I wanted the design itself to be able to represent their genre. I went with a dark theme with splashes of purple for a rather 'gothic' feel. I also chose a gothic display font called 'Malevolent' that will act as the headers of the website. Planning/Prototype Figure 2.1 Wireframing using Adobe XD  This time, instead of using Figma I attempted to try and use Adobe XD instead. Using the shapes tool for graphical aspects, I created a proper wireframe for the layout bef...

Interactive Design - Project 2: Working Web Page

Image
19/7/2024 - 29/7/2024 / Week 6 - Week 8 Cindy Clarissa Leslie / 0367677 Interactive Design / Bachelor of Design (Hons) in Creative Media Project 2: Working Web Page   INSTRUCTIONS   Coding/Process Figure 1.1 Design prototype Using the prototype as a reference, I had to be able to adapt the design onto a website and make sure that it is usable. Therefore, small changes will be made and such to improve efficiency. Figure 1.2 coding the HTML of the website First and foremost, as usual I prioritized on creating the HTML and all the textual elements along with the contents. I was able to divide each sections into containers using <div> and such in order to make styling easier later on. Figure 1.3 Changing fonts using CSS Next, using CSS, I had to manually insert certain fonts that I have on my computer in order to match the design in the prototype, I then switched the headers as desired. Figure 1.4 Designing using CSS Next, I try to replicate the CV without much changes first...

Interactive Design - Project 1: Prototype Design

Image
15/5/2024 - 29/5/2024 / Week 4 - Week 6 Cindy Clarissa Leslie / 0367677 Interactive Design / Bachelor of Design (Hons) in Creative Media Project 1: Prototype Design INSTRUCTIONS   Research Figure 1.1 Initial moodboard Before I started on creating the prototype design, I created a moodboard to get a brief feeling on how my CV will look like. I chose a colour palette that consisted of colours I liked and collected some designs that I could take inspiration for. In this design, I am going for a minimalistic design that aims to communicate my skills and what not. Planning/Prototype Figure 2.1 Wireframing of layout using Figma Using figma, I first designed the wireframing before starting the draft for my CV. My CV divided into 2 different sections, the first one being a personal and contact information as I deem it the most important especially for job searching when you want the recruiter to contact you. Then the 2nd section being my experiences. The hello world on the layout was a dec...

Interactive Design - Lectures & Exercises 1, 2 & 3

Image
23/4/2024 -  / Week 1 -  Cindy Clarissa Leslie / 0367677 Interactive Design / Bachelor of Design (Hons) in Creative Media Lectures & Exercise 1, 2 & 3 LECTURES Week 1: Lecture 1 Usability Usability refers to the effectiveness of how users can utilise a certain product in the right way. The higher the usability a design has, the better it is able to guide users into their goal of the usage. To investigate problems in usability to accommodate users, we can gather data by: Interviews Surveys Proceed to create a solution to the found problems, create prototypes (drafts and such). Each websites have different goals, example: Netflix - streaming website using subscription, same with YouTube Key Principle of Usability: Consistency Simplicity Visibility Feedback Error prevention Consistency - ensures that the website is coherent and works harmoniously across its all different elements (includes: consistent navigation system, page layout and menu structure, typography and brand...