Interactive Design / Project 2: Working Landing Page

on

  


06.08.2022 - 06.022.2022 (Week 11 - Week 13)
Audrey Gracia Djohari / 0348120
Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Project 2: Working Landing Page

INSTRUCTION



TUTORIAL

WEEK 12:

We were told to open a website called Bootstrap which is a framework for building responsive, mobile-first sites. The website provides templates for creating a starter page.


Figure 1.0: Bootstrap Demo

1) Navbar
  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Figure 1.1: Navbar Codings that I used


Figure 1.2: Navbar Outcome

2) Carousel

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

3) Buttons
Figure 1.3: Button Codings

Bootstrap includes several predefined button styles, each serving its own semantic purpose.

  • Button tags
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering). When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

  • Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.


4) Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Figure 1.14: Card Codings

Figure 1.4: Creating the Cards


PROJECT 2: WORKING LANDING PAGE

Instruction

For Project 1, it is now an open topic, not just to create a microsite. If some of you decided to redesign an existing website, make sure that there is a problem/issue (need to state in your e-portfolio) with the current website.

For images, you are not allowed to use images from any website. All images must be royalty-free and not bound to any copyright. As for the content, you may want to reword or create new content for your project.

Process

1) Creating the Folder
First of all I created a folder for my html, css and image files. I gathered all the images into 1 folder and make sure they were in the right format.

Figure 2.0: HTML & CSS Document, 15.06.2022

Figure 2.1: Images, 15.06.2022

2) Linking
I started the <head> section first in Dreamweaver by writing down the links to the CSS style file, Google font, Bootstrap CSS, and Icon Library.

Figure 2.2: Head section codes

3) Creating the Layout
Then I started doing the codes for the layout from the top according to my Landing Page Design. I made the navbar first using the template from Bootstrap. I find it very helpful as it allows me to create things faster. I edited the color in CSS to match my color palette. Then, I add the background image in HTML. I added the header (tagline), call to action button, smaller headers, paragraphs, cards (from Bootstrap), lastly the footer at the end. What I found most challenging was doing the padding and adjusting the size for the background of each section. It took me about 4 hours to get things right.

Figure 2.3: Final Landing Page Design
 , 09.06.2022

Figure 2.4: Using Dreamweaver

4) Adding the Images
My design relies so much on the images. They help with the whole tone of the site and also the aesthetic and information. I created the main background in HTML, however, for the small brackets and each section's background I made them in CSS. I used royalty-free images that I got from Pexel.

Furthermore, I had a bit of trouble placing the overlaying images (for example the images in Spring Special and About Us section). Mr. Shamsul was right it was tricky and when the screen size was adjusted, the placement might not be as good as I hope them to be. However, I managed to place them quite well. Of course, they're not perfect but I think they're not that bad.

5) Hover Effects & Animation
For the buttons and hyperlinked images, I used hover effects that I found in Google. I changed the hover colors for the buttons into orangered, while for the images I added a sliding or zooming effects. Also, one thing that I am quite proud of is the logo's animation. I managed to animate a rotation for the logo on the navbar.

Animation CSS code:
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}

Things I created using Bootstrap:
  • Navbar
  • Buttons
  • Forms
  • Cards

Below is my first outcome from week 13. I was so happy that all of the contents were arranged according to my design. However, during class I just realized that my whole landing page doesn't work on smaller device. It was very stressful to know the fact that I had to go back to the coding and apply some Bootstrap codes. Eventually, it took me 6 hours more to fix this responsiveness problem. Turns out there's a wrong position code on the body's main container. I also managed to apply the col-lg.

Week 13 Outcome: https://peonyflorist.netlify.app/ (Not Final)

Figure 2.5: Week 13 Landing Page Video (Not Final), 19.06.2022

Overall, this website took me about 15+ hours of work. But it was fun though ^^
Final Outcome

Final Landing Page Link: https://peonyflorist-finallandingpage.netlify.app (Revised)

Figure 3.0: Final HTML Codes, 26.06.2022 (Revised)

Figure 3.1: Final CSS Codes, 26.06.2022 (Revised)

Figure 3.2: Final Landing Page Video (Laptop Screen), 26.06.2022

Figure 3.3: Final Landing Page Video (Phone Screen), 26.06.2022: https://youtube.com/shorts/l8phYBlzlEI 

FEEDBACK

WEEK 12:
*No Class*


WEEK 13:
Specific Feedback
Overall it looks nice. Try using Bootstrap to rearrange your contents. The navbar still doesn't cover the screen, it is probably caused by deleted class name. 

General Feedback
Find the grid section in Bootstrap and use the 'col-lg' so the content becomes responsive.


REFLECTION

Experience
This module taught me the fundamentals of coding and website design. Designing a working landing page in Adobe Dreamweaver was quite difficult as I had a complicated landing page design from Project 1. The reason behind that was that I honestly couldn't really imagine how to make the codes when I created the first design, I just figured it out when I started project 2. It took me approximately 10 hours to finish it, but I could say it was a fun experience even though it was not easy at all. 

Observation
I had some struggles when arranging the overlaying images and the background. It took me some time to figure that one out. But overall, coding was all about exploration and this project surely pushed me to explore more. I observed that figuring out the codes all by myself and managing to have the outcome that I wanted was a huge satisfaction. I have a feeling that UI/UX design is the right path for me. PS. Google and Bootstrap helped me a lot!
  
Findings
I discovered that classes and ids are really useful, they allow me to edit a specific element. I also found that coding must be neatly written as it will make the work more effective and faster. I wasn't quite familiar with codings that's why I struggled a bit in arranging the codes. Some of the exercises I did had a very messy arrangement, but now I've had some improvements after I learned about indentations, comments, and grouping.


FURTHER READING


- HTML & CSS: Design and Build Websites

Figure 4.0: 
 HTML and CSS : Design and Build Websites (2011)
Reference: 
Jon Duckett, (2011), HTML and CSS : Design and Build Websites, Wiley.1st Edition

Chapter 5: Images (pg. 94-105)


1) Choosing Images for Your Site
"Images can be used to set the tone for a site in less time than it takes to read a description. If you do not have photographs to use on your website, there are companies that sell stock images; these are images you pay to use (there is a list of stock photography websites below). Remember that all images are subject to copyright, and you can get in trouble for simply taking photographs from another website. If you have a page that shows several images (such as product photographs or members of a team) then putting them on a simple, consistent background helps them look better as a group."

Stock photos website:

2) Storing Images on Your Site
"As a website grows, keeping images in a separate folder helps you understand how the site is organized. Here you can see an example of the files for a website; all of the images are stored in a folder called images. On a big site you might like to add subfolders inside the images folder. For example, images such as logos and buttons might sit in a folder called interface, product photographs might sit in a page called products, and images related to news might live in a folder called news."

Figure 4.1: Example of Folder for Website

3) Adding Image
  • src : This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site.
  • alt : This provides a text description of the image which describes the image if you cannot see it.
  • title : You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image.

Example:
<img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial that is similar in size to the domestic cat." />

Figure 4.2: Adding Images

Comments

Post a Comment