PORTFOLIO SITE DESIGN PACKAGE KYLE HILL

Creative Brief
Making myself marketable is the main focus of this website. I want to make sure that my purpose is very clear. I have seen far too many portfolio websites that try to explain too much. I want to make a website that is able to showcase my skills and do the talking visually. I realized that I needed a place where I can point potential business partners, employers and clients. In doint so I will create transparency particularly for those who may have found me only through my work. It is one thing to meet someone in person and do business with them that way, and it is another to have someone blindly contact you and ask you do do business with them. With the transparency, there will be more trust between myself and the client. A main feature of the site will be the blog that I incorporate. This is because blogs are great for seo purposes as well as showing people who I am and my thought process in work and in life. I want the site to have a minimalist design that is very clean and uses whitespace effectively so the visitor can enjoy the expereince of the site.

Objectives
Create a personal portolio site that will be a place to showcase my previous work. Act as a landing page for the business cards I give out that will allow business partners and potential employers to learn about what makes me tick. Create a strong dynamic blog where I can voice my ideas and share my work to gain a strong fan base that I would have never previously had in person. For the site to act as my hub and offer ways for visitors to connect socially with me

Fig. 2 - These four principles were my focus points

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

Design Documentation - Kyle Hill

Portfolio Site Package

Recent Graduate / Freelancer

Mark I need a way to get my designs up on the web and to be mobile friendly
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 finds local businesses that need a face lift on their corporate image and then sells them with his expertise.
Learner Proficient

The thought of having to find someone to work with who is capable 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 to his designs he doesnt settle.

Has a great background in Art implementation Feels uneasy regarding the new movement

Key Characteristics

Goals

Learn more about how he can optimize his de-

Influencers

towards responsive design, but understands its importance. Hard worker looking to find partner to utilize his designs

signs for the web Understand the benefits of responsive design. Make solid connections to outsource work Expand his business and create a client pool

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

Questions

How much do developers charge for responsive Will my designs still look great on tablet/mobile? WIll my clients be interested in the possibility of

design services?

responsive design?

L Ja /CS v P a S R HP scr es /M ip po y t D ns SQ ig iv L ita e l D De ev ic Pr es ac tic P e C Te ch S D itua ec ti is on on a M l ak Feels helpless when it comes to web languages Hesitant handing his designs over to others and not getting the product he invisioned. Some customers already want mobile friendly sites. Time consumpiton of extra development DGM 2740 Principles fo Web Design

Im

Age: 23 Location:Lehi, UT Education: Fine Arts Focus: User Experience Design Employment: Self Employed Salary: $45,000

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 transforming some designs into a well thought out and designed webpage that is able to span many different 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.

Knowledge of
T em heo Ar en ry t D tai ire on ct io n

Technol-

Confidence

pl

TM

President and CEO

James I need to keep up on the latest internet trends and technology available today.
James is well educated leader that has an eye for small business opportunities. He has started several small businesses, all of which in the past have led nowhere. He is now the owner of Fusion Design which offers web solutions ranging from websites, apps, SEO packages and email marketing. He is a hard worker that is driven to find the elements to make a successful business. James is a tansplant to this area because of its reputation of incubating startup companies. He was able to start his company with skills he has targeted towards the design world. He picked up many of these skills from past business attempts. He now has knowledge of each of the services his company offers, but he realizes that things are constantly changing. James is passionate about customer service. This passion almost drives him crazy and makes him use much of his time and energy looking for new solutions and options to please his customers. He is a tough person to please and has difficulties trusting others to accomplish the tasks how he would like them done. James is now realizing that trying to do everything on his own is affecting many 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 his strengths are in the business side, and he needs to find more people who live and breathe technology. Doing so will enable him to worry more about leading the company to where he wants it to go and will allow him to spend more time with his wife and 3 children.
Learner Proficient

Key Characteristics

Feels overwhelmed with new technology trends

Goals

while trying to lead the company Feels the strains of work at home Hard worker & great leader Feels it difficult to trust new employees

To double the number of employees in the com-

Influencers

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

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

job at a corporation. process

Feels pressure from family members to get a real Has great ideas, but difficulty in implementation In the need of business partners and trusted con-

tacts and references.

Questions

Will I be able to find a reliable employee? Are interns a possible option? How can we implement new technology in our

growing company and maintain consistency?

Design Documentation - Kyle Hill

R es SE ig po O ita ns C l P ive ro u ss bli -P ca W lat in fo do rm w s O Pr M S ac ac tic O S e Te Si tu ch at io n D a ec l A w is on ar M eak in g D

Bu

si n La ess rg E t e C hic C orp s on o ne ract io ns

Age: 37 Location: American Fork Education: MBA Focus: Business Marketing. Employment: Fusion Design Salary: $95,000

Knowledge of Busi-

Technology

Confidence

Portfolio Site Package

Director of Business Marketing

Jane We need a way to improve our though process 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 from product developers to web developers. She is struggling to find 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 fine 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 find a way to inspire those around and beneath her to see the vision and the importance of the design documentation. She may not know how it is done exactly, but she sees the benefit of it from her friends in other companies. She hopes to figure something out soon, since the stress is becoming unbearable.
Proficient

Learner

Key Characteristics Hard worker Sees the importance of using design documentation Not willing to go with the flow 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 Will my boss be upset for delays with deliverables Will my team catch on an truly follow through with

Influencers
practice

Boss and team member perceptions Time consumption of learning new software and Possibility of distortion of designs Stress of ever increasing deliverables

Frustrations & Pain Points Feels alone in her feelings for the need of change Deliverables are sub-par due to the lack of well thought out processes Employees dont want extra work Could be held responsible for both poor deliverables and missed deadlines

process?

for this purpose? the process?

fra m S Be o ing f st tw Pr are a R ctic es es ou Sk rce s e Ex tch i n Pr pe g ac rie tic nc e e Te Si tu ch at io n D a ec l A w is on ar M eak in g

p Th Bu lem eor si en y ne ta ss ion Et hi cs

Im

Age: 33 Location: St. George, UT Education: Business Marketing Focus: Project Management Employment: Red Team Design Salary: $65,000

Knowledge of Busi-

Design Planning

Confidence

ire

DGM 2740 Principles fo Web Design

Information Architecture - Planning

It was a difficult decision on how I wanted to present myself through this portfolio site. I knew what I liked to see when I went to other peoples portfolio sites, however it is still a difficult task to know what is the best way to present yourself and the work you offer. I know that this will still change and be tweaked as I grow in my skills and my knowledge. Knowing all of this, I decided to go with the single-page layout. I did this because in my mind, single-page site are simple, effective, and can be clean when done correctly. I compare it to a resume, people want to cut to the chase. If I handed a 10 page portfolio with mediocre presentation to a potential employer, they are less likely to be wowed than if I put more effort into creating a stunning single-paged resume that incorporated my design presentaiton skills and my credentials. This is the mindset I had coming into the design process and what drove me through it as well.

Initial IA Concept
Goal: The goal was to take a generic idea and begin to organize the basic structure of the proposed site to filter options.

Landing Page
Single page or traditional break-up?

Work

es Capabilit
up into Break ns? sectio

Contact
lp Will this he me me beco visible?

BLOG

WIll using a bar graph be sufficient?

Will people really use this to contact?

Will sections have different feels?

What tech to use in site?

Main rotation

ky Stic ct ta n Co m For

Downloads

l Old Schoo Projects

Discard Pile
Fig 1 - Early sticky layout for me to invision the flow of the content presented on my site.

Design Documentation - Kyle Hill

Portfolio Site Package

Information Architecture - Site Map

Comment Stickies
[ Content Clarity ] - It is very important that the limited content of the site be used in an effective manner. Presentation of my skill set conveniently tied to the work which I have done will assure that I recieve the necessary attention that I seek with this portfolio site. [ Portfolio ] - This is the main section of my site. The purpose is to drive them to the contact me section where they will be able to send me a message or request a quote to work with me. Without the portfolio, I am just presenting empty words. These pieces of work from personal, work and school projects will be the staple for landing jobs/clients. [ Blog ] - My blog will be my face to the outside world. It will provide transparancy to allow the visitors to see who I am, what I enjoy as well as new content which brings returning visitors. The highlight section will be the Friday Favorite section where I present a critique/praise each Friday. [ Contact Section] - This is the goal of the whole site. For visitors to reach this part of the page and for them to send me a business query. Whether it be from a client, business partner or future employers. I need to make sure that I present this option in an easily accessed option (such as a sticky button).

2 1
Goal: Provide a single page landing area with content available from the site that is able to grab the attention of the visitor and lead them exactly to the information they are looking for. My blog will be located on a different page to separate content.

Landing Page

Portfolio
Goal: Allow partners to see my recent work as well as grab an electronic version of my resume leading them to contact me with work.

Capabilities
Goal: Graphically show my skill set to the visitor giving them trust in the skills as well as letting them know that there are still some areas in which I am discovering and trying to learn and improve.

About/Contact Me
Goal: This is the main goal, to provide the vistitor with means by which they can contact me, ask me questions, feedback or work requests at which I will easily be able to capture vital information.

Blog
Goal: Provide transparancy through my website. This will enable the visitors to see that I am a real human being with good values and a great work ethic.

Technical Markers
1

[ Socail Media ] - Links will be provided to mulitple social networking platforms (YouTube, Facebook, LinkedIn, Twitter etc) which will enable users to track me as well as see work that I am doing among others. [ Wordpress ] - The site will be based upon the Worpress platform. Its now extensible at the code level and a large assortment of plug-ins exist making the platform robust, friendly, maintainable, and FREE!

School Work Personal

HTML5 CSS3 Wordpress Javascript PHP Information Architecture

Life

Friday Fav.

Ideas

Iconography
[ Downloadable File ] - This is where I will provide an electronic version of my resume for an easy download.

Color Key
Main Landing Page Blog Categories

Page Sections. These pages will be on one single page with links.

Page Elements/Key Points

DGM 2740 Principles fo Web Design

Sketching the Concept

The sketching phase was very important for me. Until this time, I hadnt really envisioned how I was going to present my content so that is not only presented well, but it was also pleasing to the eye. I had many ideas in my head of what I could potentially do, but those were just abstract thoughts. I also enjoy site surfing and looking for great design. I find it very enjoyable because I know the effort that it takes to make something that is beautiful, and functional. Even though I spend a lot of time looking at other peoples sites and trying to figure out how they have done certain things, this doesnt mean that their methods would help me to achieve the goal that I ultimately wanted, which is to make myself marketable and present myself in a way so that others are begging to work with me. To do this, it is important to have inspirtaion from great work that others have done, however there needs to be a personal touch on the site and I needed to use something that fits my style and how I see things. I knew I wanted a minimalist, clean site that was not overwhelming. This was an easy task since I didnt have a lot of content to present. I also didntt want to have to explain everything on my site with text. I wanted to present my work in a way that it can do the speaking for me. This was the inspiration for my site.

Fig 1 - Early version of my destop sketch. I knew that I needed to have an idea of what it would eventually look like for desktop, but realized that the site needed to be built mobile first.

Fig 2 - Building mobile first is a new trend that helps layout the responsive nature of the website.

Fig 3 - My measured out wireframe sketch of desktop

Fig 3 cont.

Design Documentation - Kyle Hill

Portfolio Site Package

Wireframing the Concept

The wireframe was more difficult to me. Not because I dont have the skillset or the ideas on how to put one together, but because I felt like once I started to put the design together on the canvas, that is the way it had to be and had to stay forever. It was like putting glue on my painting and slowly sticking it to the wall, knowing it wouldnt come off easily. Obviouslt this is not the case, but it is the way I felt. When sketching the concept, it was a lot more free and not as intense. Once I started to nail down a basic style, it became much easier to envision the path I wanted to take for the look and feel. I already knew the content inventory and the overall layout. I design mobile first, then expand through tablet and eventually to the desktop using the 960 grid. My inspiration came from multiple designs found on dribbble.com.

Comment Stickies
1

[ Content Aggregation ] - It is very important that the limited content of the site and to present more of a visual experience for the user. While it is important that they know I know how to express myself well, I figure it best to let my work do the talking. [ Profile] - The site design was created to showcase my skills in a visual way, and to use text in an effective way will enhace this process. [ Responsive ] - Why not showcase my skills in my own site.. Obvously it will enhance the users experience, but this will also show customers, hey this is pretty cool! [ Social Icons ] - Social meida is a crucial part of marketing today and will only increase in the coming years. I found it best to get myself out there and make myself as transparent as I could. This will come in handy when I get in the point in my career that I will be doing some more freelance work on the side, because potential clients and partners will be able to see who I am both working and away while maintaing professionalism.

4 3

Technical Markers
3 1

2 1

[ Grids ] - The entire site layout is designed to work under a 12-column grid scaled to 960 pixels in width. This is critical as all aspects of the design will be developed under Responsive Design allowing the site to adjust from 960 px downward to 320 px. [ Navigation ] - The site will use a simple navigation system due to the fact the it is a single page site (except for some additional content). The links will slide the user to the selected section [ Buttons ] - Buttons will be used in my color swatch that will help the user to click on those items. My site wil be muted except for these colors which will help guide them through the site.

DGM 2740 Principles fo Web Design

Surface Concepts

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

I found it difficult to get a look and feel that I really enjoyed. It was tough to decide on orders, boxes, colors, whether or not to use textures etc.

I dont know how many times I revised the site, but it kept beeing too much or too little. I kept having the urge to code it out and look at it in the browser, but I stayed strong and kept with it! I returned to my older work and continued to look at other sites to see how they had presented things.

Design Documentation - Kyle Hill

Portfolio Site Package

Final Surface Concept

DGM 2740 Principles fo Web Design

Style Guide
Color Swatch
RGB Hexidecimal R=252 G=174 B=82 R=55 G=157 B=225 R=251 G=112 B=114 R=108 G=208 B=74 FCAE52 379DE1 FB7072 6CD04A DCDDDE 6D6F71

Conclusion
To be honest, my site is not yet where I want it to be. I am, however, very pleased with the progress I have made. I have found that this process takes a lot more thought than one thinks. If I had not taken this class, it is very unlikely that I would have gotten into these habits. I might have been one of those photoshop junkies that Prof. Harper often speaks about who, when they have a great idea for a site, goes directly to photoshop and starts to build the site. This process was difficult but very rewarding. In the process I have realized many things that would work that I originally had thought of and also many things wouldnt work that I originally wanted to implement into the site. As I further my skills and continue to sharpen my design skills I will be able incorporate more into the site while still maintaining the clean, minimalist feel that I had envisioned and followed throughout the site.

R=220 G=221 B=222 R=109 G=111 B=113

Font Sets Questrial (Body Style)

Questral is a crisp, thin font that will mesh nice with the feel of the site. It is very easy on the eyes and wont be seen too often since there is very few bits of text.

Fjalla One - Hero Text (Header Style)

I wanted a sans-serif font that is a little more bold but very crips and clean to match the style of the site.

Design Documentation - Kyle Hill