An Interactive Microsite
This is based on an academic project.
For this project, I had to work using WIX to produce an interactive micro site. Through lessons and exercises in class, information architecture design and user interface design, I have to design and assemble a micro site based on the outcome from one of the studio project. The purpose of this process is to test our abilities in translating prior learned skills and knowledge onto the digital domain as part of design communication.
About Page
The Home page consists of the title of my artist book with a short description of the website. I have included a button where the user can click and view the complete artist book.
Home Page
The About page contains a description of my artist book. It’s the concept statement regarding the concept of the book. These are to give the user an understanding of the book.
Gallery Page
The gallery page is divide into three parts; Architecture, Human Parts and Snippets of the Artist Book. The photos here are from Google, Unsplash and Stock Images. As the images here are online, I have included the credits at the end of the page.
The Snippets page shows how the images from Architecture and Human Parts are combined. These are the images that were layout in each of the pages of the artist book.
Contact Page
Contact page includes a contact form, Consists of ‘Full Name’, ‘Email, ‘Phone’ and ‘Message’ box respectively. The contact form is build using the database collection and linking them each to their respective columns. Once the user clicks on the “Submit” button, it will navigate them to Thank You page. These are to indicate that the message has submitted successfully.
What is UX sitemap?
A UX sitemap is a website or application hierarchical diagram that explains how pages are being prioritised, linked and labelled.
A sitemap is an early process in the UX design process. You can create a sitemap after personas, user journey and card sorting. It helps to visualise the interconnections of the different pages of the website, in a way that navigation flow that not only makes sense to the user but also a search engine. It’s a footprint displaying how each page relates to the hierarchy of the website.
For a small website, consider establishing a flat sitemap, using four or less vertical levels. Flat sitemaps increase the content discoverability since there are fewer layers for scrolling.
There were a few changes when working on the actual websites. Such changes are the gallery grid for the Gallery pages and I have included one more page under the Gallery section.
Responsive
Based on the available browser space, a responsive website displays content. If you open a responsive site on the desktop and then adjust the size of the browser window, the content can shift dynamically so that the browser window can be optimally arranged. The process is automatic on mobile phone. The site will check the availability of space space and then displays itself in the ideal arrangement.
Responsive design is simple as that users can navigate online easily and experience as much of it on their smartphones as they can on a monitor.
Live Website
https://nuralishasudarsono.wixsite.com/anatomicalarchi
