Interactive Design / Project 1
8/5/2022 - 9/6/2022 / Week 8 - Week 11
Nurul Adlina Rizal / 0345429 / Bachelor of Design in Creative Media
Interactive Design
Project 1: Landing Page Design
LECTURES
All lectures in Exercises.
INSTRUCTIONS
Project 1:
Landing Page Design
Visual Research
The topic I chose for the three projects was Spa Services and Products.
This is due to the logo that I created for Advanced Typography. I designed a
logo based on my nickname, Dina.
|
| Fig 1.0: DINA logo (14/6/2022) |
The theme of the logo seemed like it was made for spas or beauty products so I wanted to make a site that I could use this logo with. As well as create a site that is focused on accommodating to visitors of the site and customers of the business. I also wanted to have a sign up and log in feature for returning customers since spa customers usually visit or book appointments in the same spa.
I looked up references I could use and some of them were:
|
| Fig 1.1: CIELO's official website (14/6/2022) |
Since I planned to have my site display products for customers to shop, I looked at sites such as CIELO that promotes their own brand of products and looked at how they influence customers to buy their products just from its design.
https://spabelles.com/
|
| Fig 1.2: SpaBelles official website (14/6/2022) |
I used SpaBelles as inspiration for spa websites that offer services and how they display information on their pricing of each service as well as the general aesthetic of spa websites.
|
| Fig 1.3: Forever Young Spa official website (14/6/2022) |
This reference has both services and products as part of their business which is a fitting and similar to my idea for DINA.
Idea Exploration
Header / First Section
This is where I wanted to add the main call-to-action button. It needs to
be interesting and captivating to influence the visitor to act
on.
|
| Fig 1.4: Sketch #1 (15/6/2022) |
|
| Fig 1.5: Sketch #2 (15/6/2022) |
|
| Fig 1.6: Sketch #3 (15/6/2022) |
|
| Fig 1.7: Sketch #4 (15/6/2022) |
|
| Fig 1.8: Sketch #5 (15/6/2022) |
For the full landing page, I decided I could take elements from each of these and turn them into sections that I could use. Of course, I had to choose only one to be the actual header. I was stuck on sketch #4 and sketch #1.
Wireframe
Drafts
|
| Fig 2.0: Draft #1 (15/6/2022) |
|
| Fig 2.1: Draft #2 (15/6/2022) |
I liked most of my drafts but I believe the one I chose as my final is more direct and straightforward. There were 3 functions I want my landing page to have.
1. Sign Up / Header
Introduces the visitor to the brand and urges them to sign up with a
single motto. Welcomes returning members.
2. Shop & Book
Introducing the two purpose of the site as a place to shop online for the
products offered and to book a spa session at a physical store near
them.
3. Contact / Footer
I wanted to also make sure the site visitor can find contact information
even from the landing page. This is important especially for the type of
company DINA strives to be. Its service is to accommodate customers and
make sure they have a good experience so I wanted to make sure the website
gives the visitors a good experience.
Final Wireframe
|
| Fig 2.2: Wireframe (14/6/2022) |
Even with this as my final wireframe, there were certain things that I decided to change such as the footer, header and the book section.
Since I was trying to find a better solution for the third section. I
decided to instead make a paragraph with the same motto. I knew that I
wanted to have the products displayed since that is one way to make
viewers interested of the services provided by the site and company. If
they knew what we were offering, there are better chances for the viewer
to keep looking through the website.
Color Palette
FINAL
|
| Fig 2.3: Final Static Prototype (14/6/2022) |
For the final, based on feedbacks given and the references I was looking at, I made changes that I believe was better than my wireframe.
Instead of having a full form on the header, which I believe could
overwhelm visitors who have no idea what DINA is about, I decided to
remove it and only keep the sign up button. For the shop button, I wanted
to keep it so I changed the layout design of the section so that it could
be much easier to code later. Now for the book section, I wanted a form so
that customers who were coming to book could easily access it with no
trouble and they did not need to be lead to another page just to fill in
their details. However, clicking the button will redirect them to the page
where they could pick what spa package they wanted to have.
Last but not least, the footer, I added the contact information together
at the footer and added a map since I wanted the customers to better find
the physical stores of DINA near them.
FEEDBACKS
Week 8
General Feedback: Make it clear your call of action on your
landing page.
Specific Feedback: Mr Shamsul likes the typography and suggests
that I add titles to each section so that they are distinct.
Week 9
General Feedback: Make sure not to use copyrighted
images.
Specific Feedback: Mr Shamsul said I could add a map at the
footer. He also said that I should add a Log In button if I have a
Sign Up button.
Week 10
General Feedback: -
Specific Feedback: Mr Shamsul told me to mindful of the
margins and make the button designs consistent
throughout.
Week 11
General Feedback: -
Specific Feedback: -
REFLECTIONS
Experience
For Project 1, I had a good time in class due to being able to be
inspired from the designs of my classmates as well as being able to
receive feedback from Mr Shamsul. The time spent in class was useful
despite it feeling a little longer than previous classes. It is due to the
feedback sessions whereas back then we only had tutorials.
Whilst creating the design for my website, there were many aspects I
learned about UI/UX when looking at references. Even though I struggled a
bit with deciding what type of style I wanted to do, it was a good
experience overall.
Observation
From my observation, there were many aspects of this module where I had
to do my own such as what makes a good website design. Even with
additional feedback from Mr Shamsul, I had to figure out on my own what
styles better fit the site idea I wanted to do. This help me be more
independent in my study but also left me feeling a bit clueless on what is
considered good or bad site design. Even if design is subjective, I feel
that for UI/UX design there are certain rules that I could follow to make
sure I can make a standard site that is relatively good and gives users a
good experience when interacting.
I also observed that I study better when in class because of the
atmosphere and that I could directly talk to Mr Shamsul about my concerns
and questions. I was more productive around others but hour long classes
do tend to burn out my creative energy at times.
Findings
I found that I should take breaks between long periods of classes because
I spend time during the classes to do work and receive input from others.
My ideas no longer become good if I keep forcing them even after
class.
Moreover, Mr Shamsul says that if we ever get stuck on an idea or design,
it is good to look at references. I believe references are a good way to
generate ideas for our own projects. It can help us when we are stuck with
our ideas since we can find solutions to design problems that we may be
stuck on.
In conclusion, Project 1 was helpful in the sense of creation and the
design / UI aspect for making websites.
Comments
Post a Comment