#Web Design Challenge: Let's Design a Top Page

Hello, I'm Kobayas (@kobayas_s).
Last time, I set a fairly substantial multi-page challenge in "Web Design from Structure", but since some people were struggling, this time I've created a one-page Web design challenge.

I want to spread the #WebDesignChallenge further, so this challenge is publicly available for free. I would be happy if everyone from those aiming to become Web designers from scratch to professionals who want to create samples because they have many private projects they cannot showcase would participate.

Note that this note skips how to create design comps, so if you are doing Web design for the first time, please refer to the article below.

How to Participate in the Web Design Challenge

*For the hashtag, please put a half-width space before the # and at the end of the tag, and confirm that it has become a colored link before posting.
*There is no specific deadline for posting your challenge entry, so please proceed at your own pace.
*If you would like design advice from Kobayas, please apply below (please comment on this note article for questions regarding the challenge content)

Although updated irregularly, I have compiled the works of those who participated in the Web design challenge on Pinterest.

I think it is also a good learning experience to see the works of others who participated in the same challenge!

Notes

The copyright for the challenge content belongs to Kobayas.When posting on your blog, Twitter, or portfolio, please include the following information.

*For Twitter posts only, #WebDesignChallenge is sufficient (due to character limits).

When coding the site you created and publishing it online, please make it clear that it is a dummy site.
If it shows up in search results, some people might mistake it for a real site.

Challenge Content

Basic Information

This is a challenge to create a website for a hair salon in Kobayashi Prefecture.
The setting is that you are creating a detailed design to show the top page first, as you want to confirm the design direction.

◆ Background of creating the site
Until now, it has been sustained only by word-of-mouth and repeat customers, but customer loss due to the aging of the customer base and environmental changes such as job transfers has become significant.
To cultivate new customers, they have started activities with an eye on attracting customers using the internet.

◆ Worries
They started posting on Instagram, but since the reservation flow is only through DM or reservation forms on hair salon-specialized web magazines, they feel the following inconveniences.

Based on the above concerns, they decided to install an email form on the website that can accept direct reservations and allow the input of necessary information.
Regarding prices, which are frequently inquired about, information will be posted on the top page so it can be seen to some extent.

◆Salon Name
Hair salon Kobayas
*There is no specific logo, so please create one that matches the atmosphere of the site.

◆Target Audience
People in their 20s to 40s
We would prefer to attract women, but we also want to attract their families (such as husbands).
People who live in the neighborhood.

◆Image Colors
We want a color scheme that feels clean and warm. The client's requested colors are below.

◆Store Concept and Atmosphere
We use natural shampoos and treatments.
The interior is decorated with houseplants and faux greenery, and features a warm interior using wood grain on the floors and pillars.
We are aiming for a relaxing space similar to MUJI.

◆Reference Image
Please refer to the atmosphere of the handwritten text and the overall simple vibe.

◆Supported Devices
Responsive (so it can be displayed easily on smartphones)

◆About Photos
Since this is a fictional challenge, please use free stock materials.
*If you have trouble choosing materials, the following method might help while you are designing.

The example is for a banner, but let's think about it by replacing it as follows.

If you add colors first, it is easy for the tone to clash with the photos,so the trick is to add them last.

Information to include

1. Global Menu
We want to include the following content. You can change the names if they are easier to understand.

1. First View
Please display it with a slider so that the atmosphere of the shop and the cutting process can be understood. (The following is a reference for movement)

2. Concept
"We bring out your natural beauty and provide an opportunity for you to discover a new you."
To ensure our customers always feel the discovery of new beauty, Hair salon Kobayas proposes styles tailored to each individual.
We will do our best to provide technical services so that not only your hair but also your scalp can become beautiful and healthy, so please feel free to consult with us.
We are waiting for you in a space designed to heal your daily fatigue.

5. Instagram
We usually post many images of cut models.

3. News
The announcements we want displayed currently are as follows.

4. Menu (tax included)
The menu below is only a partial list, so please add a link to the "Hair Menu" page so that all menus can be viewed.

❻ Reservations
Please include a link to the reservation form.
Please insert and display a calendar so that closed days are visible.

❼ Access
Please embed a Google Map.

Wireframe

*This wireframe is an image of the information flow.
When designing, please create the optimal layout according to the challenge content.

That concludes the challenge content.
Since this is a single-page project, if you would like to create sub-pages as well, please try the challenge below.

If you want to learn how to build websites comprehensively

If you want to learn website production in depth, please try learning HTML & CSS languages as well.
This is a book that explains the flow from the basics of web design to coding and publishing while building four websites. It is also recommended for those who want to enter the production field in the future, as it is packed with professional know-how.