Master Degree project
Responsive Web project - Urban sketching Tools
1. Project proposal
Site title
The current titleof the website is the store name, Urban Sketching Tools Store, but the betterone is ‘UrbanSketching Tools Store | fountain pens, markers, water colors’.The main reason is that Search Engine Optimization (SEO) technology canretrieve the key words in a title and improve the effective visit rate of the website.
Rationale
The content of thesite is to display three different paintbrushes in the urban sketching toolsstore, not the shopping store, and providing only information. The goal of thesite is to provide product information and business hours to consumers who needto buy in a physical store.
Main feature
The websiteincludes the floor plan of physical store, classified display of information, searchfunctions and a business hours page.
Content
This site hasseven types of pages including a home page, three category pages, a detailpage, a search page, and a business time page.
Target audience
Customerswho want to go to physical stores in person.
Design consideration
a) To Provide information to those in need.
b) The website promotes the physical store toattract more customers.
c) Extension from the physical store toe-commerce and prepare for the next step of online store.
Limitation
User requirements arenot detailed enough, such as the address of physical store and contact number,so the website can only be built first and discussed with stakeholders further.For example, the image of each product in Secondary page does not correspond tothe one in the detail page, so a generic image is set up to display. This functionneeds to be required by JavaScript technology. In addition, the project budgetand project development time are not clear.
2. Sketching layouts
Hand-sketching isthe most direct and convenient way to build a prototype of a new website.Through these hand-drawn drawings, it is easy for customers to understand andmodify. It not only provides the basic idea, but also improves the efficiency.According to the requirements of user, four types of initial page sketches weredrawn. Because the site only provides information without user interactionfunction, how to provide comprehensive information in home page is the key for thewebsite to retain users for a long time. The navigation section of the homepage contains links to secondary pages and each secondary page is a display ofthree categories of products. The level three is the detail page. In addition,there is a search function on the home page to help consumers retrieve messagesquickly. This is shown in thefollowing figure.
3. Thestoryboard flowchart and File-Naming Conventions
Web structure issuitable for this website that only provide information, which has theadvantage of making it easier and faster for users to find information and jumpfrom any other page to any page to view information. Asshown in the figure below, in which ‘Navigation’ block contains six pages.
4. Flexible layout
More and moresmart mobile devices have become an essential part of the Internet, such asPhone and tablet devices. For fixed-layout websites, when people use mobilebrowsers to visit the website, the web page reduces to the visible area, whichis the viewport, and users can zoom in and out of the page to view information.However, this approach brings a poor user experience. Version 1 of the Urbansketching tool website prototype also faces this problem. It is unrealistic todevelop a website for each device separately, which increases the developer'sworkload and maintenance. In order to adapt resolutions of most devices, usingresponsive design is an efficient and realistic choice.
The responsivedesign has three critical points, including CSS media queries, flexible imagesand flexible layout. Utilize these three technologies to design a responsivewebsite for the Urban Sketching Tool store. The responsive website transformsthe fixed layout with 1200px width to a flexible structure, and more than thewidth will display the same design. The breakpoint is the key point of layoutmodification, the webpage layout will change from three columns to one columnby the grid principle. Based on the first version prototype from desktop andtablet to mobile devices, formulate four key breakpoints: 992px, 770px, 630px,510px. The 375px width is a minor breakpoint; the layout is the same as 510pxwidth, just fine-tuning small devices’ details. Breakpoints diagram as shown inFigure 1 below.
TheFlexible layout is to transform the fixed-width (px) to the relative widthindicated by percentage (%), and the website content will automatically adjustwith the viewport size. Font responsive design does not directly use absolutesize (px), but relative size (em). Flexible images set images’ width as apercentage to make them more scalable. Taking the ‘Index.html’ as an example, theselayout diagrams only demonstrate layout plan. Font, images, and margins willautomatically change in different breakpoints.
5 . Navigation System Across Different Adaptations
.png)
6 . core code
Usingresponsive web design technology, I designed a website that adaptsto multiple devices and is compatible with mainstream browsers.
This project received top recognition from the supervisor and was ranked No.1 among all master's degree projects.
