Interactive Design // Project 2: Working Web Page
2nd October 2023 - 16th October 2023
Emran Tarek Sayed // 0346648
Bachelor of Design (Hons) in Creative Media
Interactive Design // Project 2: Working Web Page
INSTRUCTION
<iframe
src="https://drive.google.com/file/d/1axYTTpG4QssakTuddTkAz4EMs-uYBMkR/preview"
width="640" height="480" allow="autoplay"></iframe>
PROJECT
Project 2: Working Web Page
Continuing from the last project, 1, we are
tasked to transform our
static project one prototype design into a
full-functioning website using HTML and
CSS code, ensuring a faithful representation of
the original prototype in Project 2. Aim for
pixel-perfect precision while
maintaining responsive design principles to
ensure compatibility across different devices and
screen sizes. And finally submit it
in Netlify to put it here.
To recap, for Project 1, we were tasked to create a simple
prototype design using Figma or Adobe XD. And here was
mine.
Fig. 5.0 Project 1 Final Result
3rd October 2023
Progression
I divided the process of making a functional web page from my
prototype design into four steps to help me stay on task. The
name, what am I, description, and image are at the top; those are
the layout, as in the overall structure of the whole thing. The
third section, at the bottom, contains my five personal details:
contacts, projects, education, work experience, and skills.
Lastly, there are extras, such as the features that this web page
prototype design needs to consider to function.
Layout
Starting from the base, the layout, I created a background using
the same colour as my prototype design and then coded two shapes,
top and bottom, each with a corner radius of 97. It's easy to get
the measurements and colours from Figma to help with the code.
Here are the steps I did and what it looks like so
far:
.png)
Fig. 5.1 HTML Code (Layout)
3rd October 2023
.jpg)
Fig. 5.2 CSS Code (Layout)
3rd October 2023
.png)
Fig. 5.3 The Look (Layout)
3rd October 2023
Top
Moving on to the next step, which took longer than the first, I
coded the top part of my prototype design. The top part consists
of my image, name, what I am, and my description. I started by
adding the name using the same font I used on Figma, Playfair
Display, a bolded font with a size of 80. As for the What Am I and
the description, use a completely different font: Montserrat
regular font, each being different sizes, 50 for What Am I and 30
for the description.
.png)
Fig. 5.4 HTML Code (Top)
3rd October 2023
.png)
Fig. 5.5 CSS Code (Top)
3rd October 2023
The hardest part of the section was the image; inserting was easy
but needed to be a specific shape. I had to create the outlines
first, curving the corner radius and then inserting the image
inside at the top left corner.
.png)
Fig. 5.6 CSS Code (Top)
3rd October 2023
Bottom
I am progressing to the bottom part after finishing the top
part. As for it, I needed to add all the details within the box
created without overflowing, as there is tons of information for
it to be filled in a box.
It was challenging, especially because it has two different
fonts, Playfair Display and Montserrat, in different sizes and
parts of it bolded and underlined. At some point in the coding,
putting parts of CSS in HTML was easier. And I had to watch a
couple of videos on YouTube regarding text alignment. Padding
margins are not working for me as it kept on having one or two
words in an awkward position, and as I am fixing that, another
problem would occur.
.png)
Fig. 5.7 HTML Code (Bottom)
4th October 2023
%20(1).jpg)
Fig. 5.8 CSS Code (Bottom)
4th October 2023
But after countless hours of coding the HTML and CSS, I managed
to organise it as close to the prototype design looks as
possible. Here are the results.
.png)
Fig. 5.9 The Look (Bottom)
4th October 2023
Extra
Before proceeding with the features and interaction, I had to
adjust to fix the minor details that looked off. Finally, I added
a feature for the last step where the information would sort off
to you when you hover around it. I then adjusted the coding so the
webpage would adapt to screen sizes without breaking and falling
apart. Here is the coding progression:
.png)
Fig. 5.10 HTML Code (Extra)
4th October 2023
.png)
Fig. 5.11 CSS Code (Extra)
4th October 2023
How it looks on the computer and phone:
.png)
Fig. 5.12 The Look on Computer (Extra)
4th October 2023
.png)
Fig. 5.13 The Look on Phone (Extra)
4th October 2023
Below are the fully exact version codes I used for the
HTML and CSS. And also a Netlify link to the website.
Also, I didn't use the star symbols because it was too
complicated, and I gave up on it.
HTML Code
<iframe
src="https://drive.google.com/file/d/1o9WcbnCXnTedysRnWfhaB9hG3BdAHn0T/preview"
width="640" height="480"
allow="autoplay"></iframe>
CSS Code
<iframe
src="https://drive.google.com/file/d/1CD_L7878oSCyYhZnC_GFme5yO9vUJ4Lr/preview"
width="640" height="480"
allow="autoplay"></iframe>
Prototype Design Web Page
FEEDBACKS
"Feedback has been mentioned under Project."
REFLECTIONS
Project 2: Working Web Page
As I started Project 2 to turn my static prototype design into a working website, I encountered several difficulties and learned much about web development. I started by carefully recreating the layout, ensuring every pixel was exact, and creating a responsive design with HTML and CSS.
It was necessary to pay close attention to detail when choosing and styling the font for the top section, which included my name, role, and description. It took more work to insert and shape the image, but the outcome was worthwhile.
Because there was so much information, moving on to the bottom section was especially difficult. Balancing fonts, sizes, and text alignments was difficult, so I had to switch between HTML and CSS to get the best results. It took some time to troubleshoot padding and margin issues, but it was necessary for a professional appearance.
Incorporating interactive elements like hover effects gave the website a more dynamic feel, and ensuring cross-device compatibility required screen size adjustments.
Overall, this project gave me practical experience learning web development and reinforced the value of problem-solving, responsive design, and attention to detail.
Comments
Post a Comment