Labels

Interactive Design: Exercises

4/23/2024

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Interactive Design

Table of Content

1. Lectures

2. Instructions & Tasks

        - Exercise 1: Web Analysis

        - Exercise 2: Web Replication

        - Exercise 3: Recipe Card

3. Reflections

1. Lectures

WEEK 1 (23/7/2024):

In out first face to face class, we were briefed of the module information. We were introduced to our future projects, and were reminded to always give 5 different sketch ideas for our projects. (including wireframes, which should be drawn by hand either with pen and paper or a stylus.) In project 1, we need to use either Figma or Adobe xd for our prototype. For exercise 1, you can use google slide or canva. 

Notes:

Call to action button: the distinct button that grabs the most attention. The first step to come up with web designs is to research, know your users, and make observations. This semester is mainly User Interface Design, is planning where to place your navigation buttons and the layout.

Slides


WEEK 2 (30/4/2024): The Anatomy of a Web Page

1. Header 
Header is the upper (top) part of the webpage. Being the area people see before scrolling the page in their first seconds on the website, the header is an element of strategic importance. It is expected from the header to provide the core navigation around the website so that users could scan it in split seconds and jump to the main pages that can help them.

Some of the popular design practices for web headers include:

  • hamburger menu: hiding the set of links to different pages or sections behind the hamburger button called so as it consists of horizontal lines looking like a typical bread-meat-bread hamburger.
  • sticky header: header that doesn’t hide away but sticks to the top part of the page when users are scrolling the page down. This way core navigation area is available at any point of interaction, which can be helpful in terms of content-heavy pages with long scrolling.
  • two-layer navigation: a sort of double set of navigation sites in the header to separate two different routes of navigation that are both important for web usability.

2. CTA Button 
A call-to-action (CTA) button is an element of a user interface aimed at encouraging a user to take a certain action. This action presents a conversion for a particular page or screen (for example, buy, contact, subscribe, etc.). In other words, it turns a passive user into an active one. So, technically it can be any type of button that is supported with a call-to-action text. This type of button differs from all the other buttons on the page or screen due to its engaging nature: it has to catch attention and stimulate users to do the required action.

3. Hero Section 
Hero section is the above-the-fold (pre-scroll area of the web page containing the element that presents the strong visual hook: a hero image, slider, catchy piece of typography, video, or anything else attracting visitors’ attention and transfers a needed message to them.

4. Footer 
Footer is the lower (bottom) part of the web page which usually marks its end. Being another common zone of global website navigation, the footer provides the additional field for useful links and data users may be interested in finding.

5. Search 
Internal search is a functionality that enables a visitor to browse the content inside the website and shows it according to the search query. Tuned correctly, it shows the relevant content, and this way provides the shortcut to what the user needs.

WEEK 3 (7/5/2024): 

Slides


WEEK 4 (14/5/2024): 

Slides



WEEK 5 (21/5/2024): 

Notes: You cannot name your file or images in HTML in caps, always lowercase. (file naming convention) No symbols either just alphabets.
When the time comes and you need to create more html files, put all the other html files under 'menu folder' that will be linked to the main index file. 
Homework: explore form in your file (text input, label, buttons) Include: contact information input (email, phone, and comment) and submit button.

Slides:



WEEK 6 (28/5/2024): 

Same slides as week 5.
notes: Use '1 em' size for paragraph fonts in html/css to have a responsive font size.


WEEK 7 (4/6/2024): 

Slides



WEEK 8 (11/6/2024): 

Learning Week



WEEK 9 (18/6/2024): 




2. Instructions & Tasks

Module Information Booklet




Exercise 1: Web Analysis 

Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarizing your findings and recommendations.

1.  Synthetic Humans

The website Synthetic Humans is an artificial intelligence project that can be leveraged for user research, team augmentation, and cyclical innovation by offering A.I. powered research engine toolkits, as well as informative videos and articles to watch and read regarding the usage of A.I. 

At first glance, this website is not your average conventional website, it is very visual based in nature and highly dependent on heavy animations and user interaction. The first thing I noticed when opening this website was its loading screen, it resembled an old game downloading screen, which I thought was an ironic choice for the relatively modern, sci-fi look, but it fit the theme nonetheless.


Fig. 1.0: Loading Screen 'Synthetic Human'


The website primarily delivered its information through interactive visuals; scrolling up and down moved the animation forward and backwards respectively. It instructs you to scroll to explore the website. You travel through the depths of the three dimensional visuals as the website description fades in and out. It allows the user to engage with the website and actively want to find out more about what is there by scrolling even further. The delivery of its information was particularly strong due to this feature since nowadays people are more engaging with visuals and interactivity. 

 

Fig. 1.1: Main Page 'Synthetic Human'


However, after you reach the end of the website’s introduction, it doesn’t guide you where to view the toolkits to browse more about the products or services they provide. The main call-to-action button is to get early access to the product, and the secondary call-to-action button is to access a live demo event. To view the A.I toolkits, you have to press the menu button which also has more content about the project, a contact page, articles, and additional talks from the founder himself. Once you press to view any of the hyperlinks from the menu, it takes you to a separate tab, which is not my personal preference because it takes more to load, and it does not have the same visual appeal as if it were to be on the same tab.



Fig. 1.4: Menu Page 'Synthetic Human'
Fig. 1.3: End of Introduction Screen  'Synthetic Human'









When it comes to the website’s performance, it is compatible with both mobile and computer screens. The loading is a bit slower on the mobile, but overall very responsive on both.




Fig. 1.5: Mobile Screen 1 'Synthetic Human'
Fig. 1.6: Mobile Screen 2 'Synthetic Human'

















Overall, the website is organized and fairly simple to navigate, and the information is concise therefore there’s not much reading or scrolling to do. The visuals are consistent, strongly appealing, and very engaging especially due to the wide ranges of microinteractions and animations across the website.





2. Konpo 

The website Konpo is full stack design studio. A software design team specialized in branding, websites, products, and systems.

The colors of the website is a stark contrast of black and with the addition of purple, giving it a very modern and sleek look, and the design is consistent throughout. It is filled with animations and microinteractions making it very engaging to the viewer. There is an introductory video to be played in the right corner of the front page that can be expanded into full screen by either scrolling down or pressing it. 


Fig. 1.7: Main Page 'Konpo'


The website is very easy and simple to navigate and to find what you are looking for, however, it was not clear to me that I was intended to scroll down in the main page to read more about the website, maybe an instruction would have made it clearer. Nevertheless, the discoverability was straightforward and the menu is very organized.


Fig. 1.8: Menu Page 'Konpo'


The primary call-to-action button is the 'Hire us' button. Hovering over the button triggers 3 microinteractions. An animated color change, movement of the arrow inside the button, and subtle movement of the button following the cursor. Once the 'Hire us' button is clicked, you are faced with a page to fill in your information and  the service you'd like which is quite a lot to fill in for the user, but beneficial to the designers since it is a straightforward request without needing for back and forth communication. The black circle buttons next to each design service is also a 'Hire us' button once hovered. 

Fig. 1.9: Call-to-Action Button 'Konpo'



There is a hidden Super Mario mushroom that pops up in the bottom left corner of the page which, once clicked, takes you to the 'playground' which showcases their previous projects through scrolling down. The scrolling was dynamic as the columns would go in opposite directions. However, I could not explore this page much due to it crashing on me every time I stay on it for a prolonged period of time; this decreases performance points from this website. 


Fig. 1.10: Playground Screen Crash 'Konpo'
Fig. 1.11: Playground Screen 'Konpo'








Overall, the website is fairly organized and information is easily discovered. The design is simple, modern, and pleasant to the eyes. There are a lot of microinteractions and animation throughout the website that enriches the engagement with the user. It is compatible with both mobile and computer screens. However, the performance was not all great as it crashed a few times due to an error with loading the 'playground' page. 



Exercise 2: Web Replication

Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. 

Website 1: 

The first step to replicating a website is screenshotting the whole website; in order to do that, you right click on the website > inspect > run command > capture full size screenshot. And it will be downloaded in files as a jpeg file.

Then, I upload the full website screenshot onto Illustrator and start adding guides to help me replicate the layout. I start by blocking in skeleton squares to get a full picture of the layout. Then I searched for a similar font type to the original website and start adding the text. 

Font used: Trebuchet MS Bold and Regular.

Fig. 1.12: Process of Website 1 Replication 1


For simple icons, I used the pen tool to replicate them. As for social media logos and pictures, I got them from the web and placed them wherever is suited. I tried looking for similar images, but they are not the exact same.


Fig. 1.13: Process of Website 1 Replication 2


Final Website 1 Replication: 


Fig. 1.14: Final Website 1 Replication 


Website 2: 

Using the same steps as website 1, I added guides to help with consistency and overall layout, then draw the skeleton prototype of the website, then I proceed to add in the text and the colors of the boxes. 

Font used: Univers Lt Std Regular, Black.


Fig. 1.15: Process of Website 2 Replication 

As for the website's logo, I converted the logo image to a transparent bg png, then placed it where it's supposed to be.

Final Website 2 Replication: 


Fig. 1.16: Final Website 2 Replication 



First HTML Exercise in Class:

In our introduction to HTML, we did an exercise on the basics of HTML and I've deployed my first website on netlify: https://leenfirstweb.netlify.app/  We could only have our own domain once in netlify, so I kind of regretted using it on a simple html skeleton website, but oh well. 


Fig. 1.17: First HTML Exercise in Class 


After learning a bit more html and CSS, I played around with my first exercise and added a bunch of stuff to it during class. It was very fun to see the website build up. This is when I know I made the right decision choosing UI/UX. 

Fig. 1.19: Modifying the First HTML
Exercise in Class 
Fig. 1.18: Modifying the First HTML
Exercise in Class 


Link to the modified class exercise: here



Exercise 3: Recipe Card

Before starting to write the HTML coding, I first made a wireframe of how I wanted the webpage to look like on Adobe XD.

Fig. 1.19: Wireframe
 on Adobe XD

Fig. 1.18: Making Wireframe on Adobe XD


Making the wireframe first made it easier and more planned out when moving on to the coding, so I know what the outcome would be I just needed to figure out the code for it.


In the main page at first, I just placed the image to float on the left, and I edited it on photoshop to have that gradient. But when I opened the website in inspect mode, it is not responsive and the image conflicts with the text, so it just goes down. I did not want that, so I tried solving this issue by making the text overlap the image instead of it being side by side.



Fig. 1.21: Coding Process 2
Fig. 1.20: Coding Process 1



My solution ended up changing the look a lot, I placed the title in the middle instead of the right. It may not look it, but the text is actually on top of the image. I edited the image again on photoshop by erasing the middle area but it is still one image.

Another challenge was that the text was inside a div, but I wanted the "Jump to Recipe" text to be a jumplink to another section of the page. I thought it was impossible to have an <a> tag inside a <div> text but turns out there was a solution, as it is shown in the image below.



Fig. 1.22: Coding Process 3

Fig. 1.23: The HTML code for <a> inside <div>





I made it so all the text and images are in the center of the page with margins of 20% from both the left and right side so it is more visually appealing. I also managed to get the images of the ingredients to line up horizontally by combining them all in one div and made them float to the left.



Fig. 1.24: Coding Process 5

Fig. 1.25: Code for <div> floating on left



Fig. 1.26: Screen Grab of Deployed Website

Final Netlify Link: here


3. Reflections


In this class, we learned the basics of html by applying them in class exercises which I thought were extremely helpful. I felt my html skills building up by having to research on my own, especially since ive tried to learn coding before but I never managed to gain any skills in it due to me being intimidated by coding. But this was very beginner friendly, and I'm glad I am capable of coding and practicing on my own. 



Labels:

Comments

Post a Comment

Popular Posts