04/07/2024- 04/08/2024 (Week 11-Week 15)
Lizzie Tanaka (0362065)
Interactive Design | BDCM | Taylor's University
Final Project: Single Page Website
Instructions
For our final project, we are to create a single page website with a minimum of 5 sections on our chosen topic. The website needs to be interactive and responsive.
a. Idea Proposal
I wanted to do a website for an architecture agency. The goal is to invite people to consult with the agency first. I decided to plan out my structure:
- About Us
- What we offer/services
- Testimonials
- Past works
- Contact us: form and socials
After planning out my structure, I worked on my moodboard.
Font choice: Space Grotesk in regular, medium, bold (retrieved from Google
fonts)
I also chose this specific color palette because I want my website to look
more minimalistic and simple. I thought having a more monotone palette would
help.
I searched for inspirations of the direction I want my website to go and I
ended up with these 3 pictures for my initial sketch.
.png)
Fig 1.1 Moodboard
After compiling the moodboard, I decided to sketch 2 wireframes. I have a
rough idea of how I want my website to look like. I want it to fill up almost
the whole frame, with very little margin left.
On the first sketch, I wanted the website to use rounded edges for all
elements such as shapes and pictures. I positioned the menu bar on the
top-center and the title & CTA button on top of the main picture. Here,
the picture is also rounded and is resized until it's almost touching the edge
of the frame. The whole layout is center-based, the headings are all centered
and the items are also centered.
Fig 1.2 Sketch #1
On the second sketch, I actually wanted to make all elements a sharp edge
instead but I wrongly drew them with rounded edges. Here, I change the menu
bar position to be on the right side with the title greeting the users first.
It's big and to the point, placed on top of a huge picture. The CTA button is
placed beside the title, sticking to the edge.
Fig 1.3 Sketch #2
The headings are all in a zig-zag pattern, titles on the left and then on the
right, and it keeps on going. I wanted an arrow to show the users the
direction and as decoration as well. The rest is basically the same with the
first sketch. The contact us section has their socials link to the right edge
of the frame while the form occupies around 70% of this section.
On both sketch, I've put a footer where it has the logo, the links of this
website to direct them to the sections, social media links, a button to go
back up, and the copyright information.
After I sketched, I consulted my idea proposal to Mr Shamsul. He agreed with
the content structure and suggested a few things.
1. CTA Button: Having the word 'Consult' because I mentioned that this
was my goal.
2. Having sharp edges instead of rounded is better (to represent like
buildings).
3. Having 3 works displayed is too little, maybe a minimum of 6-8. Display
pictures in a non-traditional grid.
4. Make sure the website actually looks like an architecture agency
website, simple and minimal. It has to look trustworthy too.
With this, he said that I can proceed to do my high-fidelity prototype in
Figma.
b. Prototype
To start my prototype design, I began by designing a low-fidelity wireframe,
just to see if everything looks okay. Below is my low-fidelity wireframe,
based on my sketch. Some parts are filled up with the actual content but some
are still in lorem ipsum.
.png)
Fig 1.4 Low-fidelity wireframe
After I was satisfied with the layout, I started to work on the main
prototype.
I asked Mr Shamsul for the final feedback on my prototype before moving to the
coding part. He told me that the contact form should have name, email, and
message space, not just the message part. He also told me that the arrows
should have sharp edges, since mine was rounded. This was to make the whole
sharp edged design consistent.
Following the feedback, I also added pictures. All pictures are used with permission of the agency's owner.
Here is my final prototype:
Fig 1.5 Final Prototype PDF
After I finished my final prototype design, I moved to the coding part.
c. HTML - CSS
I prepared all the images needed as well as other elements. I also designed my
own arrow in Illustrator and recolored the icons used for the footer.
Fig 2.1 Making the arrows in Illustrator
I. Navigation bar and title section
For the navigation bar, I used the <ul> tag in the HTML. Below is the
first look of my HTML. The picture I inserted here is too large thus it's cut
off.
Fig 3.1 HTML - Navigation bar and title
Before moving to the navigation bar CSS, I set the body margin to none
and put my main container margins to 68. I also set the font for
paragraph.
For the navigation bar, I started by changing the list-display to
none to remove the bullet points. I set the display to
inline-flex and set the column gap for equal space between each
menu list. I used the float property to put the menu bar on the right
side of the screen. Because there is some space after the menu bar, before the
main title comes, I set the margin-bottom of the menu bar.
Fig 3.2 Progress on menu bar and about
As for the title page, I divided this section into two div. One is the
title and the button and one is the image. For the title container, I set the
display to flex since it will use two columns. I made sure to
set the width of the div as well so that it would not exceed the margins. The
div also has its position set to relative so that the button can
be put to absolute and thus I can customize the position accurately. To
position the button on the right, I used the text-align and set it to
right. I also had to use top property to customize the position
of the button. I also made sure to set the padding and border-color.
For the image, I specifically used the position: absolute and set the
bottom as well because there was some default space after the title
container. In the HTML, I set the width of the image to fill the space and set
the height to auto so that it doesn't get distorted.
Fig 3.3 Final CSS - Navigation bar and title
Fig 3.4 Final HTML - Navigation bar and title
II. About Us
The HTML code I used is in fig ... Since this part was fairly simple, I only
changed the font and the font size, letter spacing. I set this using a class
that I also applied to other headings. I've already set the arrow image size
in HTML.
For the content of the about, I set the text-alignment to right. I used
a container to contain the paragraph and set the display to
flex, then I used the float property to set the paragraph to the
right.
I also set the margin-top of the heading to add space after the landing
image. There was no default space set so it was overlapping.
Fig 3.5 Final code for 'about us'
III. What We Do
Here I just set the pictures and their heights, but I didn't notice that it
was distorted because I set the width. I also typed in the text using heading
tags.
I put a <div> to contain all three pictures and the text. Each picture
and text is also inside their own <div>.
Fig 3.6 HTML - What we do
For the title, I made a container for it and set the container with a
class that applies to other headings on the right side. I used the
float and text-align property to set it to the right side.
Fig 3.7 Progress on 'what we do'
The main <div> that contains the three pictures is set to
display: flex so that the three <div> for each picture can be
displayed in one row. In the previous project, I had a hard time customizing
my items' position and I ended up using negative margins a lot. But during the
responsive design process, negative margins are hard to control. This time, I
tried using another method. I found in tutorials that it's better to use
position: absolute and use the top, left, right, bottom CSS
property.
On my final CSS, I also added a class to the number and the text so that it
would be easier for me to position them. However, the 'interior design' and
the 'construction' have a different class because they're only one line while
'architectural planning' consists of two lines. Thus, it can't be aligned
using the same amount of top property in CSS.
Fig 3.8 Final code for 'what we do'
IV. Testimonials
On the testimonials section, it was pretty straightforward, so for my HTML I
typed in the content which is still in lorem ipsum, and added div to contain
the text and the quotation mark.
Fig 3.9 HTML - Testimonials
In my CSS, I set my testimonial content container to
inline-flex and set the gap as well to ensure equal space between.
In the <div> that contained the paragraph and the quote mark, I
style this div with background color and padding as well as the
height and width. While I was styling, I noticed that the quote
mark looked strange and apparently it's not the same as the one in my
prototype. The one in prototype faced right while the one I typed faced
left. I ended up using the quotation as image, exported from my Figma. For
the quotation mark and the paragraph, I used the top property to
set their position relative to the parent container.
Fig 3.10 Progress on 'testimonials'
In the end, I changed the content to something that sounds more like a
testimonial.
Fig 3.11 Final code for 'testimonials'
V. Past Works
This past work section is the one that took me the longest. At first, I
thought that I could use the grid and use the grid-template-column from a
tutorial. Thus my HTML is already set according to the tutorial.
Fig 3.12 HTML - Past Works
However, when I was styling it, I think it was because my images were way
too large in size and so they kept being cut off. I couldn't set the picture
at all so I tried my own method.
I made one container that contains the photo grid. Under this main
container, I made three containers according to the three rows. I put my
pictures inside their respective containers. For the first and second row, I
used the display: inline-flex and set the column gap. I also ended up
cropping my images to around the desired size. This cropped image made it
easier to set the height and width.
Fig 3.13 Progress on 'past works'
Fig 3.14 Issue on layout
Fig 3.15 Final HTML for 'past works'
Fig 3.16 Final CSS for 'past works'
VI. Contact
I began my contact section by writing the form and inserting the arrows for
the socials link.
Fig 3.17 HTML - Contact
I set the font for the labels, added padding and set the width and height of
the space. I used the pseudoclass ::placeholder to position the
placeholder text according to how I want it. I also used the
input[type=text] and set the padding to make the text start on the
position I wanted. Without this padding set, the text started on the left-edge
while the placeholder didn't start there. I also styled my
submit button by setting the padding and border-color.
Fig 3.18 Progress on contact form
The social media links were more complicated than I had thought. At first, I
used a class to set the position of the arrows but then I figured that each
arrow would need a different amount of top property set. I set them
with a class at first, but then I changed it to id. I ended up setting
their positions separately, which was a hassle. Even the text, I had to set
the positions separately.
Fig 3.19 Final HTML for 'contact us'
Fig 3.20 Final CSS for 'contact us'
VII. Footer
In my footer, I added my logo image and icons for the social media. I also
used the same method for the "Studio" section as the navigation bar.
Fig 3.21 HTML - Footer
Initially, I didn't have any main container that contained my main design.
So, my footer also had the same amount of margins. I figured that adding a
main container for the rest of my design and setting the margins would
solve this issue. My footer section is placed after the main container,
thus it had zero margins.
Fig 3.22 Progress on 'footer'
After the margins were set, I started arranging the objects. I set one
main container for all the contents of the footer, excluding the logo. For
the 'Studio', 'Contact Us', and 'Career,' I put them in one container that
I set to inline-flex. Inside this container, I have another three
containers that contain the 'Studio', 'Contact', as well as the 'Career'
section. After these objects were set, I was left with the copyright text.
I decided to change the tag from <p> to <footer> in HTML
because on default, it positioned the text in the center of the container.
However, I still used the
margin-top and margin-bottom property in CSS to push the text
downwards. I also added a back to top button under the email which
will direct users to the top of the page.
Fig 3.23 Final code for 'footer'
Links
After the CSS was done and my website is styled, I began adding the links.
Links were first added on the social media buttons. I used the
mailto: in HTML so when users click the button, they are directed to
a new email space instead of just their own email account.
Fig 3.24 Adding the links
For the buttons that direct users to each section, it is set in the
properties tab and set the link to the section that I have given an
ID. For the back to top button, it is set to direct to # as it
is essentially the start of the page.
The website feels too static and bland without any micro animations and hover
effects. While doing my prototype, I already have a quick idea of what hover
effects I want to have.
For links, I find that the order should be
link, visited, hover, active so that when it is still an active link,
it doesn't have the purple/blue default color.
Texts, Navigation, Headings
For texts such as the menu bar and the headings, I added underline to
text-decoration during hover effects. Specially for the menu bar, I changed
the color from black to this muted blue I had in my color palette
during hover. Same CSS is used for texts that have underlines as their
hover effects.
Fig 4.1 Example of hover effects on texts
For the headings, I simply added text-decoration: underline for hover
effects. Although I wanted more effects, I feel like upsizing or downsizing
the text would be too messy. So I stuck with a simpler effect.
Testimonials
For the testimonials, I decided to scale down by 2% using the
transform: scale() property in CSS during hover. Scaling it up even
just a little bit, would destroy the alignment and it would stick/overlap with
the other testimonial so I opt to scale it down.
Pictures in Gallery and What We Do
For the 'what we do' section, I scaled it down and dim the images a bit.
Fig 4.3 Hover effects on 'what we do'
For my past work section, initially, I had this plan to animate my hover
effect for gallery, as seen in this picture:
Fig 4.4 Initial plan for gallery's hover effect
However, it wouldn't work the way I wanted. I had seen a lot of tutorials on
how to make the hidden text show up during hover. I tried using the
visibility and the opacity property but it wouldn't work. At the
end, because I spent too much time on this part, I decided to let it
slide.
Fig 4.5 Final CSS for 'past works' hover effect
I ended up scaling down the pictures and dimming the brightness using the
filter: brightness() property in CSS. The text is set to 0.6
opacity. This is so that when the image is hovered, it would be darker,
thus the text will be clearer under the darker background. I also set the
transition to ease.
Buttons
During hover, the buttons should switch from border only to a fill
background.
For the two buttons, it had some kind of shadow behind it during hover effect,
even though I have removed the border and changed it to background color.
After reading some tutorials, I found that I need to set the border to
solid. This successfully removed the shadow behind. Before, I
tried using box-shadow to remove and it did not work.
Fig 4.6 CSS for button hover effect
For the CTA button, I didn't set the transition to ease but the submit
button is on ease.
Footer icons
I wanted a subtle hover effect that would be simple but visible to users. I
decided to scale it down by two percent for the hover effect.
e. Responsive Design
This process also took quite the time to do. It was a lot quicker though,
compared to the previous project. There was a lot of scaling down sizes of
texts and headings, as well as pictures. Most of them are also changed from
flex or inline flex to block. Some alignments are also changed.
For the menu bar, I changed it to be center-aligned and made sure to give some
space below it before the title section.
Fig 5.1 Responsive CSS - Navigation
The title page/landing page is also changed to a center-aligned page. This
required a scaling-down of the image and the texts as well as the
button.
Fig 5.2 Responsive CSS - Title
In the about us page, I made sure to give space after the title section and
scaled down the arrow and the texts. Reducing the width of the container that
contains the paragraph helped so that it would stay in frame.
Fig 5.3 Responsive CSS - About
In the services section, I also scaled down the images and texts, changed the
display of the images to block. Here, I also edited the CSS for the
titles that are right-aligned. I rotated the arrows using transform and
I positioned the titles to stay on the left.
Fig 5.4 Responsive CSS - What we do
For the testimonials section, I scaled down the text sizes and the div that
contains the testimonials. I also set the display to block.
Fig 5.5 Responsive CSS - Testimonials
In the past works section, I change the display to block and made
sure to put equal gap between them. There was this default space between
the title and the pictures as well before I edited again.
Fig 5.7 Responsive CSS - Contact
Fig 5.8 Responsive CSS - Footer
After I was done doing the responsive design for the resized desktop screen, I
had asked my sister to open it in her phone. This is where I realized that it
was not responsive in mobile sizes. I searched for tips on how to solve
this and found
this discussion. The answers told me to add a meta tag that specify the width size and
initial scale which is when users first open, how zoomed it should be. I set
the initial scale to 0.8 because I find it's the perfect amount of
zoomed out.
Fig 5.9 Unresponsive design on mobile phones
The main menu-bar is already quite neat but the lack of spacing between the
navigation bar and the title is irking. I decided to edit it.
Fig 5.10 Progress on fixing the margins of the menu-bar
On the contact form, the spaces are too near to the right edge. I feel like
the margin should be consistent so I reduced the width in my responsive CSS.
The 'about us' section is also not consistent, but using the meta tag
helped.
Fig 5.11 Changes in 'contact us' and 'about us'
At first, my responsive version of this section has the pictures center aligned. In mobile, I started thinking that maybe right aligned would look better. After the change, I felt like it looked weird because of the big margin on the right. I decided to scale-up the pictures to fit better.
Fig 5.12 Changes on 'What We Do'
My footer was also not responsive in mobile phones, the text exceeded the
width. Using the meta tag helped to contain this.
Fig 5.13 Changes on 'footer'
I did some edits to my responsive design, making some images bigger and
reducing the size of my forms input. I wanted to maintain a neat margin even
on mobile size. Thankfully, I really didn't have to do another responsive
design for mobile sizes.
f. Additions
I added a favicon to appear on my website tab by adding this HTML tag, from
a tutorial I found
here.
FINAL SUBMISSION:
%201.png)
Fig 6.1 Final website screenshot
Access the website:
Feedback
Week 11
- Have the word 'consult' in your CTA button
- Make sure the website actually looks like an architecture agency
website
- Make sure the website will be simple and minimalistic, clean, not
too complicated and crowded
- The website have to look trustworthy
- Doing the website with sharp edges instead of rounded might be
better as it can represent 'buildings.'
- Have more works than just 3, can display it in a more
non-traditional grid layout
- Approved of font, color and content structure
Week 12
- Re-do the arrows to have sharp edges, not rounded. Make sure it's
consistent with the sharp-edged overall theme you have.
- Contact form should have name, email, etc. Not just
message.
Reflections
During this past month of doing this project, it went from a relaxed week when doing the prototype to the stress week of doing the coding. With the previous project, I felt like I overestimated my skills of coding by having complicated design. This time, to follow the theme too, I decided to simplify my prototype so that my coding process will be slightly easier. At the end, maybe it's because I've coded the previous project, I felt like I did quite well for this final task.
This is my first time learning HTML and CSS so it was definitely a challenge to create something so similar to my prototype. It takes great attention to detail and patience to code, apparently. However, I'm glad that I managed to finish this final task well. Moreover, I feel quite satisfied with the end result.
Comments
Post a Comment