This is a series of web development logs for a local meditation group. The series consists of:
- User research
- Site requirements
- Conceptual design
- Visual design
- Prototype: Constructing and Styling
- Prototype: Adding Functionality and Animation
- Test and evaluation
This page is documentation for 3. Conceptual Design, showing draft sketches.
I can draw but can’t write. Text written on sketches might not be readable. My client understood it because I explained it while sketching this on my laptop.
This sketch was produced over the meeting with the client, when we discuss about site requirements. I used PowerPoint to sketch our discussion to summarise it. This is the last sketch (as it was made to summarise discussion) that shows basic ideas of layout and some functionality which the client can expect to have for their website.
Sections and layout
There are 5 sections that are; home, about, class, teacher and testimonial. Contact section and footer were excluded due to lack of the space.
Home has a navigation and header title and video background which footage were taken for film making project for Time Based Media. Other pages have a h2 headline, YouTube video, h3 headline and paragraphs.
There is a wiggling object on the right top corner of some sections, which is a lotus flower (this idea was scrapped later).
The page is a single column layout, therefore, it will not change by size of devices. Navigation changes its form as; horizontal bar for large and landscape screen, tab for smaller portrait screen.
Shortcut link to the top
The shortcut link appears as a user scrolls down the page. It is only available when a horizontal navigation is available.
I didn’t produce wireframe for this project since the design and contents are very simple and straightforward. My draft sketch was good enough to move onto the next stage, creating mock-up designs.