The Brief
For my university's introductory web design course, I designed a pottery-themed resort responsive website based in 1950s Japan. Designed with minimalism and tradition in mind, the deliverables of the project included the final website and an accompanying design report. I was the sole web designer and web developer for the project.
The exact location of the resort is a ceramic/pottery town called Mashiko within the Tochigi Prefecture, which is a two-and-half-hour train ride away from Tokyo.
It’s set in post-war Japan, and after heightened political tensions in the country, the resort was started by pottery artisans and enthusiasts with the aim to provide an ambience of peace and calm amidst all the unrest that the country has recently been alleviated from.
The resort is open to all: Japanese citizens, foreigners and tourists. Japanese citizens who participated in the war, war retirees, generals and lieutenants are given special accommodation and special care.
The concept of the resort is simple: to have an aura of peace and calm, to have a minimalist aesthetic, to channelize inner disturbances caused by the war towards creativity and meditation.
The Process
After coming up with a topic for my topic, I started off by looking for website inspirations which would dictate a general aesthetic direction for my own website. Inspirations included Muji Hotel's website in Japan, Kinfolk, and Design Hotels.
I then had to decide on a target audience for my website. Although the resort would be open to everyone, it would cater more to an older crowd of pottery enthusiasts in the country. The age range of the website was decided to be 30-60 years of age.
On the basis of some research, I came up with user personas in the 'Getting to Know your Stakeholders' design activity. These user personas were polished and improved upon after the activity in order to portray user information more accurately.
Wireframing
Next, some rough wireframes were drawn on paper by me for the purpose of conducting in-class user testing and getting feedback from other students about the rough design that I had in mind.
I made three wireframes: one for a simple gallery page which would consist of a grid of images, one for the contact page, and one for a basic booking platform for the resort. These wireframes dictated a basic structure for the website and were also used to get some initial feedback from the users about the layout of the website.
Colour Palette
I used the colour scheme on the left for the website. The four colours used in the palette are inspired from traditional Japanese ceramic pottery, with Midnight Blue being popular a combination with earthy tones such as Saddle Brown. Eggshell white provides a nice contrast to the darker side of the palette, helping neutralise the overall colour scheme by acting as an accent colour.
Site Map and Content Architecture
The sitemap provides a basic layout of the website. The Homepage links all the necessary elements of the entire website together and contains a bit of everything.
It contains the about information, a smaller gallery grid for preview purposes, newsletter signup along with a call-to-action for booking. The studio page contains more information regarding the resort and its inbuilt studio. The contact page has a basic form similar to a lot of modern websites through which a user can contact the resort staff. The gallery page contains more images along with a slideshow feature to view images easily.
Finally, the booking page contains a simple booking platform which asks the user about the check-in and check-out date and displays information about the different room options available.
Technical Implementation
Various HTML, CSS and Javascript interactions were implemented during the development phase of the project. From responsiveness across all pages of the website to booking popups to form validation, these interactions were designed with accessibility in mind and consist of features which would progressively enhance a user’s experience.
Progressive enhancement was kept in mind during the development of these interactions and the website altogether. I started off with mark-up (HTML) to ensure that all content and the basic structure of the website is in place. The second layer, which is CSS, was then applied to style all elements and ensure responsiveness. Lastly, the behaviour was implemented using JavaScript. This compartmentalisation of the three ensured that the code is accessible to all users and portable across browsers and devices.
Drop me an email below to receive access to the complete project, or have a look at my GitHub for the website's code.
Results and Reflections
1.
In this project, various aspects of designing a website for a resort at an unusual location/time (post-war 1950s Japan) with the activity as pottery were discussed, from preliminary research to design to development. I believe the final version of the website has been a success, for it has successfully met the project brief and delivered a responsive and functional website implemented using HTML, CSS and JS (jQuery).
2.
The design and development were conducted in an iterative manner; user needs were met through gradual steps of testing and improved in subsequent iterations. My learning strategy has improved in the sense that I started to prioritise the client’s/user’s needs before mine. As a designer, it’s easy to get clouded by your own biases and prioritising your design over what a client really needs.
3.
If I were to start the project again, I would definitely spend more time on understanding user needs and performing some more user research in order to fine tune design aspects such as aesthetic needs or development constraints. Furthermore, I would also include more older people for my user testing since most of my user testing base mainly consisted of other people doing the course, which in turn means a younger audience.