personal site documentation

7/28/2019 Personal Site Documentation

1/12

PORTFOLIO SITE DESIGN PACKAGE

KYLE HILL


2/12

Design Documentaon - Kyle Hill

Making mysel marketable is the main ocus o this

website. I want to make sure that my purpose isvery clear. I have seen ar too many portolio web-

sites that try to explain too much. I want to make awebsite that is able to showcase my skills and do

the talking visually.

I realized that I needed a place where I can pointpotential business partners, employers and clients.In doint so I will create transparency particularly or

those who may have ound me only through mywork. It is one thing to meet someone in personand do business with them that way, and it is an-

other to have someone blindly contact you and ask

you do do business with them. With the transpar-ency, there will be more trust between mysel and

the client.

A main eature o the site will be the blog that I in-

corporate. This is because blogs are great or seo

purposes as well as showing people who I am andmy thought process in work and in lie. I want thesite to have a minimalist design that is very clean

and uses whitespace eectively so the visitor canenjoy the expereince o the site.

Creative Brief

Objectives

Create a personal portolio site that will becase my previous work.

Act as a landing page or the business cardwill allow business partners and potential e

about what makes me tick.

Create a strong dynamic blog where I can and share my work to gain a strong an bas

have never previously had in person.

For the site to act as my hub and oer way

connect socially with me

Fig. 1 - Concept Model describing the my business thought process

Fig. 2 - These our principleswere my ocus points


3/12

DGM 2740

I need a way to get my designs up on

the web and to be mobile riendly

Mark is a User Experience designer who is great taking client ideas and bringing

them to life through his great design background. He is an established artist who

knows how to make aestetically pleasing designs. Mark has recently graduated

from college and is able to devote more time to his side projects, which had turned

in to a full-time job. He nds local businesses that need a face lift on their corpo-

rate image and then sells them with his expertise.

Although Mark has a srong background in design, and is able to transform vague

ideas into beautifully designed masterpeices, he still lacks when it comes to trans-

forming some designs into a well thought out and designed webpage that is able to

span many dierent platforms ranging from desktop to mobile devices. He knows

enough basic html and css to be able to put together some designs and at least

make his images show up online, however he realizes that if he is going to expand

his vision of his one man business he is going to need some help.

The thought of having to nd someone to work with who is c apable of using the

desings he has made and utilize them well across many platforms scares him. He

enjoys other peoples company, and is a great team player, but when it comes tohis designs he doesnt settle.

Recent Graduate / FreelancerMark

Age: 23

Location:Lehi, UT

Education: Fine Arts

Focus: User Experience Design

Employment: Sel Employed

Salary: $45,000

Key Characteristics Has a great background in Art implementation

Feels uneasy regarding the new movement

towards responsive design, but understands its

importance.

Hard worker looking to nd partner to utilize his

designs

Goals Learn more about how he can optimize his de-

signs for the web

Understand the benets of responsive design.

Make solid connections to outsource work

Expand his business and create a client pool

Questions How much do developers charge for responsive

design services?

Will my designs still look great on tablet/mobile?

WIll my clients be interested in the possibility ofresponsive design?

Inuencers Cost of outsourcing

Time consumption of learning new web languages

Possibility of distortion of designs

Limited colleagues with a knowlege of this area of

technology

Frustrations & Pain Points Feels helpless when it comes

guages

Hesitant handing his designs o

and not getting the product he

Some customers already want

ly sites.

Time consumpiton of extra dev

Procient

Learner

Knowledge of Technol-

Theory

Implementaion

ArtDirection

HTML/CSS

Javascript

PHP/MySQL

ResponsiveDe-

DigitalDevices PC

PracticeTech


4/12


I need to keep up on the latest internettrends and technology available today.

James is well educated leader that has an eye for small business opportuni-

ties. He has started several small businesses, all of which in the past have lednowhere. He is now the owner of Fusion Design which oers web solutionsranging from websites, apps, SEO packages and email marketing. He is ahard worker that is driven to nd the elements to make a successful business.James is a tansplant to this area because of its reputation of incubating start-up companies.

He was able to start his company with skills he has targeted towards thedesign world. He picked up many of these skills from past business attempts.He now has knowledge of each of the services his company oers, but herealizes that things are constantly changing. James is passionate about cus-tomer service. This passion almost drives him crazy and makes him use muchof his time and energy looking for new solutions and options to please hiscustomers. He is a tough person to please and has diculties trusting othersto accomplish the tasks how he would like them done.

James is now realizing that trying to do everything on his own is aectingmany other aspects of his life. He is looking to expand his small business

from 5 employees to 10 by the middle of the year. He understands that hisstrengths are in the business side, and he needs to nd more people who liveand breathe technology. Doing so will enable him to worry more about leadingthe company to where he wants it to go and will allow him to spend more timewith his wife and 3 children.

President and CEOJames

Age: 37

Location: American Fork

Education: MBA

Focus: Business Marketing.

Employment: Fusion Design

Salary: $95,000

Key Characteristics Feels overwhelmed with new technology trends

while trying to lead the company

Feels the strains of work at home

Hard worker & great leader

Feels it dicult to t rust new employees

Goals To double the number of employees in the com-

pany in 6 months

Be able to focus more on leading the company to

where it needs to go

To be able to leave work worries at work

Questions Will I be able to nd a reliable employee?

Are interns a possible option?

How can we implement new technology in ourgrowing company and maintain consistency?

Inuencers Wife and children at home

Cost to the company to hire 5 more employees

Possibility of training delays for new employees

Fear of past failures

Frustrations & Pain Points Feels pressure from family members to

job at a corporation.

Has great ideas, but diculty in impleme

process

In the need of business partners and tru

tacts and references.

Procient

Learner

Knowledge of Busi- Technology

BusinessEthics

LargeCorpora-

Connections

SEO

Responsive

DigitalPublica-

Cross-Platform

WindowsOS

MacOS

PracticeTech-

SituationalAw

Dec i


5/12

DGM 2740

We need a way to improve our though pro-cess and make sure it is well documented

Jane is a hard worker and a great leader. She understands the need of a

great though process to bring great designs. She leads a team ranging fromproduct developers to web developers. She is struggling to nd balance

between the demand of deadlines and making sure the deliverable is worthy

of being presented. Jane doesnt do well will complainers. She is straight to

the point. If you have a complaint, it better come with a better suggestion to

the problem.

Stress is building up within the walls of the business since there seems to be

more and more deliverables that need to be done. Not only that, but the fact

that the business is so successful and rapidly moving means that her team

feels that they dont really have time to draw things out, make sketches, or

consider the ne details.

Jane sees that this is a recipe for failure, not only for her, but also for the

company in general. She is trying to nd a way to inspire those around and

beneath her to see the vision and the importance of the design documenta-

tion. She may not know how it is done exactly, but she sees the benet of it

from her friends in other companies. She hopes to gure something out soon,

since the stress is becoming unbearable.

Director o Business MarketingJane

Age: 33Location: St. George, UTEducation: Business MarketingFocus: Project ManagementEmployment: Red Team DesignSalary: $65,000

Key Characteristics

Hard worker

Sees the importance of using design documen-

tation

Not willing to go with the ow of laziness

Goals

Learn more about how she can learn best

practices to be able to teach her team how to

properly document their processes to explain

why they are doing what they decide.

Make solid connections with business already

implementing this process

Hold weekly scrum meetings to brainstorm and

review processes

Questions What kind of software do we need to begin this

process?

Will my boss be upset for delays with deliverables

for this purpose?

Will my team catch on an truly follow through with

the process?

Inuencers Boss and team member perceptions

Time consumption of learning new software and

practice

Possibility of distortion of designs

Stress of ever increasing deliverables

Frustrations & Pain Points

Feels alone in her feelings for the need o

change

Deliverables are sub-par due to the lack

thought out processes

Employees dont want extra work

Could be held responsible for both poor d

erables and missed deadlines

Procient

Learner

Knowledge of Busi- Design Planning Con

Theory

Implementaion

BusinessEthics

Wireframing

Software

BestPractices

Resources

Sketching

Experience

PracticeTech-

SituationalAware-

DecisonM


6/12


Breakupin

to

sections?

It was a dicult decision on how I wanted to present mysel through this

portolio site. I knew what I liked to see when I went to other peoples port-olio sites, however it is still a dicult task to know what is the best way topresent yoursel and the work you o er. I know that this will still change and

be tweaked as I grow in my sk ills and my knowledge.

Knowing all o this, I decided to go with the single-page layout. I did this

because in my mind, single-page site are simple, eective, and can beclean when done correctly. I compare it to a resume, people want to cut to

the chase. I I handed a 10 page por tolio with mediocre presentation to apotential employer, they are less likely to be wowed than i I put more eortinto creating a stunning single-paged resume that incorporated my designpresentaiton skills and my credentials. This is t he mindset I had coming into

the design process and what drove me through it as well.

Fig 1 - Early stickylayout or me to invision the ow o the content presented on mysite.

Singlepageortraditionalbreak-up?

Landing

Page

Work

Willthishelp

mebecom

visible?

Will sections

have diferent

eels?

Main

rotati

D

l

Capabilites Contact

Initial IA Concept

Goal: The goal was to take a generic idea and

begin to organize the basic structure o theproposed site to flter options.

WIllusingabargraphbesufcient?

Information Architecture - Planning

Willpeoplereallyusethistocontact?


7/12

DGM 2740

Landing Page

Portfolio Capabilities About/Contact Me Blog

School

Work

Personal

Life Friday Fav. Ideas

Goal: Provide transparancy through my

website. This will enable the visitors tosee that I am a real human being withgood values and a great work ethic.

Goal: Provide a single page landingarea with content available rom the

site that is able to grab the attention othe visitor and lead them exactly to theinormation they are looking or. My

blog will be located on a dierent pageto separate content.

Goal: Allow partners to see my recent

work as well as grab an elec tronicversion o my resume leading them tocontact me with work.

Goal: Graphically show my skill set

to the visitor giving them trust in theskills as well as letting them know thatthere are still some areas in which I amdiscovering and trying to learn andimprove.

Goal: This is the main goal, to providethe vistitor with means by which theycan contact me, ask me questions,eedback or work requests at whichI will easily be able to capture vital

inormation.

1

1

2

2

3

3

[ Content Clarity ] - It is very important that be used in an eective manner. Presentationtied to the work which I have done will assuattention that I seek with this portolio site.

[ Portolio ] - This is the main section o my sthem to the contact me section where they message or request a quote to work with m

just presenting empty words. These pieces and school projects will be the staple or lan

[ Blog ] - My blog will be my ace to the outstransparancy to allow the visitors to see whnew content which brings returning visitorsthe Friday Favorite section where I present a

[ Contact Section] - This is the goal o the whthis part o the page and or them to send mit be rom a client, business partner or utursure that I present this option in an easily acsticky button).

[ Socail Media ] - Links will be provided to mplatorms (YouTube, Facebook, LinkedIn, Twusers to track me as well as see work that I a

[ Wordpress ] - The site will be based upon tnow extensible at the code level and a largemaking the platorm robust, riendly, mainta

Comment Stickies

Technical Markers

4

4

1

1

2

2

[ Downloadable File ] - This is where I will prmy resume or an easy download.

Iconography

HTML5

CSS3

Wordpress

Javascript

PHP

Information Architecture

Main Landing Page

Page Sections. These pages will beon one single page with links.

Color Key

Information Architecture - Site Map


8/12


The sketching phase was very important or me. Until this time, I hadnt

really envisioned how I was going to present my content so that is not onlypresented well, but it was also pleasing to t he eye. I had many ideas in myhead o what I could potentially do, but those were just abstract thoughts.

I also enjoy site surfng and look ing or great design. I fnd it very enjoyablebecause I know the eort that it takes to make something that is beautiul,and unctional.

Even though I spend a lot o time looking at other peoples sites and tryingto fgure out how they have done certain things, this doesnt mean that theirmethods would help me to achieve the goal that I ultimately wanted, which

is to make mysel marketable and present mysel in a way so that others are

Sketching the Conceptbegging to work with me. To do this, it is important to have inspirtaion rom

great work that others have done, however there needs to be a personaltouch on the site and I needed to use something that fts my style and how Isee things.

I knew I wanted a minimalist, clean site that was not overwhelming. This wasan easy task since I didnt have a lot o content to present. I also didntt wantto have to explain everything on my site with text. I wanted to present my

work in a way that it can do the speaking or me. This was the inspiration ormy site.

Fig 1 - Early version o my destop sketch. I knew that I needed tohave an idea o what it would eventually look like or desktop, butrealized that the site needed to be built mobile frst.

Fig 2 - Building mobile frst is a new trend that helps layout theresponsive nature o the website.

Fig 3 - M y me as ure d ou t w ire ra me sk et ch o de sk to p Fig 3 c on t.


9/12

DGM 2740

[ Content Aggregation ] - It o the site and to present mWhile it is important that thwell, I fgure it best to let my

[ Profle] - The site design wsual way, and to use text in

[ Responsive ] - Why not shoit will enhance the users expers, hey this is pretty cool!

[ Social Icons ] - Social meidwill only increase in the comout there and make mysel ain handy when I get in the psome more reelance work opartners will be able to see wmaintaing proessionalism.

[ Grids ] - The entire site layo

umn grid scaled to 960 pixethe design will be developesite to adjust rom 960 px do

[ Navigation ] - The site will the act the it is a single pagtent). The links will slide the

[ Buttons ] - Buttons will be user to click on those items.colors which will help guide

Comment Stickies

Technical Markers

The wirerame was more dicult to me. Not because I dont have the skillsetor the ideas on how to put one together, but because I elt like once I startedto put the design together on the canvas, that is the way it had to be and had

to stay orever. It was like putting glue on my painting and slowly sticking itto the wall, knowing it wouldnt come o easily. Obviouslt this is not the case,but it is the way I elt. When sketching the concept, it was a lot more ree and

not as intense.

Wireframing the Concept

1

2

3

4

1

2

3

Once I started to nail down a basic style, it became much easier to envision

the path I wanted to take or the look and eel. I already knew t he contentinventory and the overall layout. I design mobile frst, then expand throughtablet and eventually to the desktop using the 960 grid. My inspiration came

rom multiple designs ound on dribbble.com.

1

1

2

3

4

2

3


10/12


Surface Concepts

Using the color swatches that I chose, the next part was to try and incorporatethe colors while keeping the white space as an integral part o the site.

I ound it dicult to get a look and eel that I really enjoyed. It was tough todecide on orders, boxes, colors, whether or not to use textures etc.

I dont know how many times I revised the site, but ittoo little. I kept having the urge to code it out and loo

I stayed strong and kept with it! I returned to my oldelook at other sites to see how they had presented thi


11/12

DGM 2740

Final Surface Concept


12/12


Style Guide

Color Swatch

Font Sets

R=252 G=174 B=82 FCAE52

RGB Hexidecimal

R=108 G=208 B=74 6CD04A

R=55 G=157 B=225 379DE1

R=251 G=112 B=114 FB7072

R=220 G=221 B=222 DCDDDE

R=109 G=111 B=113 6D6F71

Questrial (Body Style)

Fjalla One - Hero Text (Header Style)

Questral is a crisp, thin ont that will mesh nice with the eel o the site. It is veryeasy on the eyes and wont be seen too oten since there is very ew bits o text.

I wanted a sans-seri ont that is a little more bold but very crips and clean tomatch the style o the site.

Conclusion

To be honest, my site is not yet where I want it to be. I am, however, very pleasedwith the progress I have made. I have ound that this process takes a lot morethought than one thinks. I I had not t aken this class, it is very unlikely that I

would have gotten into these habits. I might have been one o those photoshopjunkies that Pro. Harper oten speaks about who, when they have a great ideaor a site, goes directly to photoshop and starts to build the site.

This process was dicult but very rewarding. In the process I have realized manythings that would work that I originally had thought o and also many things

wouldnt work that I originally wanted to implement into the site. As I ur ther myskills and continue to sharpen my design skills I will be able incorporate moreinto the site while still maintaining the clean, minimalist eel that I had envi-

sioned and ollowed throughout the site.

personal site documentation

Documents