Interactive Design : Project 01 : Landing Page Design

17/05/2022 - 07/06/2022 / Week 08 - Week 11

Interactive Design GCD60904

NAME: Sea Hirayama

I.D: 0347596

COURSE: Bachelor of Design in Creative Media / Taylor's Design School

---

●Instructions

---

●Lectures

Week 08 :

No lecture for this week.

Week 09 :

We got some feedbacks for project 1 and 2 from Mr Shamsul. Also we had brief of project 2.

Week 10 :

Also this week, we got feedback for this task. And this week has submission due. But also I tried to know about what is a prototype in web design as well.

– What is a prototype in web design?

Prototypes are models that are used to test their functionality.

Prototypes are 'prototypes' of websites, apps, and other digital products that are primarily used to test usability. Prototypes don't require coding and may be made with just paper and tools, making it simple to spot problems and correct them.

Prototypes are used for user evaluation, such as usability tests*, as well as internal validation activities, such as reconciling the design and functioning during the creation process.

– Differences from wireframes and mock-ups

A wireframe is an information design that expresses "where, what, and how to put," whereas a mock-up is the final visual design created after the information design has been completed. A prototype, on the other hand, is a test product to which dynamic and other aspects have been added in preparation for the final product.

Prototyping, on the other hand, does not seek to develop a perfect prototype from the start. Prototypes are generated multiple times in various phases with the goal of bringing the information design and design to fruition, and they are assessed and improved repeatedly from the information design phase onwards.

– How to create a prototype

Depending on the stage of website development, prototypes differ in terms of function and the level of specificity of the pieces that must be checked. This article will concentrate on the stages of information design (wireframe) and visual/interaction design (mock-up), which are where prototypes are frequently utilised.

Prototype information design (wireframes)

A simple prototype (paper prototype) is commonly constructed by hand on paper during the information design stage. This level of prototyping is known as 'low-fidelity' prototyping, in which the design is less definite and may be generated without any coding or tool experience as long as the wireframe and concept have been determined. When a person being assessed hits a button on a website, the person doing the test is supplied with a page to which they are sent, and the behaviour within the page is expressed manually in paper prototypes. Low-fidelity prototypes have the advantage of being able to be built and adjusted quickly. It swiftly determines whether 'users can perform as expected within the website,' including leads, navigation placements, and wireframe layouts.

Visual design (mock-up) prototypes

The appearance and operability (interaction design) of the design finalised in the mock-up are evaluated during the visual design phase. We figure out what's wrong by putting the system through its paces with friends and family.

To allow users to actually run the system, prototyping tools are employed. There are a variety of tools available, but we recommend Adobe XD, Figma, and InVision, which are all free and extensively used around the world.

Beginners may struggle with the tools at first, but once you've mastered them, you may evaluate them in the context of the final work. It's very simple to assess interactive designs.

---

●Exercises

Week 08 :

We are required to think about the design for project 1.

– The instruction

Landing Page Design
A landing page is a distinct page on your website that's built for one single conversion objective. A landing page should be designed, written and developed with one business goal in mind. You are required to create a static landing page of a microsite from any topic of your choice. Please do your own research about microsite.

Please indicate the topic of your choice by this week in the comment section and start to do the wireframe/sketches of the landing page. You need to show the sketches by next week during class. A minimum of 5 sketches are required.

So for this task, I selected the topic, Online Secondhand store (Vintage shop/Old-clothes store). The store sells vintage goods, import goods and original items. Also, sometimes it sells some artist goods and do collaborate with artist. That is why the website can show a lot of inspiration to fashionable people and the people who is interested in art culture.

First of all, I tried to draw some sketches to come up with idea. After I do it, I did it with Adobe Illustrator to see the design clearly. During I create web design idea sketches, I came up with a few design that is why the design got changed finally.

1.1-3 Idea sketch (13/05/2022)

1.4 The process of all (13/05/2022)

1.5 Home page, header(13/05/2022)

1.6 Home page, header with clicking the item(13/05/2022)

1.7 Home page, styling part(13/05/2022)

1.8 Home page, items part(13/05/2022)

1.9 Home page, news part(13/05/2022)

1.10 Home page, contact form part(13/05/2022)

After I create the home page, I just focused on the details of the pages.

1.11 Styling page(13/05/2022)

1.12 After click the one Styling(13/05/2022)

1.13 Items page(13/05/2022)

1.14 After click the one item(13/05/2022)

Also I just tried to create the logo for this website. – "ALTER EGO"

1.15 Logo idea sketch(13/05/2022)

Week 09 :

After I got some feedbacks, I tried to re-create the design. I just focused on the design which I'll be able to do it in html and css. Also I designed the logo of store,"ALTER EGO",

2.1 Home page, header(25/05/2022)

2.2 Home page, news part(25/05/2022)

2.3 Home page, styling part(25/05/2022)

2.4 Home page, items part(25/05/2022)

2.5 Home page, contact form part(25/05/2022)

I tried to re-create the logo design as well.

2.6 Logo idea sketch(25/05/2022)

2.7 Final design for idea sketch(25/05/2022)

Week 10 :

So after I got feedback, Mr Shamsul said it is kind of too simple design that is why I just tried to think about the design again and re-created. First, I designed it with white color background and some simple elements for kind of unique design, but I thought that it's not interesting to see it. So I tried to think about the store concept and details again.

3.1 The process of re-designing home page(31/05/2022)

I have annoyed to decide which font for menu bar, just because I wanted to express like psychedelic, hippy mood. So I decided to use the fonts, "Nova Script / Regular" which is downloaded from Google Fonts.

3.2 The process of thinking the fonts for menu part(31/05/2022)

Also, I tried to create some collage, images for this website because I couldn't find some images which I wanted.

3.3 The images which I took for news parts(31/05/2022)

Finally, I focused on the register section with Bootstrap example.

https://getbootstrap.com/

3.4 The process of creating sign up form(31/05/2022)

I tried to create the logo design and illustration for decorate web site as well. I really liked it so I would use this in future if I start own brand.....

3.5 The logo design "ALTER EGO"(31/05/2022)

3.6 The Illustration for "ALTER EGO" with only stroke(31/05/2022)

3.7 The Illustration for "ALTER EGO" with color(31/05/2022)

Finally, for this is final design. After I finish to design website, landing page design, I prepared the slides for it as well.

3.8 The final design for landing page design project(31/05/2022)

The final design / PDF(31/05/2022)

The slides for explaining this design / PDF(31/05/2022)

After week10, I just changed my mind to do with shop website. I decided to do art e-portfolio in this project as well. Just because I wanted to create own art website. So I tried to re-design the landing page design.

The final design / PNG(08/06/2022)

The final design / PDF(08/06/2022)

The Illustration for slide / PDF(08/06/2022)

The slides for explaining this design / PDF(08/06/2022)

---

●Final design

The final design / PNG(08/06/2022)

The final design / PDF(08/06/2022)

The Illustration for slide / PDF(08/06/2022)

The slides for explaining this design / PDF(08/06/2022)

---

●Feedback

Week 09 :

General feedback

We got some feedbacks for project 1, idea sketch from Mr Shamsul. After that we required to focuse on it more and more with clear idea.

Specific feedback

For my web design idea, Mr Shamsul said that I'll not be able to create the navi part because it seemed difficult and complex. Also I have to create this design as template to compose it clearly.

Week 10 :

General feedback

For this week, we got feedbacks for this project.

Specific feedback

For my website design is too simple. I can create it more unique as well. Also I can add the details for footer from Taylor's uni website. To add, it's needed to add "sign up/register" part, not only log in.

Week 11 :

General feedback

For this week, we got the lecture with using bootstrap to create website easy and simply. 

Specific feedback

No specific feedback in this week.

---

●Reflections

>Experience

From this opportunity, I could learn how difficult to think about the composition of website within my ability. I just felt that I need to learn about HTML and CSS more and more even if I want to design it complex, difficult. Also it's first time for me to think about the pages of website. It's kind of difficult for me to think about which pages is necessary for the website. I just a bit tired these week as well haha

>Observations

For css, I noticed again that I can design it easy and clearly if I prepare with box, float or column before design the webpage in html, css.

>Findings

I could find some skills tutorial for css although it's necessary in this week. Especially, I could find the way to create the header with images and menu in same align, it's in Japanese though.

>Further readings/references

A book that takes you from basics to practice in one volume. Downloadable sample data is also available. In addition to writing HTML and CSS, you can also learn about commonly used layout patterns and responsive design. While acquiring the basics, you can also learn practical elements such as different methods of web design. Available sample websites and downloadable sample data are also included.

This introductory book written by the manager of the Web Creator Box is a unique book that covers the basics of the web, HTML, CSS, etc., and the creation of websites. Combined with exercises, it will help you get to the end of the book. It is also packed with information on how to write responsive, Flexbox, css grid, etc.

Recommended for those who are worried that they will fall behind in self-study.

This book was a basic introduction to HTML5.

The book explains the basic usage of HTML5 with downloadable sample code, allowing the reader to learn the differences between HTML and HTML5, the history of the specification development, and other basic knowledge aspects. The careful explanations that accompany the questions that learners tend to have will help them deepen their understanding.