This document outlines the design process for a personal website, including paper prototypes, wireframes, and design guidelines. It presents prototypes and wireframes for desktop, tablet, and mobile versions. Key elements include a homepage for introduction and resume download, a projects page to showcase work, a skills page using infographics, and a contact page. Design principles like proximity, similarity, symmetry and metaphors are applied. A 12-column grid system is used for responsive design.

1. Web and User Interface Design Phase I Submission
Semester 2 2015/2016
D14129005
Prepared by Jingguo Jiang
Project: Personal CV Website

2. 1
Table of Contents
1. General Project Information 1
1.1 Project Introduction 1
1.2 Objective 1
2. Paper Prototype & Sitemap 1
2.1 PC Version 2
2.2 Tablet Version 5
2.3 Phone Version 8
3. Wireframe 9
3.1 PC Version 9
3.2 Phone Version 14
4. Design Guidelines 15
4.1 Mental Model & Conceptual Model 15
4.2 Gestalt Principles 16
4.3 Metaphor 19
5. Grids System 19
6. Bibliography 20

3. 1
1. General Project Information
1.1 Project Introduction
This project focuses on the design of my personal website. This website will be used as my
online resume and the display of my portfolio. It is assumed that the audience of my website
are potential employers in IT industry or/and customers who seek for software outsourcing
services. A personal website can express one’s personality and increase the chances of
obtaining interviews (Smith, 2013). I decide to do this because this website will be beneficial
for my job landing in near future.
I embark on this design project according to user experience design flow. Firstly, I used the
paper prototype to produce the first-cut design in order to translate my ideas into preliminary
page layouts. Then, I drew the middle-fidelity wireframe with the help of a design tool
(OmniGraffle). In this phase, the responsive layouts can be presented; and the design
guidelines would be identified. Next, I will compete the visual design of the interfaces. Finally,
the website will be built through the front-end programming skills (HTML, CSS, and
JavaScript).
1.2 Objective
The purpose of this report is to document the design outputs (including the paper prototype
and wireframe) and give specific design guidelines.
2. Paper Prototype & Sitemap
I decided to design my website using the architecture with three rows. The top row is used
for the header of the page; and the logo of the site and navigation bar will be placed here.
The second row in the middle of the page is a container for the main content. The last row is
the footer of the page. The main layout can be seen in the figure below.

4. 2
If I create many sections (e.g. sidebars) on the page, a user will find it more difficult to search
for information and understand the content. Therefore, I did not divide the page with too many
parts, and this simple layout will reduce a user’s cognitive load by the focus of the information
centered on the page.
The whole website has five pages. The sitemap can be seen in the figure below:
2.1 PC Version
Homepage
The homepage is to introduce myself and give a visitor’s first impression of me. In addition,
a download button will be provided to let the potential employers obtain my resume. This
prototype can be seen in the figure below.

5. 3
Projects Page
The projects page is used to showcase my portfolio and document my projects which I did
during my previous work (see figure below).
As you can see, the thumbnail gallery is used to present the projects I did. I vary the widths
and heights of images in the gallery. This design can create a much more organic looking

6. 4
page (Johnson, 2011). However, this design will make it difficult to produce responsive
layouts because multiple sizes of images are not suitable for responsive grids design. So I
will use images with same sizes to rearrange the thumbnail layout if it is too difficult to control
responsive layouts.
Skills Page
Skills page is to show my career skills and personal skills. I used the infographic to present
my skill levels on this page, as shown in the figure below. Infographics are more eye-catching
than text words, since they usually combine images, colors and movement (Costill, 2013). I
decided to use progress bars and pie charts to represent the levels of my skills, and I will
build this data visualization with JavaScript animation.
Contact Page
The objective of the contact page is to provide my contact information to users and collect
users’ feedbacks or messages they leave (see the figure below).

7. 5
2.2 Tablet Version
I have a hard time predicting how users will access my website, so I need to think about a
multi-screen and active experience. In order to maintain consistency in the experience across
multiple platforms, I will not change the contents on individual page and only adjust to the
layouts of elements according to sizes of different screens.
Homepage
On the homepage of tablet version, all the elements in the content area are centered
horizontally (see the figure below). The personal image, name, job title information and button
start on a new line individually. I used a hamburger icon to save space on the screen and
denoted a hidden menu. When the icon is clicked, the dropdown menu will be presented (see
the figure below).

8. 6
Projects Page
The projects page is similar as the counterpart of the PC version, as shown in the figure
below. Only the navigation is hidden and replaced by the menu icon for the tablet version.

9. 7
Skills Page
The skills page is similar as the counterpart of the PC version, as shown in the figure below.

10. 8
Contact Page
I rearranged the layouts of content elements on the contact page of tablet version, and put
them centered horizontally (see the figure below). The Google map will be presented on the
page by means of JavaScript and Google API.
2.3 Phone Version
I use a long scroll page to contain content elements when designing my website for mobile
phones, as shown in the figure below.

11. 9
3. Wireframe
A website wireframe can be used as a visual guide that represents the skeletal framework of
a website. The website wireframes below are produced by a graphic tool – OmniGraffle. I use
this tool to improve the page fidelity; and help complete the visual design of the interface
better. I also put some brief explanatory notes in the wireframes to better the understanding
of the page information.
Make note that he tablets version will not be presented since it is not too different from the pc
version.
3.1 PC Version
Homepage

12. 10

13. 11
Projects Page

14. 12
Skills Page

15. 13
Contact Page

16. 14
3.2 Phone Version

17. 15
4. Design Guidelines
4.1 Mental Model & Conceptual Model
A mental model represents a user’s thinking process about how the software or website works.
This means what users believe they know about the user interface strongly impacts how they
use it (Nielsen, 2010). Another corresponding one is a conceptual model which represents
the actual model that is given to the user through the interface of the product. In order to
create a superior user experience when designing the interface, designers need to match the
users’ mental models with the product’s conceptual model.
I target the primary user group as potential employers. They expect to know a person through
one’s website and then decide that if they should offer the chances of interviews. When they
open my website, they want to know who is the person and what he or she looks like. That’s
a normal reaction in terms of a first contact with someone. After that, employers need to
check what projects this person did and what skills he or she has. They, finally, decide that if
they contact the person. This is the mental model of potential users.
According to potential employers’ mental models, I provide four pages to help them get
information. The homepage is the default page of my website. On this page, employers can
know my name and my job titles; and they can see my personal image to know what I look
like. The projects page and skills page allow them to understand what I can do in the work.
The contact page provides the contact information including phone number and address to
let them reach me. The figure below represents the matching relationships between mental
models and conceptual models.

18. 16
4.2 Gestalt Principles
The gestalt principles of visual perception are important rules in the field of user interface
design. The concrete rules I used in my design include: proximity, similarity, symmetry as well
as figure/ground.
Proximity: The principle of Proximity is that the relative distance between objects in a display
affects our perception of whether and how the objects are organized into subgroups. If the
objects are near each other (relative to other objects), they will be perceived as a whole. On
the homepage, the navigation texts are placed near each other as a whole; and the name,
job titles and button are placed together as an entire part. On the skills page, some space is
left between the left progress bars and the right progress bars. So the progress bars can be
divided two parts.
AboutLogo Projects ContactSkills
personal image
MY NAME IS
JINGO JIANG
Java Developer | Front-End Developer | Interactive Designer | User Researcher
Download CV
ProximityExample1

19. 17
Similarity: The principle of similarity means objects that look similar appear grouped. On the
projects page, the tabs which have the same shapes are grouped as a whole. Furthermore,
the thumbnails are similar, so they are placed as a gallery of the pictures. On the
contact page, the social media icons which have the same shapes are a whole.
Symmetry This principle says that the symmetrical elements are perceived as part of the
same group (Busche, 2015). As you can see in the example below, I achieve the symmetry
by providing a good balance of symmetry of the progress bars and pie charts in my design.

20. 18
Figure/Ground: This principle means that people tend to see and separate objects from their
surrounding background. On the contact page, I separate the form and contact information
from the page background using a semi-transparent layer.

21. 19
4.3 Metaphor
A metaphor has become an increasingly powerful tool for designers in the field of web design.
On the web, designers use images and/or icons which users are familiar with to symbolize
different functions or express different purposes of user interface elements. The prime benefit
of metaphors is to enable users to interpret and understand interface information much faster,
and speed up their cognitive processes. The use of the metaphor in my design can be found
on the contact page. I use several icons to represent the links of my social media.
5. Grids System
When I was designing the graphic interface of my website, I used a grid layout with 12
columns, as shown in the figure below. As you can see, the site logo was placed in one
column, and the navigation bar covered the right three columns. The main contents covered
six columns. However, I will use the bootstrap grids system to code my website, so the
widths of the columns could be different from my original visual design. I use the bootstrap
framework, because it can help me produce responsive design easily. Bootstrap has ready-
made classes; and I can specify how many spots in the grid system I want each column to
occupy. That will speed up the development of my website.
MetaphorExample1

22. 20
6. Bibliography
Smith, J. (2013, April) Why Every Job Seeker Should Have a Personal Website, And What It
Should Include. Retrieved April 1, 2016 from:
http://www.forbes.com/sites/jacquelynsmith/2013/04/26/why-every-job-seeker-should-
have-a-personal-website-and-what-it-should-include/#1947a486902e
Johnson, J. (2011, May) 50 Creative and Inspiring Thumbnail Galleries. Retrieved April 1,
2016 from: http://designshack.net/articles/inspiration/50-creative-and-inspiring-
thumbnail-galleries/
Costill, A. (2013, October) 6 Benefits of Using Infographics. Retrieved April 1, 2016 from:
https://www.searchenginejournal.com/6-benefits-using-infographics/70917/
Weinschenk, S. (2011, October) The Secret to Designing an Intuitive UX: Match the Mental
Model to the Conceptual Model. Retrieved April 9, 2016 from
https://uxmag.com/articles/the-secret-to-designing-an-intuitive-user-experience
Nielsen, J. (2010, October) Mental Models. Retrieved April 9, 2016 from:
https://www.nngroup.com/articles/mental-models/
Busche, L. (2015, October) Simplicity, Symmetry and More: Gestalt Theory and The Design
Principles It Gave Birth to. Retrieved April 10, 2016 from:
https://designschool.canva.com/blog/gestalt-theory/