Interactive Design Project 2 / Working Landing Page

21.10.2022 - 28.10.2022 (Week 8 - Week 9)

Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media

Interactive Design

Project 2 / Working Landing Page

---

INSTRUCTION

Landing Page Design

This is an ongoing project reflected in the following 2 projects.

INTERACTIVE DESIGN / EXERCISES

PROJECT 1 / LANDING PAGE DESIGN

Fig.1-1: Final Visual Design

Over the course, we have completed the following.

• Determination of the LP to be produced
• Wireframing
• Design analysis is of an existing website (Exercise 3)
• Final design

In Project 2, code a website that actually works in web browsers based on Fig.1-1 above.

Conception

This is an attempt to create an English version of the hypothetical corporate website for a company I used to work for. Some information about the products and sales talk is quoted, but all designs and programs are original to me for the assignment.

Coding Process

1. Header & Navigation Menu

Fig.1-2: Header & Menu (PC)

Fig.1-3: Header & Menu (SP)

A header menu is one of the most necessary parts of applying responsiveness in web design. To enhance usability, the SP ver. uses a hamburger menu.

Fig.1-4: Header HTML

Fig.1-5: Media Query

Both menus are actually in place and implemented by using a media query to hide one of them depending on the display width.

2. Button & Font Setting

Fig.1-6: H1/H2 Font Setting & Button with Arrow Icon

Fonts and decorations for catchphrases, headline tags, and buttons were set.

Fig.1-7: Google Font Link

Fig.1-8: Arrow Icon CSS

An arrow is drawn at the end of the string in the button using the above CSS code. Some other embellishments, such as underlining using the Border Bottom Solid, are also used.

3. Column Design

Fig.1-9: Column

The Bootstrap class "col" is used to set up a column divided into 12 sections. You can set the ratio to 4:8, 6:6, etc. Also, breakpoints can be easily specified by setting up classes such as sm, md, and lg in the class tag.

4. Slider Area

Fig.1-10: Slider

Fig.1-11: Slider Code

I first tried linking the js but it conflicted with the bootstrap program and did not work properly. So I researched and implemented a way to represent the slider using only CSS.

Since the screen width is different for the PC and SP versions, the number of items lined up horizontally is changed to 6 or 2 to make it readable.

5. Line (Border)

Fig.1-12: Line PC ver.

Fig.1-13: Line SP ver.

A border solid is set on the div to arc the corners. 2 columns are set in it and items are placed there. The line width to the right of the title is not fixed and is set to reach the right edge of the div tag.

6. Contact Form

Fig.1-14: Contact Form & Footer

Fig.1-15: Modal Window

The contact form is created using a bootstrap template. In addition, a modal window is set up to confirm submission.

7. Footer, Footer Menu & Banner Area

Fig.1-15: No Footer Menu in SP

A short description of the company in the footer and a banner area are created in columns.

The most significant feature of the footer area is that the footer menu disappears only in the SP version. This is set by a media query. Because in the SP version, the header menu (hamburger menu) always tracks to the top of the screen, so there is no necessity for the footer menu.

Final Outcome

Project 2 Working Landing Page

Fig.1-16: Screen Shot of my LP Design(25/11/2022)

---

REFLECTIONS

Experiences

Throughout this project, I have been researching and working on my own to implement what I wanted to create. Because of this, I feel that I gained a deeper understanding of functions and code not only that I did learn in class.

Observation

Learn the fundamentals of coding, and while you used to write all the code yourself, you can save an overwhelming amount of man-hours by using bootstrapping. However, one problem was that the styles preconfigured in Bootstrap often conflicted with the styles I wanted to set myself and did not work correctly. This can sometimes be solved by inserting "! important" However, I still did not understand the internal priorities and could not always solve the problem.

Findings

Basically, in website coding, I have found that there are many different ways to write a website, even to implement a certain design. However, while there are correct solutions, there are many incorrect solutions. Code that is too complex is more likely to cause defects, and even if there are no defects, it may take longer to display the code.