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
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.
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.
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
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.
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 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