INTERACTIVE DESIGN//PROJECT 1: LANDING PAGE

 

21.09.2021 -05.10.2021 (Week 5-Week 7)

Chaw Zhi Ting (0347344) 
Bachelor of Design (Hons) Creative Media
Interactive Design // Project 1:Landing Page

---

LECTURES :

WEEK 5// Introduction of Dreamweaver

Website building software that first developed by Macromedia and was acquired by Adobe in 2005
Adobe Creative Cloud Suite
Software that allows us to build design and publish websites. It's a native application

Main Feature:

• Easy to use visual interface
• Built-in Code Editor
• Part of Creative Cloud Suite

Standard Workspace
-Bootstrap templates (responsive design - multiple (collection of CSS & JavaScript )

WEEK 6// Website Layout & Structure

Planning Your Website's Structure

1. Start with a rough outline

a. Got your keyword

b. Defined your audience

c. Building content

Exp: grocery shopping (ladies, women)

2. Consider :

a. monitor sizes (pc, phone)

b. user experience(font sizes, colour, navigation)

c.  browsers (exp: google chrome, safari, firefox)

3. Find a hosting service

https://960.gs/

Bootstrap: a collection of CSS and JavaScript responsive websites ( one code for both pc and phone) - Toggle 

1. Sitemap

Figure 1.0 Sitemap, 28th Sept 2021

2. Wireframes

a. Keep loose

b. Get all pages in order

c. Print out and hang on the wall

d. Get feedbacks

e. Adjust and fill in the holes

f. User experience

3. Simple, clean easy to navigate

a. Header

b. Tone down colour usage

c. Negative space (breathing space)

d. Font usage (not more than 3 fonts)

4. Web Hosting 

a. Price

b. Domain purchases (.com.my)

c. Reliability (serval)

d. Disk space and bandwidth

e. Features: Site builders, databases, multiple domains, tracking tools

f. Support

g. Exp: Malaysia Top Hosting Provider: exabytes, shinjiru, cloudbase

5. Cloud Service Provider: Amazon Web Service, Microsoft Azure, Google Cloud Platform

Chart (piechart)

Fontawesome (icon)

The difference between cloud and hosted services is the location of the servers running the service. “Hosted services” is the general term for technology services using infrastructure located outside the service receiver’s physical location. This can be at the vendor’s physical location or can be hosted on the cloud. “Cloud services” refers to a specific subset of hosted services that utilize a “cloud” vendor.

---

INSTRUCTIONS:

Project 1: Landing Page Design

For this project, we are assigned to come out with a wireframe for a landing page and design it. This is a great time for us to learn to construct a landing page by looking into details of the icon, the structure and the placement. This is a fantastic chance for me to create a personal/portfolio landing page to display my design work for future use.

Figure 1.0 Landing page sketch, 26th Sept 2021

Figure 1.1 Landing page sketch, 26th Sept 2021

Figure 1.2 Landing page Design #1, 26th Sept 2021

Figure 1.3 Landing page Design #2, 26th Sept 2021

Figure 1.4 Landing page Design #2, 26th Sept 2021

Figure 1.5 Design services icons, 26th Sept 2021

Figure 1.6 Feature work gallery, 26th Sept 2021

Figure 1.7 Final Landing Page Design, 1st Oct 2021

FINAL SUBMISSION:

Figure 1.4 Final Landing Page Design, 1st Oct 2021

---

FEEDBACK:

Week 5:  Mr.Tarmizi's feedback "You managed to portray the concept of your proposed landing page through the submitted sketch, and I’m looking forward to your landing page design submission next week."

---

REFLECTION:

It was a fun journey to learn about all the theory about codes, CSS, javascript. Although we have not come to the stage to code the landing page, I enjoy the process of designing the layout.