Interactive Design / Project 2
3.4.2023 - 22.5.2023 (Week 6 - Week )
Loke Yan Ling / 0344602
Interactive Design / Bachelor of Design in Creative Media
Project 2
Instructions
Instruction
The objective of this assignment is to transform the static prototype from Project 1 into a fully functional and interactive web page. Knowledge of web layout class should applied into Project 2 to create a working website that closely aligns with original prototype. Review the static prototype from Project 1 and 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.
Project 2 - Working Webpage
Fig 1.1 Landing Page Prototype
This project has to build up a webpage which refer back to Project 1 - Landing Page Prototype.Its quite challenging to build a responsive webpage although we did some exercise before.
Fig 1.2 Starting
Fig 1.3 Navigation
Adding the meta, viewport in html will let the webpage being responsive, but the element include, the element should edit respectively to be responsive. The css is linked to html file in Adobe Dreamweaver, so that the css could be edit in the same file. All different section is named in different and unique id, such as the navigation bar is named in "Home".
My navigation arrangement is different with the tutorial provided in W3 school website. After several research and trying, finally finding a way to seperate the button and the navigation bar apart. By using style float:right applied directly in html having the significance result that match the prototype, however the sequence have to be tilted in html because it appear from right to left.
In navigation bar, the list-style-type is applied to none then it wont appear the listing style in the navigation bar. Then, each of them are applied in link (a) and display in block with a padding of 12px and 24px. This padding is responsive but in style float does not. The hover effect is applied to all links and buttons with CSS applied separately. The button mainly used in this webpage are red and green and they also have edit in css separately to perform different color.
Fig 1.3 Landing Page First Page
The first page using display flex in css so that they could appear align, but the box is fixed and if alter the wide of the box, it will also affect the whole composition, it will not in the middle. The title using H1 as heading and added text shadow to make it contrast from the background. Use the <div> wisely would get the results you want. In main page, image and wording are in different <div> while heading are different group with button in wording, so the heading and button are align in right panel.
Fig 1.4 How to Order
In the "How to Order" section, they use the same display as the main page, the only difference being that the main page uses justify-content: centre, while the section uses justify-content: space. The background is applied css with border radius: 10px.
Fig 1.5 Category
In this section, icons are really hard to align with the corresponding text, and there will always be a run-on. I'm manually adjusting their position in css, but it might make a difference on small screen displays. And to make sure the icons are the same size, which in turn causes distortion to occur.
Fig 1.6 Section 3 Hiring
The box of email is really frustrated for me, because I want to maintain the email font size and it will cause there is a limited negative space. Thus, I just remain the same position in advance.
Fig 1.7 Section 3 Navigation Bar
Fig 1.8 Section 3 Offer Price Card
The navigation bar in this section using the same features with the homepage navigation bar with floating style. The offer price, grocery information using hierarchy by different font size. The offer card using display inline block without applying the justify content, and it will align closely with given space.
Fig 1.9 Benefits and Footer
The benefits section using display flex and justify-content: center. This section is the most successful part because it is responsive in any device. The box-shadow is applied to every page except for this section box, to prevent taking too much contrast and attention from the heading.
Fig 1.10 Scroll to Top Button
To having the function of scroll to the top, I found that using script much easier and effective. After submitting the project, Mr Shamsul noticed that the fonts I had used in the project were fonts that already existed on my computer, which would result in others viewing the page with the computer's default font rather than the one I had set, as some computers don't have this font. Thus, I have change the font to Open Sans from google.
Scroll to top tutorial is provided in this website:
Google Font:
Fig 1.11 CSS file
Final Working Webpage
Fig Final Project 2, PDF
Comments
Post a Comment