Interactive Design / Project 1

 

14.9.2021 - 5.10.2021  (Week 4 - Week 7)
Lew Se Win / 0347637 / Bachelor of Design (Hons) in Creative Media
Interactive Design
Project 1 / Landing Page Design

---

LECTURES 

Week 4

Cascading Style Sheets (CSS)

• HTML : structure & content
• CSS : layouts, formatting & presentation 
• JavaScript: animation 

Why CSS?

• make website flexible
  - CSS zen Garden
  - change stylesheet to change design

• Easier to maintain
  - cleaner HTML
  - separate styles from HTML tags

Separate Content from Form

• Content

        <p class=“header”>My First Header</p>
        <p class=“info”>My Information 1 goes here</p>
        <p class=“header”>My Second Header</p>
        <p class=“info”>Different Information goes here</p>

• Form or Style

        .header { font-size:14px;}
        .info { font-family: verdana;
        font-color: blue;
        font-size: 12px; }

2 aspects to add style to a web page via CSS

•  specify - " decoration"
   - text color > color
  - background color > background-color
• selector will tell browser to apply the declare
• can be selected more parts using comma

Naming HTML elements

• “ID”
• “class names”

Stylesheet

1. Internal stylesheet
2. External stylesheet
3. Inline style

Week 5

Adobe Dreamweaver? 

• website building software
• first developed by Macromedia

Main Features

• Easy to Use Visual Interface
• Built-in Code Editor
• Part of the Creative Cloud Suite

Week 6

Website Layout and Structure

Website’s Structure

• Start with rough outline
  - Got your keywords
  - Defined your audience
  - Building content
• Consider monitor sizes
• Consider user experience
• Consider browsers
• Find a hosting service

Site Map

• Start with home page
  - Answer What Should I do?
  - What is your conversion goal?
• How many themes or categories do you have? Theme grouping (shoes)
  - running shoe section
  - skate shoes section
  - hiking boots section
  - cleats section
• Link from home page down
  - Don’t link every page from every other page
  - Waters down your themes (socks in shoe section)
  - Streamlines SEO
  - Better user experience

Wireframe

• Keep loose
• Get all pages in order
• Print out and hang on wall
• Get some feedback
• Adjust and fill in the holes
• User experience

Web Hosting

• Price
• Domain Purchases
• Reliability
• Disk space and bandwidth
• Features:
  - Site builders
  - Databases
  - Multiple domains
  - Tracking tools
• Support

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1VYGSMqMV8QFEDjgV4ZSIuxRfycAi5CbL/preview" width="640" height="480" allow="autoplay"></iframe>

Landing Page Wireframe 

We are required required to create a static landing page of a microsite from topic of our choice. We also need to submit a sketch of the landing page. 

Figure 5.1 Landing Page Wireframe 1, 21.9.2021

Figure 5.2 Landing Page Wireframe 2, 21.9.2021

Landing Page Design

Figure 6.1 Landing Page Design #1, 1.10.2021

Figure 6.2 Landing Page Design #2, 1.10.2021

Figure 6.3 Landing Page First Outcome, 5.10.2021

Following that, I discovered that my landing page contains far too much information. As a result, I decided to redesign my landing page. 

Figure 6.4 Final Landing Page Design, 5.10.2021

Figure 6.5 Final Landing Page Design in PDF, 5.10.2021

---

FEEDBACK

Week 6

Mr. Tarmizi: You managed to portray the concept and layout of your proposed landing page through the submitted sketch. 

Week 7
Mr. Tarmizi: Looking good! My only comments maybe you can improve on typography usage, and apply some variation of it. 

---

REFLECTION

At first, I was confused by the term "landing page." Fortunately, I comprehend the situation and am able to alter my understanding and design.