23/9/2024 -- 6/1/2025 (W1-W14)
LIU YITONG (0370907)
Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Final Project
INSTRUCTION
FINAL PROJECT
1. Instructions
Objective:
Create a fully functional website based on the redesign prototype,
demonstrating design, UX, and development skills.
Website Development:
Implementation: Convert prototype to a working site using HTML, CSS,
JavaScript, and frameworks (e.g., Bootstrap).
Design Consistency: Maintain typography, colors, imagery, and layout from
the prototype.
Responsive Design: Ensure adaptability across desktops, tablets, and mobile
devices.
Cross-Browser Compatibility: Ensure correct functionality on Chrome,
Firefox, Safari, Edge.
Core Features:
Navigation: Implement easy-to-use navigation for key website sections.
Interactive Elements: Add forms, buttons, and dynamic content for
engagement.
Technical Considerations:
Performance Optimization: Improve load times by optimizing files and using
caching/compression.
Final Testing and Deployment:
Testing: Perform usability, cross-browser, and responsiveness checks.
Deployment: Host on GitHub Pages, Netlify, or custom domain. Provide a
public URL.
Submission:
Submit a live URL and a brief report (800–1,000 words) documenting the
development process, challenges, and solutions.
2. Visual References / Design Inspiration
Before starting all the design, I first searched many similar website designs
on the Internet to use as my design reference.
Fig.2.0 Marine conservation website design reference
3. Moodboard
After referring to other Marine websites that are comfortable with design, I
started to create my website design moodboard, including all the important
elements needed when making a website.
Fig.2.1 Website design moodboard
Font
I chose the sans serif "Outfit" to make my website look cleaner and more
natural. I chose different shades of blue for the font color and orange for
the links.
I intend to use only this one font in all of my designs to improve
consistency and make the site look simpler.
Fig.2.2 Outfit
Color matching
Improve contrast: Use dark blue in areas with a lot of text to enhance
readability, and use orange contrast to highlight points.
Images
I chose to focus on the ocean theme and avoid using a slightly noisy,
no-subject coral reef photo. This will make the website cleaner.(Later will
adjust according to the content of the picture more suitable for the
content)
4. Prototype
Sketches
Below are my wireframe sketches where I explored some different layouts in
terms of the placement of each content and their design.
Fig.2.3 Sketches
Prototype
After finishing the wireframe sketch, I turned to Figma to create a prototype
version of the website I had designed.
Fig.2.4 Prototype
Link to Figma: https://www.figma.com/design/VKNNQ0l1KuukwGUQSf8MBo/Project-2?node-id=117-92&t=3hXmqoMtri3rG3k3-15. Coding
Overall challenges and solutions:
Challenge: Layout adjustment
Question: The page contains multiple columns of content (contact information
and form), in different screen sizes, how to ensure that the content can be
properly displayed on the smaller screen, to avoid overflow, overlap or
layout disorder.
The solution:
Use flexbox layout: flexbox is used in.contact-content to implement a
two-column layout, one for contact information and one for form. flexbox
ADAPTS the width of each column to the size of the screen, ensuring that the
display looks good on different devices.
Media query: @media (max-width: 768px) is used to handle layout on small
screen devices such as phones and tablets. On a small screen, flexbox's
flex-direction is set to column, so that the two columns are arranged
vertically instead of side by side.
Challenge: Font and spacing adjustment
Problem: At different screen sizes, font and element spacing needs to be
adjusted to ensure page readability and good visual effect. Especially on
small-screen devices, large fonts and tight spacing can cause pages to
appear overcrowded.
The solution:
Adjust font size: Use media queries to adjust font size on small screen
devices. For example, set the font size of.contact-container h1 to 28px
and.contact-desc to 20px to look better on your phone.
Adjust spacing: Adjust the spacing between elements based on the screen
size. For example, gap: 120px is used to separate two columns of content in
the desktop version, while in the small screen version, the spacing of
elements is adjusted according to the flex-direction, ensuring that the
overall page feels breathy.
Home
a) Homescreen & Header (Navigation)
Fig.2.0 Final Homescreen & Header (Navigation)
When faced with a newly created HTML file, my mind goes blank and I find the
beginning to be the biggest challenge for me.
I started writing HTML code. I partition the main content logically (e.g.,
header section, main content area, buttons).
Each section is clearly defined using semantic HTML tags and CSS class names
(e.g..home-main-1,.main-1-item).
Then I had a problem with responsive design, and I couldn't figure out how to
fit the navigation into multiple screen sizes. But then I used the flex layout
and adaptive features of CSS (e.g. gap: 50px, padding). Multiple devices and
window sizes are tested in real development.
Fig.2.1 Part HTML and CSS process Page 1
In the navigation section, I chose to use the humburger menu I talked about in
class. This gives you another, better way to switch between difficult interfaces
when the screen shrinks.Here I use some Java script code to solve.
Fig.2.2 Humburger menu
And the end result looks something like this.
Fig.2.3 Humburger menu view
Fig.2.4 Final What We Do Page
In the What We Do section, I used card layouts in the sketches I made in Figma
to make the view clearer, and now I want to restore them in code.
Each card contains a title, description, and link to the item, accompanied by
relevant images to enhance visual appeal.
c) Blog: On the Tide
d) Donate and Footer
Fig.2.5 Part HTML and CSS process Page 2
In addition, I also added hover effects to each card to enhance the
visitor's sense of interaction.
At first, enhanced projection was used, but later it was found that
the difference in doing so was not as obvious. So I decided to move
the card up while enhancing the projection and change the color of the
label.
Fig.2.6 Improved hover effects of cards
Fig.2.7 Final Blog: On the Tide Page
Fig.2.8 Part HTML and CSS process Page 3
The biggest challenge I faced in this section was how to properly insert
the carousette into the code.
I was faced with many problems: I needed to choose the right carousel
plugin to meet the design needs of the website.
Also, make sure that the wheel chart will display well on different
devices and screen sizes. I also want to implement the navigation
button style in the Figma design.
To solve these problems, I chose the Swiper plugin to meet the project
requirements.
And the CSS and JS files for Swiper are introduced - the CSS file for
Swiper is introduced in the <head> section of the HTML file and
the JS file for Swiper is introduced at the bottom of the
<body>.
Fig.2.9 Swiper plugin
Fig.2.10 Improved Carousel picture
Fig.2.11 Final Donate and Footer Page
Fig.2.12 Part HTML and CSS process Page 4
After the creation of the previous several pages, this page is not a
big challenge for me, the biggest challenge is just adaptive web
pages, but I can also face it well now.
Fig.2.13 Final Home Page layout
Contact Us
Fig.2.20 Final Contact Us layout
Fig.2.21 Part HTML and CSS process Page 7
The first remains a challenge in layout and responsive design.
Because Contact-main contains two parts of content: contact
information and a form, it needs a flexible layout to accommodate
different screen sizes. So I used the flexbox layout to adjust the
layout, specifically by dividing the two columns
by.contact-content, where.contact-info and.contact-form
automatically adjust to the screen size. To accommodate small
screen devices, media queries were used to modify the layout
orientation, such as adjusting it to portrait at a maximum width
of 768px, while adjusting the font size and spacing.
Fig.2.22 Media queries
To enhance the visual effect, the page contains multiple ICONS and
images (such as.icon-circle img). These ICONS and images need to
be adapted for different screen sizes.
So I set the width and height of the image, while using
object-fit: cover to make the image fit well into the size of the
container and avoid distortion or stretching. In addition,
border-radius: 50% is used to make the ICONS round, increasing the
visual appeal of the page.
Fig.2.23 Icon circle
There is also the challenge of designing the form, which is not
only concise and intuitive, but also conforms to the user's
interaction habits. For example, input fields need to support
focus states (such as input:focus) so that users can see clear
prompts when filling out forms.
Workaround: Ensure that users can quickly recognize each input by
adding the appropriate style to the form input fields and labels.
At the same time, the buttons and input fields of the form change
the border color in the focus state, making the user's actions
more explicit.
Fig.2.23 Form effect
After everything is done, I need to optimize the details, such as
the size of buttons, input fields, etc., margins, spacing, etc.,
which need to be precisely controlled to ensure that the page can
be comfortably navigated on all devices.
By using proper padding, margin, gap and other properties to
control the white space of the page, ensure that the spacing
between different content is just right, so that the page does not
appear crowded or too loose.
What We Do
Fig.2.14 Final What We Do Page layout
Fig.2.15 Part HTML and CSS process Page 5
The biggest problem I had with this page of coding was that I couldn't
restore the sketches I created in Figma. I've racked my brain trying
to figure out how to put these four parts together. In the end, they
compromised and had to be separated.
In order to make them look good apart, I tried to align them as much
as possible. It took almost all my patience to make them look
comfortable (except for making the adaptive).
Fig.2.16 My prototype (top) ＆ My Code (bottom)
Happily, I didn't need to edit the header and footer any more, just
copy the css and HTML I had edited in the Home page and make a few
changes.
So then I created a separate file for the unmodified css code called
common.css. This can effectively improve my efficiency.
Donate
Fig.2.17 Final Donate Page layout
Fig.2.18 Part HTML and CSS process Page 6
My challenge is still responsive layout design.
How to make complex layouts such as donation forms, supporter lists,
and campaign descriptions look good on small screen devices. I use
flex-direction: column; And grid-template-columns: 1fr; Rearrange the
layout. At the same time, reduce the image size and adjust the spacing
to avoid content overflow.
Fig.2.19 Part of process in the css
I had some challenges in the forms section, both keeping the text
description centered and keeping the button area aligned with the
overall layout.
Later, I adjusted the alignment of each section by combining the
text-align property with the margin.
In terms of interactivity, I set the button hover effect and slight
box-shadow dynamic effect to attract the user's attention.
Conclusion
In HTML, I use div and section tags to divide content areas, such as
donation-container, campaign-info, etc. class naming ensures that
component naming is meaningful and easy to manage.
In CSS, I use flexbox and grid for responsive layout. Define layout
rules for each section, such as form layout, supporter list, and so
on.
Ensure that the interface design is elegant and visually appealing to
users to donate.
Add dynamic effects to buttons (such as color and shadow changes in
the hover state) to improve user interaction.
In responsive development, I use media Query (@media) to adapt to
different screen sizes to make sure the page looks good on desktop,
tablet, and mobile. Optimize component widths, spacing, and font sizes
under different screens, such as changing form layouts from multiple
columns to single columns.
For the interaction effect, the button display part provides
interactive feedback through hover and transition to improve user
experience.
* All reports contain approximately 1500 words.
6. Submission
After everything was done, I submitted my website on netlify.
Fig.2.20 Submission
Final Website Outcome
Final Home Page layout
Final Contact Us layout
Final What We Do Page layout
Final Donate Page layout
Link to my website redesign：https://marine-conservation-redesign.netlify.app/
REFLECTION
Experience
This course was actually a big challenge for me, because I had never been exposed to the knowledge of code. I have to make sure I stay focused both in class and while writing code.
When developing the contacts page in Final task, I was faced with the challenge of ensuring proper alignment between different screen sizes. Using flexbox and media queries helped manage layout, but I had to adjust typography, spacing, and element positioning for different devices. Testing on multiple screen sizes is key to ensuring that the design is functional and visually appealing.
Observations
I learned that flexibility in a design is important, but fine-tuning elements such as graphics, buttons, and spacing is essential to a smooth adaptation. Burger menus and touch targets also need to be optimized for the phone screen to improve ease of use.
Findings
Responsive design requires constant testing and iteration. Focusing on mobile-first design makes it easier to scale up. A simplified layout leads to a better user experience, ensuring that content is easy to navigate and read on all devices.
Comments
Post a Comment