Labels

APPLICATION DESIGN II: EXERCISES

05/04/2023 - 09/04/2023 (Week 01 - Week 01)
ALICIA TENG YI LING / 0345159 / BDCM
APPLICATION DESIGN II
EXERCISES 


LECTURE

Introduction: Week 01 (05/04/2023)

We started off with an introductory lecture to the module and MIB from Mr. Razif. He briefed the class on the assignments below. 

Task 01: 
  • Critical Analysis of the screen and pages in terms of design, layout, structure, typography, icon design, usability, etc.
  • Continuation from the (screen) prototype from App Design I

Task 02  (Final Project might be combined): 
  • Masterplan of the screens arranged in miro + live screen recording of app side by side
  • It's a presentation!
  • Storyboard (Task 2)
    • What's happening on the screen?
    • Description of screen (animations, sound effects, etc)
    • Describe every single interaction

Task 03: 
  • Animation effects/details that might help user interactions through the app (fade in/out or fly in for example)

Final Project: 
  • Finalising & combining everything together for submission
  • At least 2 types of screen sizes in CSS for responsive design!

Extra Notes:
  • We are learning functional HTML, CSS & Javascript use
  • The goal is structure and presentation not functionality (of course do the required amount for presentation)

Exercise 1 Week 1:
  • Create a webpage of an example portfolio using HTML and CSS
  • It must include:
    • Navigation Bar
    • Home page
    • About page 
    • Portfolio page
    • Contact page
  • Focus more on structure and elements rather than aesthetics
  • Do each separate page and then link to home page
  • You may use chatGPT


EXERCISE 01

To do:
  • Create a portfolio webpage using HTML and CSS
  • Create 3 subpages linked to the home page
  • Include elements like columns and buttons
Precursor

It's been very long since I last used HTML and CSS in depth (almost a year I believe) so I wanted to try coding everything from scratch to brush up on my memory and skills. That is why there may be many errors and questionable lines of code and I'm sorry for that. Although, I did end up referring to my webpage from an old module for help.

For aesthetics, I decided to base if off of inspiration from a dark renaissance theme because I've been really invested in the art pieces of this time period recently. 

Home Page

I started off with the landing page and decided that in each subpage there would be the same image with slightly different title texts and sub texts to indicate the different page. Within the horizontal navbar that is stuck to the top, I included a simple logo that reflects the initial of my first name and the buttons to the other subpages so that when clicked on, it takes the user to them. 


Fig 1.1.1 Head Banner & Title

As the user scrolls down, the next section is an introductory one. As seen below, I split the section into two, the left for a display image and the right side for a heading, descriptive text and a button that leads the user to the "About" page if they wish to go. 


Fig 1.1.2 Welcome Description Columns & Button to 'About'

The next section is simply a divider for aesthetics and balance. It includes a heading <h1> and text. I know that the goal was not to focus on aesthetics and instead structure but I wanted to try to do both.


Fig 1.1.3 Display Divider

Following that is these three columns filled with images. When the image is hovered upon, a text describing it pops up and darkens the image for increased legibility as can be seen on the right most image. On the bottom is a small contact form in the event that the user wishes to email me immediately instead of finding the contact page.


Fig 1.1.4 Image Columns & Contact Form

About Page

In this page, I created a section with a background image and then split it into heading and descriptive text, then three columns with a heading and paragraphs as well. They are a transparent colour so as to not hide the background. I then repeated this again so there would be six columns in total as I believe it would balance the page better.


Fig 1.2.1 About Columns



Portfolio Page

This page was quiet simple, just a section with a background image like the previous page. The difference is a solitary button that would take the user to this blog to be able to view all of my works, but for some reason it isn't working. I'm trying to figure out why currently but I suspect it is because of the server. 


Fig 1.3.1 Portfolio button link to blogger



Contact Page

It contains a heading and description and finally a contact form with a button that requires the user to fill in all the blank fields before being able to submit it. Finally, a footer is at the bottom containing the 'copyright' statement, that is of course present in all the previous pages.


Fig 1.4.1 Contact Form


Final Submission for Exercise 01:

Lastly, I published the work on a platform called Netlify for easier viewing as a webpage. Please have a look!


EXERCISE 02

To do:
  • Create a portfolio webpage using HTML and CSS based off of a figma prototype
  • Make the dimensions mobile friendly
Process

Firstly, I looked at the site based off of a link Mr. Razif provided. The first step was to download the PNG files of certain elements that could not be coded or would be more excessive to have to code, such as the images, logo, and icons. Then, I started creating the site section by section so I wouldn't get overwhelmed but I still did! 


Fig 2.1 Figma Prototype

Current Issues:
  • Navbar right icons are not showing up
  • Play button won't center in the box
  • Hero boxes won't unstick from the left
  • Footer drop shadow isn't showing

Final Submission for Exercise 02:

I'm still having issues with the site that I need to fix but for now I published the work on Netlify for everyone to see easily.



REFLECTION

Honestly, these were rough but necessary exercises to quickly get me back into the throes of HTML and CSS, especially if I'm going to be learning Javascript this semester and won't be able to focus so much on other structure codes. I actually had headaches from them because I tried to complete everything as fast as possible I have not touched coding in so long but it was quite satisfying to be able to complete it whilst remembering all my previous knowledge. I'm quite happy with how the overall webpage portfolio and other exercises turned out in terms of both structure and aesthetic, I only hope that I've included enough elements. My only issue with the first exercise is getting the button in the portfolio subpage to take the user to this blogger site but that problem might stem from the server because it's not an actual site. 

My goal for this semester is to become much more adept and experienced with all sorts of coding because it really isn't my strong suit but I'm doing my best because I want to be able to learn it as a practical skill and utilise it in my daily work life with ease.
Labels:

Comments

Post a Comment

Popular Posts