Interactive Design - Final Complication

04.22.2024 - 23.07.2024 / week 1 - week 14

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Interactive Design

JUMPLINK:

• 1. Web Analysis (2 websites)
• 2. replicates the given websites  
• 3. make a recipe card  
• 4. Project 1 Prototype Design – Digital Resume/CV
• 5. Project 2 Final Design - Creating a Digital Resume/CV
• 6. Final Project Single Page Lifestyle Microsite

Posts:

Exercises

• Task 1 Web Analysis (2 websites)                                         
• Task 2 replicates the given websites (4 websites) exactly     
• Task 3 make a recipe card  

Project 1

• Prototype Design – Digital Resume/CV

Project 2

• Final Design - Creating a Digital Resume/CV;

Final Project

• Single Page Lifestyle Microsite (music entertainment, music, fanpage of an artist (painter, musician), game)

2. INSTRUCTION

Description

• The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
• Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
• Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
• Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
• Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission.

3. Final Complication

1. Web Analysis (Week 2)

1. Instruction

• Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
• Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. 
• Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. 
• Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. 
• Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
• Consider the design, layout, content, and functionality. 
• Identify the strengths and weaknesses of the website.
• Consider how they impact the user experience.
• summarizing your findings and recommendations.

2. Progress

I intentionally pick the best web in my opinion on the site and string to analyze it. I tried my best to nitpick and comment on every possible detail there is that I picked up on both of the websites. As I'm picking the UI/UX specialization I'm glad that I can pick up this many details and design choices used in both websites and also still found areas to be improved upon in them.

Fig 1.1 Header, Week 2 (30/04/2024)

It's hard to compose the analysis due to the many sections we need to analyze and a lot of them overlap and are connected with each other. I worry that the analysis will become too repetitive of certain elements because one element can be for the purpose and goals of the web but also be functionality such as interactive elements. 

Fig 1.1 Header, Week 2 (30/04/2024)

I figured just writing the analysis of the design detail would make sense without the pictures, so I went to Canva to add the pictures in a cohesive manner as Blogger does not support the layout design analysis I aim for, it literary can only have one image per row and can't have another image beside it, its really a waste of space.

Sadly I did not know that you can clip a vid with a screenshot and put it in Canva, it would be so much better to visualize what I'm analyzing instead of multiple images, but what's done is done.

3. Final Result

Fig 1.1 Header, Week 2 (30/04/2024)

2. Web Replication (Week 3)

1. Instruction

• Choose two existing main pages from a given link.
• Follow website dimensions from width and height.
• Use software like Photoshop or Adobe Illustrator for design skills development.
• Use any image from stock or free stock icon.
• Focus on layout, type style, and color style.
• Download similar typefaces/fonts from Google Fonts.
• Screengrab the website for page replication.

2. Progress

So in this task, we need to replicate two web exactly to understand why the web design is the way they are. Now I did not realize that the first web I'm picking is the longest one of the three options and it took so much time with the sheer amount of text. I needed to know every single one of the letters, it's way too tedious, I wished I bailed on this web and did another one instead. 

Fig 1.1 Header, Week 3 (07/05/2024)

The elements and overlapping section aren't so bad, I can them easily after a bit of experiment, the forms and the button just used squares with rounded edges. What's interesting though, I was struggling to find some images with the right color because the text overlapping them is white and looked washed out. The solution for this is to make a square, give it a gradient, and lower the opacity on one end. 

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

After everything I went through on the first web design the second one is way easier and not to mention is a lot shorter too.  

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

Some observations on both web, the first one is minimalistic as it is about finance and investment management, sales, and trading. While the second one is all about ocean health with a blue dominant color palate and underwater images.

One thing I notice on both webs is that the grid actually becomes the ruler for across the web whether it's from right to left or top to bottom for both the texts and the elements. This invisible ruler is of course more noticeable in the ocean web, but have more clever uses of this in the Morgon web.

3. Final Result

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

Fig 1.1 Header, Week 3 (07/05/2024)

3. Creating Recipe Card (Week 8)

1. Instruction

• Design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE Recipe.

• Create a recipe card using HTML and CSS. 
• Create an HTML file named "index.html."

• Create a section that displays the following information:
• Recipe title
• Include necessary images for the page
• List of ingredients
• Step-by-step cooking instructions

• Create an external CSS file named "style.css."
• Apply CSS rules to style your recipe card.
• Use CSS selectors such as element selectors (e.g., body, h1, ul) 
• Class selectors (e.g., .recipe-title, .ingredient-list)
• ID selectors (e.g., #instructions) to style different parts of the card.

• Use your creativity to make the page look appealing and interesting

2. Progress

First, I put the information in and separated them into sections, putting the headings, lists, links, and their placeholder in their respective tags. 

Then put in the CSS for a section to separate it from the background and thus guide the eye to the information. They give the margins and padding to the content inside the section.

Give the border and radius of the image, and align them to the left, right, and center appropriately. give colors to all the information to give more contrast and fit the color palate. 

 

I also added a contact form below with their placeholder, button, and links with their hover style.

 .

When I was finished it looked too bland by itself, so I added background images from Google following a tutorial from YouTube. adjust the color palate and it looked visually more interesting. 

3. Final Result

Final Result: https://6668722055054428423eac2a--brilliant-jelly-038150.netlify.app/

4. Project 1 - Final Design - Creating a Digital Resume/CV

1. Research

these are the posts I was inspired by to make my resume. Besides the one that I did below I actually made one in A4, but through a friend turns out it needs to be in desktop format, my class did not get this information, so I need to redo it. 

Fig 3.1 Reference, Week 5 (21/05/2024)

Fig 3.2 Reference, Week 5 (21/05/2024)

Fig 3.3 Reference, Week 5 (21/05/2024)

Fig 3.4 Reference, Week 5 (21/05/2024)

The reason I chose these as inspiration is related to my plantation UIUX, I thought it would be cool to make the resume based on the website and tabs overlapping each other.

2. Progress

First I want to decide on the color palate and the typography. I decided on a green and grayish gradient, similar to my own blogger, and more rounded shapes as a foundation to give a calm and relaxed vibe.

Fig 3.5 Progress, Week 6 (28/05/2024)

Fig 3.6 Progress, Week 6 (28/05/2024)

then I arrange the blocks appropriately along with the information I want to fill in. But the blocks still looked messy so I didn't put more text and elements into it until I got it right. 

I added the drop shadow and try to make the layout more coherent and I may have overestimated my creative thinking on how to make a visually pleasing design. I don't like it, there's no clear hierarchy of information and despite the rounded corners, everything still looks too stiff and messy.

it's really hard to get the hang of the tools of Figma and have to make all this from scratch. But it is also my fault for being too ambitious (but this task is going to continue to project 2 and I can't let myself not be ambitious and I'm going to specialize in UI/UX) I got frustrated with this and was reluctant to touch this again.

Fig 3.7 Progress, Week 6 (28/05/2024)

I also don't have information to put into experience and projects. Mr told me to apply for a media position (poster, social media) position in clubs to get experience. Yes, Mr. I understand I'll put myself out there, it is the only way to get a job as a designer after all.

Mr also said that the rounded-edged needs to be the same "roundedness" to have some consistency and level in the experience and projects sections. Even after fixing it according to the feedback, I'm still disappointed with this one especially since I know I can do better if I dedicate more time and a clear mind to this.

Wish I had more time with this to explore and expand more, but it is what it is. I'll try to fix and improve this in Project 2.

3. Final Result

Fig 3.8 Final Result, Week 6 (28/05/2024)

5. Project 2 - Prototype Design – Digital Resume/CV

1. Research

During the making of this absolute beast, I asked Mr Shamsul for advice on how to do this layout. I made it too complicated for me to understand the coding knowledge needed for this. Mr said what I have is similar already to the original design, but allowed me to change the layout a bit to make it easier for myself (I'm already on an extended deadline, Thank you Mr)

Fig 1.1 Prototype, Week 7 (04/06/2024)

The main thing I changed about it, is mostly the overlapping elements, as I got no clue how to do that. 

Fig 1.2 Prototype, Week 11 (02/07/2024)

2. Progress

Putting in the words is the easy part, the CSS though. sigh..

Fig 1.3 HTML, Week 10 (16/06/2024)

I won't lie, most of this process is a lot of googling and looking back on previous lectures and exercises. Way too many sections and classes. Wanting to make certain elements, making them center, paddings, and margins, takes around 20 min each. Learned a bunch of new properties and their values, and I still do not know entirely how it's gonna affect other elements' properties.

The experts in this propobly have a hierarchy system on how to do this, with clear comments on each property and stuff. What I did is keep adding more classes when something is not right, cause I don't want to mess up other elements that have that class, or I'm too lazy to find the class. There are probably many overlapping property values in different classes. To put it simply, the code is a mess. My brain is fried. 

Fig 1.4 CSS, Week 10 (16/06/2024)

This is what I got so far before asking Mr for advice. Because I used the position: absolute on the circle and boxed "about me" in green, when you see it in live coding in Dreamweaver is offset, compared to when you see it in the web preview. 

The reason is that I used the position: absolute to make the circle and boxed "about me" in green, is to make them on top and behind the corresponding elements. But because of that, It messes up when trying out with "inspect" to test responsiveness.

Fig 1.5 Preview, Week 10 (16/06/2024)

Coming back to this with a fresh mind, I somehow managed the circle and boxed "about me" in green.  I've also added the drop shadow (got a new property) to each of the "cards". Struggled a bit with the image for the header, and had a crisis because I thought I lost the whole CSS, then added the font. It's still not exactly the same as the new layout but for the header, I do think this looks better, this layout needs more images with depth and texture.

Fig 1.6 Preview, Week 11 (02/07/2024)

Then I tested for responsiveness in multiple sizes, the language section is a bit problematic due to me adding way too many margins and messing up on smaller screens. But it's fixed with display: flex, then warp.

Eventually, the responsiveness on different screens worked out, and it was done. Below are a couple screenshots I took on different screen sizes.

Fig 1.7 Preview, Week 11 (02/07/2024)

Fig 1.8 Preview, Week 11 (02/07/2024)

It's not perfect but I think it's already more than I thought I could do. So I'll take it. Making this exactly the same as the original design would be possible, it would take so much of me but possible. A silver lining in all of this. 

2. Final Result

Link: Project 2 (aquamarine-griffin-2fd032.netlify.app)

Somehow the link is not working, it keeps going to an error page, im still trying to fix it.

Fig 1.9 Responsive, Week 11 (02/07/2024)

6. Final Project - Single Page Lifestyle Microsite 

1. Research

The first prototype that I made during class was just to test out what I would like to make, when I presented it to me, Mr said that my topic was too broad and need to narrow it down to a niche instead of a whole franchise. 

Fig 1.1 Prototype, Week 11 (02/07/2024)

Mr also told me to decide on a visual reference, font choices for the header and the body, color scheme of  3 colors. So I made it, and even though at the end it got completely scrapped, I really should have this sooner. I thought with the movies being in the Viking era it would make sense to use black and brown color schemes, along with a flourish and handwritten fonts. I knew from the start that my content would be heavy on text and pictures, so I intentionally searched for one that sufficed both requirements.

For the prototype, I made a simple one following the format of the visual references with skewed and randomly placed pictures.

Fig 1.2 Prototype, Week 11 (02/07/2024)

The first prototype was quite rough, I didn't put any heading or pictures and just made the layout, in hindsight, I am so glad Mr didn't approve of this one because I don't even want to think about how to code this, skewed overlapping pictures? many disorganized colors of the background? No, thank you. It would propobly take so many margins and padding to get it right and even then that could mess up the whole responsive bit.

Mr said that the flow of your content is not smooth, the boxes(images) rotated, no heading indicating a section, poor alignment, also don't apply too many colors on the page. So I completely changed up the composition, made the pictures completely straight and along this time I immediately made the content so I would the what and how many sections it needed. I still wanted to remain faithful to the visual references using many pictures so did, but changed up the text layout so it still has some structure.

Fig 1.3 Revised Prototype, Week 12 (09/07/2024)

But as it turns out it didn't look quite good, as mr said dark brown color is not really happening. The arrangement of the image is kind of weird, the hero section is empty, also the border on the picture is not a good idea, and the flow of the pictures is also wired causing poor alignment. Mr suggested rearranging the to color see if it would work out, if not then find another color palate and add the hero image but with the hero image being blue I have the idea to just change the color completely to fit with the hero image.

Fig 1.4 Prototypes, Week 13 (16/07/2024)

Mr also suggested that I should look at an existing website that is heavy in both pictures and text as references to see how they would format it, I have looked through a lot of the websites and I found some that look good but they usually just images with barely any text until this one.

Fig 1.5 Referenced Web, Week 14 (23/07/2024)

Referencing this web format I made the prototype and added gradients along each section to differentiate them after a while repeating patterns started to to look boring. My friend actually suggested that i use different fonts for this and they're right simpler fonts do suit it better, even though I have to adjust the kerning nad line spacing for each one.

Fig 1.6 Prototypes, Week 14 (23/07/2024)

This is the whole prototype attempt that I made. Mr said that I could use the gradient property for the fade in and fade out from the hero image and each section.

Fig 1.7 Prototypes, Week 14 (23/07/2024)

2. Progress

The first thing that I want to nail down is the layout of the web, categorizing it into 4 sections there's the header, the 1st and 2nd layout variations of the content, and the footer. I chose to make the 1st format for the content first as it makes up most of the web, I used the same text and image for all of the layouts of the web, totally not going to regret that down the line.

Fig 1.8 Preview, Week 15 (29/07/2024)

Fig 1.9 Preview, Week 15 (30/07/2024)

There is not much to say here besides that it took a ridiculous amount of time to get the layout working just right, along the time that got the header, and 1st and 2nd layout variations of the content mostly down, attempted to see it in responsive, and oh boy, does it changes so much, I needed completely change the layout on the 1st one to follow with the 2nd one because the 2nd actually work with the responsive. In the end, it does change a bit from the original prototype, but it was the best I could do without messing up the aesthetic of the responsive too.

Fig 1.10 Preview, Week 15 (31/07/2024)

The longest problem that I have with this is how to put texts on top and on bottom simultaneously, I didn't think it was that hard but after scouring the internet, man it was the hardest thing to do, I didn't want to just give it margins or cheat it with enter space as it completely destroys the responsive part.

Remember when I said that I made all of the text and pictures the same during the layout-making process yeah, when I added the actual pictures, the height and width of the pictures were way off and I had to go back and fix that up.

Fig 1.11 Preview, Week 15 (01/08/2024)

it's so distracting that the preview on Dreamweaver is different compared to the browser, threw me off a couple of times, and have to remind myself to look at the preview on an actual browser.

Even then the responsive layout is still finicky, probably my fault for making such a complicated layout that looks kind of repetitive, just because I want to follow through with my topic that requires a lot of pictures and text because I want to rant about it. I definitely say other friends who make more visually pleasing layouts without much coding.

Also, the responsive bit is coded to under 760px and 480px.

3. Final Project

Link: Introduction (66b0d3edfe7aadf8b4218336--dreamy-pithivier-88c36c.netlify.app)

Fig 1.12 Preview, Week 15 (30/07/2024)

4. Reflection

1. Experience

The coding process was exhausting, taking time and energy. It was challenging to make changes or make certain elements right, even with Google. During prototype creation, the author didn't consider coding later, which was a double-edged sword. It allowed them to avoid being restricted by their poor coding skills but also led to overspending on the design, unsure of their future coding skills.

2. Observation

Lately, I've been reflecting on my journey into UI/UX, and it's becoming more clear how much continuous learning is required. The resources and tools are advancing so quickly, and I know that what I learn today might not be enough tomorrow. It’s honestly still tough to figure out the right properties and values to use—sometimes Googling feels like a never-ending rabbit hole, and even then, things might not work out as planned. It’s frustrating, but I realize that this is part of the process. I’m still building my knowledge and skills, and I know it’ll take time, practice, and more projects to get where I want to be. It’s a journey, and I’m committed to keeping at it.

3. Findings

• Need to practice more, then keep practicing to keep up the future.
• Make a system for the coding.
• Learn and memorize what properties do what.
• Make sections for each content so it's easier.
• Do not underestimate how long am i going to code this (it took a lot)