Interactive Design - Project 1: Landing Page Design

17/5/2022 - 31/5/2022 (Week 8 - Week 10)

Sasilvia Cheong Pei Hoong / 0345031 / Bachelors of Design in Creative Media
Interactive Design
Project 1: Landing Page Design

---

INSTRUCTIONS

---

Project 1

We were tasked to produce 5 wireframe sketches for our landing page design and come up with a topic of our choice along with it. My topic idea is "Arts and crafts store with learning services" whereas the name states, that it will be an arts and crafts store that will be selling supplies and provide learning services related to arts and crafts like painting, pottery, and needlework.

Sketches

Fig. 1.1 Sketches (21/5/2022)

After listening to the general feedback from Mr. Shamsul that it would be better if we were to write in detail about what call to action and details that our landing page has. So I did another sketch with the layout that I preferred and stated the details. It actually helped me plan better as it gives me a guide of what I need to do next.

Fig. 1.2 More detailed Sketch (29/5/2022)

Mood board

For my mood board, I first started by picking the name of my arts and crafts store which I came up with "Techne Arts and Crafts" the term "Techne" is actually "art" in Greek. Through that, I wanted my colours to be more calming and soothing to the eye.

Fig. 2.1 Colour Palette (29/5/2022)

Visual Reference (from existing websites)

1. https://craftla.co/contact/

Fig. 2.2 CRAFT La website #1 (29/5/2022)

Fig. 2.3 CRAFT La website #2 (29/5/2022)

Fig. 2.4 CRAFT La website #3 (29/5/2022)

2. https://www.domestika.org/en

Fig. 2.5 Domestika website #1 (29/5/2022)

Fig. 2.6 Domestika website #2 (29/5/2022)

Landing page design

After doing the detailed sketches and planning, I went to Illustrator to do the layout in black and white before using colour.

The logo I used was created by me from one of the projects in Advanced Typography.

Fig. 3.1 Logo used (29/5/2022)

Fig. 3.2 Landing frame draft (29/5/2022)

When placing the images, colours and context, I found that some parts are not that balance and need some tweaking so I just adjusted as I added everything in.

Fig. 3.3 Landing frame (29/5/2022)

Image source: https://www.pexels.com/

After receiving feedback from Mr. Shamsul, I added a background image on the main landing page, switched positions for the logo and name, and added a call to action button "Join our classes here!" at the bottom of the name. Then I took away the excessive amounts of borders I have on my landing page. I also added an image of the location of the arts and crafts center on google maps on the contact page. I also adjusted the size of the icons to make them smaller and reduce the spacing between each piece of information. The font size was also reduced and changed into Signika Negative from Google Fonts. For the final touches, I switched the logo on the header to the word "TECHNE" instead since I already have the big logo placed in the middle. I also added an image to the blue background to add texture. Adjusted the image size in about us to fit half of the page so that it looks more balanced and neat. I also changed the icon and font colour into a darker blue as the image in the background of the main page made it hard to look at the words since it was too light. After that, I adjusted everything according to the margins.

Fig. 3.3 Colour palette updated (3/6/2022)

Fig. 3.4 Margins and guides (3/6/2022)

Fig. 3.5 Landing page design updated (3/6/2022)

Final Landing Page Design

Fig. 4.1  Final Landing Page Design JPG (3/6/2022)

Fig. 4.2  Final Landing Page Design PDF (3/6/2022)

Fig. 4.3  Final Landing Page Design Presentation Slides PDF (3/6/2022)

---

FEEDBACK

Week 9 (24/5/2022)- 

General Feedback: 

When doing your wireframe sketches it will be best if there are descriptions of what your call of action is and other details. So that in the future when working in a team, other people will know what you are trying to show in your sketch. 

Specific Feedback:

The sketches are very organized even though it looks simple the idea is easy to be interpreted because of how neat it is. Continue with the mood board.

Week 10 (31/5/2022)- 

General Feedback: 

Make sure to have margins and add the copyright at the footer.

Specific Feedback:

For the main landing page add a background image of a student doing an activity in class. Then move the logo to the left and the name to the right where the call of action and be on the bottom of the name. Prevent using way too many borders in the landing page. Make the font size smaller and have lesser spacing between the information. On the contacts page, an image of the map can be added to show the location of the place. Make the icon size smaller.

---

REFLECTIONS

This project was pretty fun as I was able to have the freedom to pick out my own topic and design a landing page. Everything came out how I wanted it to be. The only difficulty that I encountered was searching for images that suited the style and topic that I was going for. I learned that margins and guides are really important to make a balanced layout. Colour choice is also the key to the visuals and it can create a huge impact on how the design would look.