Interactive Design / Project 1: Landing Page Design

on

    


05.18.2022 - 06.08.2022 (Week 8 - Week 11)
Audrey Gracia Djohari / 0348120
Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Project 1: Landing Page Design

INSTRUCTION



PROJECT 1: LANDING PAGE DESIGN

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.


Client Profile

Established in 2020, Peony Florist is an imaginary flower shop that provides various types of flower arrangements, arranged beautifully in Korean style. From time to time, they managed to give their customer satisfaction and other community professional experience in their field. They sell flower bouquets, vase arrangements, flower frames, fresh-cut flowers, and flower decorations.

The name "Peony" itself is a flowering plant in the genus Paeonia, the only genus in the family Paeoniaceae. Peonies are native to Asia, Europe, and Western North America. Peony symbolizes love, honor, happiness wealth, romance, and beauty, the peony is traditionally given on special occasions as an expression of goodwill, best wishes, and joy.
  • Topic Chose: Flower Shop
  • Name of Company: Peony Florist
  • The 4 Buttons : Home, About Us, Shop, Contact
- Home: Direct to main website home page.
- About Us: Direct to the company profile information.
- Shop: Direct to the products where user can add them to cart.
- Contact: Direct to the contact section where user can find the company's social media and register for newsletter.
  • Color Description: Elegant, radiates good mood, girly, pastel, peachy
  • Target Market: People who want to buy a flower for Birthday, Anniversary, Valentine's Day, etc.
Logo

"Peony Florist" is the name of the company. The logo is placed on the header & footer so it will be easily seen by the user anytime.
Figure 1.0: Company Logo, 31.06.2022

Visual Research

To kick-start this project, I did some visual research on Pinterest to gain more knowledge in designing a landing page. I found these web designs appealing because the placement of the elements isn't boring at all. They use the grids maximally and manage to create a neatly placed and aesthetically looking page. I also like the color palette and I think they suit my company profile which is a flower bussiness.


Figure 1.1-1.4: Visual Research, Pinterest


Wireframe Sketches

During week 9, Mr. Shamsul told us to show our sketches of the landing page design. I created 5 sketches using Adobe Illustrator.

In Sketch #1, I experimented with the color scheme. Furthermore, I decided to make the main page split into 2: the company tagline and the main photo, as well as the tagline. I also planned to make the logo rotate in the middle of the main page. Below the main page, there are photos of the highlighted special products. The purpose of this section is to promote a particular product. Next, there are circles that show categories of the company's products such as bouquets, round boxes, vases, and flower frames.

Figure 1.5: Wireframe Sketch #1

In Sketch #2 and #3, I experimented with the placements of the sections (special product, shop, contact, etc.). I also added a navigation bar in Sketch #3 which consists of 'home', 'about us', 'shop', and 'contact'. 

Figure 1.6-1.7: Wireframe Sketch #2 & #3

In Sketch #4, I rearranged the sections (special product, shop, contact, etc.). I also tried putting the navigation at the bottom but unfortunately it doesn't seem to work. However, I like the design of the shopping section where it shows 3 product recommendations. 

Figure 1.8: Wireframe Sketch #4

Last but not least, in Sketch #5, I put back the navigation bar to the top, it consists of 'home', 'about us', 'shop', and 'contact'. I also redesign the call to the action bar. I added more photos to make the design more lively. I eventually chose sketch #5 as my final sketch and I decided to continue improving this sketch.

Figure 1.9: Wireframe Sketch #5

Digitization Process

Fonts: *All fonts are downloaded from Google Fonts
  • Yeseva One Regular - titles
  • Futura - paragraphs & call to action
Figure 1.10: Fonts that I used

Color Scheme: 
  • FFFFFF (White) - background
  • FFC3A5 (Pale Salmon) - column & row
  • E9DAC9 (Sandy Beige) - column & row
  • 684007 (Dark Brown) - icons & text
Figure 1.11: Color Palette
I designed all the elements (wireframe, company logo, buttons, etc.). Except for the pictures and social media icons for the project page, they were retrieved from Pexel royalty-free.
Figure 1.12: Designing in Adobe Illustrator

Final Outcome

Figure 1.13: Final Landing Page Design
, 09.06.2022


Figure 1.14: Final Landing Page Design Presentation, 09.06.2022


FEEDBACK

WEEK 8:
*Independent Learning Week*


WEEK 9:
Specific Feedback
Mr. Shamsul reminded me that every website needs a navigation section. He also said it is better to avoid overlapping elements because the position tends to change when it becomes a website. The rest of the sketches are okay but Mr. Shamsul told me to put the navigation at the top and stick it so it stays when the user scrolls. He said he likes the font and color, he said there's no problem with it. 

General Feedback
Be consistent with the fonts, the grids, alignment, and button design.


WEEK 10:
Specific Feedback
Here are the things that Mr. Shamsul told me to revise: Add a call to action on the welcoming page, add a logo on the footer, do not overlap the images, and be consistent with the buttons. Lastly, make the 'contact us' section more specific with an email address, etc.


REFLECTION

Experience
Honestly, I am quite surprised that I really enjoyed designing a web page. It is not easy to learn Dreamweaver but I have been looking forward to learn coding since a long time ago. It's fun to learn something new.

Observation
I observed that design principles, typography, and color selection is very important in designing a landing page. I also learned that it's important to check if the design is well presented in a full screen mode and also in a phone mode.
 
Findings
I learned about what is a landing page and now I know the things needed in a page, such as navigation, company logo (very crucial),  header & footer, home button, etc. 


FURTHER READING


- HTML & CSS: Design and Build Websites

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

Chapter 15: Layout (pg. 358-376)

CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box.

Block-level boxes start on a new line and act as the main building blocks of any layout, while inline boxes flow between surrounding text. You can control how much space each box takes up by setting the width of the boxes (and sometimes the height, too). To separate boxes, you can use borders, margins, padding, and background colors.

Figure 2.1: 
Building Blocks, pg. 361

If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.

It is common to group a number of elements together inside a <div> (or other block-level) element. For example, you might group together all of the elements that form the header of a site (such as the logo and the main navigation). The <div> element that contains this group of elements is then referred to as the containing element.

Figure 2.2: 
Containing Elements, pg. 362



Comments

Post a Comment