Interactive Design / Project 2

28.08.23 - 24.10.23 / Week 8 - Week 9 
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Interactive Design (GCD60904) / Section 1
INSTRUCTIONS

  

PROJECT 2 - WORKING WEB PAGE

Working Web Page

For project 2 of  Interactive Design we are continue from Project 1 and transform our static prototype into a fully functional and interactive web page by applying our learned knowledge of web layout taught in class to create a working website that closely aligns with out original prototype. To do this, we must review our static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery. Then, using HTML and CSS in Adobe Dreamweaver, we are to translate the design elements into code, ensuring a faithful representation of the original prototype.

The requirements are the following:
  • Aim for pixel-perfect precision while maintaining responsive design principles
  • Ensure compatibility across different devices and screen sizes.

Process


To start, I first created a new HTML along with a CSS attached to it and created a new folder to store them both in as well along with the images folder inside of it. For elements I could not translate in code (such as the custom icons I created and headshot picture) or did not show up as visually accurate as the prototype (such as the line next to my "About Me" section and the bullet points for "Education" "Experience" and skills), I downloaded as PNG's from my Figma Prototype then stored them into my images folder.

Fig 1.0 Web Page Images

Then I analyzed the typography of my prototype- for my font, I had stuck with only one one which was "Inter" but used 4 different variations from the family which are the following:
  • Regular 400
  • Medium 500
  • Semi Bold 600
  • Bold 700
Thus I went on google fonts to search for it as I remember Mr Shamsul giving a tutorial on how to embed fonts into our web pages via google fonts since they provide the HTML code as well as the CSS rules specification. Once I had found the font on google fonts, I then selected the following variations that were used and copied the import code from the website and then added it into the head of my HTML. 

Fig 1.1 Collecting Font

Fig 1.2 Embedding Font Code

As my prototype is split into two main sections, I have created a container and a right and left column as well as several box elements according to the prototype design to make up the foundation of the base elements and background. Additionally, I have also created an id or class for certain elements since there are so many with their own unique design properties and to make styling them in CSS easier. 

Fig 1.3 Coding Container + Left Column

Fig 1.4 Coding Right Column + Right Columns

Fig 1.5 Coding Boxes + Classes + Id's

Next, I created multiple instances of header elements and paragraphs as the text in each section of my prototype design features its own font variant and font properties- so it was important to have multiple headers, custom id's, and classes due to this and also because I could only have one instance of a paragraph element.

This is followed by addition of all text from my prototype design, first sorting them to where they would logically go inside the html order such as my name and subheading categories being under headers elements and informational text under paragraphs elements, then sorting them according to where they appear in the prototype design- translating that visual order by following it chronologically in code and also encasing them under the respective container and column (left/right). I have also added each image in the same manner

Fig 1.6 Coding Multiple Headers + Paragraph & Addition of Text

In adjusting the text or images to sit in a specific box, I have used a content wrapper so it is contained and centered inside the div.

Fig 1.7 Content Wrapping Text + Images in div 

Lastly, to adjust the text in colour, font weight, size, and style according to the prototype design- I have edited these elements in the CSS. This is the same case for the columns and boxes. In both instances, to get the exact colour used in my prototype design, I had grabbed the hex code of the colour then specified it into the css rule background-color/color. I have also adjusted the padding, position and margin. To really get pixel-perfect positioning that was accurate to my prototype, I had to tinker a lot with the values of margins in particular where some elements required the use of "px" and negative values instead of "%" to get a more accurate end result.

Fig 1.8 CSS Edit of Misc Elements

Fig 1.9 CSS Edit of Headers

Fig 1.9 CSS Edit of Columns, Boxes, Containers, & Spacing


Final Outcome


Fig 2.0 Final Working Web Page


FEEDBACK

Week 9

Specific Feedback: Layout is good, just fix the alignment/positioning of some elements to be more accurate to the prototype design you created.

REFLECTION

In Project 2 of Interactive Design was quite challenging in transforming our static prototype into a fully functional one. The meticulous process involved many observational components of which tested our visual recognition as we had to pay attention to the design choices we made such as the font, color scheme, and layout of the prototype. Additionally, creating working containers, columns, boxes proved to be more challenging than I had thought- sometimes the code would break or fail which frustrated me since it made up the structure of the foundation- thus also breaking everything else, and I would have to carefully read back through several lines of it and understand how it failed, and how to fix it. Mainly tutorials on the internet were of big help for me in fixing these errors, but it is also through self learning where I had spent a good while tinkering with the HTML and especially the CSS style in order to get it precise. At the same time, it was tough working on the project as well as I started to become more progressively ill during this period- so there were many moments where I had to work through the pain in order to get the work done. Despite all this, I am quite pleased with the overall outcome and skills I have managed to obtain with translating design elements into code and will continue to grow and become better as a UI/UX designer.

Comments

Post a Comment

Popular posts from this blog

Design Principles / Task 3

Image
0.7.03.24 - 21.03.24  / Week 5 - Week 7 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Design Principles ( GCD60804 ) / Section 1 INSTRUCTIONS TASK 3 Design For Task 3 of Design Principles, after we have analysed the design of out choice in Task 2, we are to produce a work of design, inspired/influenced by the one we had analysed, or as a reaction to it. We should also apply our knowledge of design principles in our creation and may use any medium and/or materials that are suitable to convey our visual message. We should also include some cited visual references that inspire our own ideas and a rationale, in about 150-200 words, explaining/defending the decisions made in our design, the meaning/purpose of the design and the design principles that are found in the design. Brainstorming First off, I went back on my Task 2 to look at the design I analysed in order to get inspiration and gauge how I should approach this task. When reading
Read more

Design Principles / Task 2

Image
20.02.24 - 05.03.24  / Week 3 - Week 5 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Design Principles ( GCD60804 ) / Section 1 INSTRUCTIONS TASK 2 Visual Analysis For Task 2 of Design Principles, we are to assess, investigate, document, and analyze the existing art/design work we selected in Task 1 to further study the design principles found in that work, as well as the size, placement, purpose, effectiveness of the design in relation to the UNSDG goal that we have chosen. The requirements are the following: Write a 300-350 word visual analysis of the selected design. Include reference links where applicable. Firstly, I started by visually observing the image itself and re-reading some of the design principles documented in the lectures to refresh my understanding of them so I could better identify which ones are present in the art work, then noted them down. Fig 1.0 'Guernica' From my observations, these are all the design
Read more

Illustration and Visual Narrative / Final Project

Image
26.06.23 - 14.07.23 / Week 13 - Week 15 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Final Compilation & Reflection INSTRUCTIONS Animated 1 Page Visual Novel The final project of Illustration and Visual Narrative is a continuation from Project 3 where we are to create a one page introduction comic of our selected story based one of the three 1 acts from our story. We are then to animated at least 1 panel of the comic into a short looping gif which are chosen based on the optimal timing in the story flow and visual transitions that effectively convey the narrative. The challenges of this assignment are the following: Continue with the same story and design aesthetic from Project 2. Work only from one paragraph of the story for the 1st page. Research I first went through the story I have selected and read each of its acts before choosing one to proceed with. After careful consideration I have selected Act 1 of the story- 'Elean
Read more