Interactive Design - Project 2: Working Web Page
22.5.2023 - 11.6.2023 (Week 8 - Week 10)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Interactive Design
Project 2: Working Web Page
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1kLhiKZEQ-jplM2Vq45nSdwIUaH8Jyveo/preview"
width="640" height="480" allow="autoplay"></iframe>
<iframe
src="https://drive.google.com/file/d/1kLhiKZEQ-jplM2Vq45nSdwIUaH8Jyveo/preview"
width="640" height="480" allow="autoplay"></iframe>
PROJECT 2
Working Web Page
For this project 2, we are tasked to transform our static prototype from
previous project 1 into a fully functional and interactive web page. We
need to apply our knowledge of web layout class to create a working
website that closely aligns with our original prototype.
Instructions:
- Review our static prototype from Project 1 & analyze its layout, typography, color scheme, and imagery.
- Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
- Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
- Upload the file in Netlify and submit the link on google classroom. Update all of our processes and documents in our e-portfolio.
1. Prototype
To begin, I started by referring back to my previous project 1 and
analyzing its layout design. Next, I arranged and downloaded all the
images and icons used on the web page accordingly. Then, I created a
folder and named it "html," "css," and "images" to organize the files
for the later development of the web page.
Click
HERE
to view project 1: landing page design prototype
Fig. 1.1 - Landing Page Design Prototype
|
| Fig. 1.2 - Downloaded images and icons in Figma |
|
| Fig. 1.3 - Created folder and arranged the file |
2. Creating HTML in Dreamweaver
For the initial phase, I began by creating the content of the working
web page in Adobe Dreamweaver, utilizing HTML as the primary markup
language. The process was remarkably straightforward, mainly because I
could efficiently copy and paste the content directly from Figma,
where I had previously designed the prototype for the web page. This
seamless transfer of content from Figma to Dreamweaver saved me
considerable time and effort, ensuring a smooth start to the
development process.
Simultaneously, while working on the content, I also delved into
planning and crafting the div tags strategically. These div tags
served as containers, enabling me to logically group and organize
various elements of the web page. This preparatory step was crucial in
establishing a solid foundation for the subsequent application of CSS
styles to the different components of the web page. By creating and
structuring the div tags thoughtfully, I aimed to ensure a systematic
and efficient approach to styling the web page later on.
|
| Fig. 2.1 - Process of working on HTML |
I'm using comment tags to name each section makes it easier for me to
refer back to specific parts of the code.
|
| Fig. 2.2 - Comment tags |
3. Designing with CSS in Dreamweaver
After completing the HTML development, I proceeded to embark on the
process of styling the web page using CSS. This phase proved to be the
most time-consuming aspect of the project, as it involved meticulously
crafting each design element, one by one. At times, I found myself
seeking assistance from online resources, tutorials, and guides,
following step-by-step instructions to ensure the creation of visually
appealing and cohesive designs.
|
| Fig. 3.1 - Process of working on CSS |
|
| Fig. 3.2 - Copy the embed link from Google Fonts |
|
| Fig. 3.3 - Refer from online sources (W3schools) |
For the sections that include slider functionality, such as the Popular
Menu, Testimonial, and Shop By Category sections, Mr. Shamsul allowed me
to keep them static and inactive. Implementing the slider function for
these sections would have been challenging and time-consuming, and as a
result, it was decided to leave them in a static state.
|
| Fig. 3.4 - Slider |
4. Create responsive for the web page
For the final phase, I focused on creating a responsive version of the
web page by implementing @media queries in CSS. This crucial step
allowed the web page layout and design to adapt seamlessly to various
screen sizes and devices, enhancing the overall user experience.
To achieve responsiveness, I meticulously edited the CSS styles,
making adjustments one by one based on specific screen sizes. I
employed @media queries, which are CSS rules that target different
viewport dimensions, to apply customized styles for mobile and tablet
views.
For mobile devices, I set the max width to 390px, ensuring that the
web page content would gracefully adjust to fit smaller screens. By
optimizing the layout and font sizes for mobile users, I aimed to
provide a user-friendly and visually appealing experience on
smartphones and other handheld devices.
|
| Fig. 4.1 - Process of adjusting on mobile devices view |
Next, I turned my attention to tablet devices, setting the max width
to 992px. This enabled the web page to smoothly adapt to tablet
screens, providing a seamless browsing experience for users who access
the website on their iPads or Android tablets. By considering the
unique characteristics of tablets, such as touch interactions, I
fine-tuned the CSS styles to ensure optimal usability and readability.
|
| Fig. 4.2 - Process of adjusting on tablet devices view |
Throughout this responsive design process, maintaining a consistent
and coherent visual presentation across different devices was a top
priority. I paid close attention to the alignment of elements, the
spacing, and the overall aesthetics to ensure a polished appearance on
every screen.
|
| Fig. 4.3 - Preview and checking through Chrome |
[New Update after feedback]
However, after publishing the web page, I soon realized that the
responsive view on mobile devices was different from what I had
previewed in Figma while using Google Chrome. This unexpected issue
came as a surprise and raised concerns about the accuracy of the
mobile view.
Upon encountering this discrepancy, I immediately sought advice from
Mr. Shamsul, who suggested an alternative approach for the final
submission. Since achieving an exact match between the Figma preview
and the actual mobile view proved challenging, he proposed recording a
screen capture to demonstrate how the mobile view should look. By
providing a screen recording, I could effectively showcase the
intended design and responsiveness of the web page on mobile devices.
|
| Fig. 4.3 - The actual correct view on mobile |
|
| Fig. 4.4 - The wrong view on mobile (after publishing) |
Fig. 4.5 - Screen recording of Working Landing Page
*New Updated
The issue has been fixed after I added the <meta> tag in all 5 html files.
 |
| Fig. 4.6 - Website preview in mobile |
 |
| Fig. 4.7 - Website preview in tablet |
5. Publish the site on Netlify
Finally, in the last step of the process, I proceeded to upload the
folder to Netlify, a popular web hosting and deployment platform. With
the files securely transferred to the platform, I was ready to take the
final stride towards making the website accessible to the public.
|
| Fig. 5.1 - Publish the site on Netlify |
FINAL OUTCOME
Netlify Submission Link:
Screen recording of Project 2:
Working Landing Page (including testing view on website, tablet, and mobile device)
Working Landing Page (including testing view on website, tablet, and mobile device)
Fig. 6.1 - Final Outcome: Screen recording of Working Landing Page
|
| Fig. 6.2 - Final Outcome - Project 2: Working Landing Page |
Fig. 6.3 - Source code: HTML (PDF)
Fig. 6.2 - Source code: CSS (PDF)
FEEDBACK
Week 11 – 12.6.2023 (Final Outcome of Working Landing Page)
- Overall, look great.
- For the slider, you can just leave it static as that time didn’t introduce to you the bootstrap yet. You can use Bootstrap for your final project.
- For the responsive that have issues, you can just screen recording the view and put it as your blog's final submission.
.jpeg)
Comments
Post a Comment