1

project brief
for
“Alan’s Design World”
 2

about alan
Alan is a 30-year old freelance UI designer and
web developer based in New York.

He worked with big companies like Apple and

Microsoft to design and code websites and
mobile apps.

Alan is available for freelance work and can be

contacted using the following information:

Email:
[email protected]

Phone Number:
(704) 555-0127
 3

logo
Alan provided us with his logo.
 4

website structure
Alan would like a 3-page website that would
showcase his work, provide information about
his services and allow potential customers to
contact him. The 3 pages are:

•Home Page
•About Me
•Contact

home page
The homepage should show a short description
of who Alan is and what he does, along with
a collection of his projects and a call-to-action
to the contact page.
 5

He would also like to see logos of companies

he worked with and maybe some testimonials.

about me page
The about me page should provide more infor-
-mation about Alan, some pictures of him, his
services and main advantages, testimonials and
a list of tools Alan uses for design and devel-
-opment.

contact page
The contact page is all about providing ways for
clients to reach Alan: contact form, phone
number and email.

Also, Alan would like an F.A.Q. section.

 6

header & footer

The header and footer will be relatively the same

for all pages and contain the following elements:

header
•Logo
•Navigation menu
•Social media icons (Twitter, Instagram, Dribbble)

footer
•CTA area that links to the contact page but also
offers immediate contact information (email, pho-
-ne number)
•Copyright text
•Links: Privacy Policy, Terms & Conditions
 7

•Social media icons (Twitter, Instagram,

Dribbble)

(P.S: The CTA area is only displayed in the home

and about pages.)

website content
Here is the website content that needs to be dis-
-played.

HOME PAGE

Hero Section

Title:

Freelance UI Designer & Web Developer

 8

Sub-title:
Hey there, I’m Alan

Description:
I help business grow by crafting amazing web
experiences. If you’re looking for a designer
and developer that likes to get stuff done, let’s
talk.

The hero area should also display:

•Contact email and phone number
•Button for scrolling down to the portfolio section
 9

CLIENT SECTION
Display a list of a few prominent client logos:
•Amazon •GitHub
•Adobe •Microsoft
•Apple

PORTFOLIO SECTION

Title:
My Work

Description:

I specialize in website design and development,

but I’ve also designed successful iOS and
Android apps.
 10

Display a list of client projects featuring a single

image or a collage of images.

Also display a testimonial showing:

• Quote
• Author name, position, avatar

about me page
Description Section:
I was born in Henderson, Nevada almost three
decades ago. From an early age I showed in-
terest for computers and that grew into a pas-
sion during high school.

I got into web design and development in col-

lege.
 11

Attending the Carnegie Mellon University in Pitts-

burgh was the best decision I ever made because
it showed me what I wanted to do for the rest of
my life.

Currently I help businesses all around the world

by designing and coding websites and mobile
apps.

I had the pleasure of working with big companies

like Apple, Microsoft and Amazon, just to name a
few.

Right now I’m based in New York.

 12

SERVICES SECTION

Title:

I can design and build a responsive and acces-

sible website.

Description:

My goal is to build accessible and responsive

user interfaces for the web and mobile, while
preserving the best practices for proper user
experience.

Title:

I can design and build an eCommerce store.

 13

Description:

I have extensive knowledge of development on

the front-end and back-end so I’m able to de-
liver a completely functional eCommerce web-
site.

Title:

I can design and build a mobile app for iOS

and Android.

Description:

I recently started designing and coding mobile

apps and I love it.
 14

It’s a different process compared to traditional

website design but I’ve been successful in all
projects so far.

advantages section
Section Title

Regardless of project size, you will always get:

Title:

1. On-time delivery

Description:
I know time is money so I don’t want to waste
yours. Or mine. So I guarantee that I will always
deliver what you pay for as promised.
 15

Title:
2. Quality

Description:

I don’t want to put my name on something subpar

so my first concern is always quality. No matter
what, you will love the end result.

tools section
Tools i use for Design:

• Sketch
• Figma
• Adobe XD
• Adobe Photoshop
• Adobe Illustrator
 16

Tools i use for Development:

• Visual Studio Code

• Codekit
• iTerm
• Homebrew

testimonials section
Quote:

“Working with Alan has been an absolute

pleasure and we’ll definitely turn to his expertise
for new projects.”

Author:

James Wittings, Marketing Director at Amazon.

 17

Quote:
“Alan is great. We worked together really well
and we’ll definitely contract his services in the
future.”

Author:
Sandra Marks, Creative Director at GitHub.

contact page
INTRO SECTION

Title:

If you’re looking for a designer and developer

that likes to get stuff done, let’s talk.
 18

Sub-title:
I’m currently available for freelance work.

f.a.q section
Section Title:
Before sending me a message, here are some
things you should know:

Question:

What timezone are you in?

Answer:

I live in New York so EST (UTC -5).

 19

Question:

Do we make a contract?

Answer:
Absolutely. A contract protects us both and
ensures that both parties have a good
collaboration.
Question:

How much do you charge for a website?

Answer:

There is no fixed price. Every website is different

and I’ll only be able to give an accurate offer once
we’ve had a talk.
 20

Question:

Do you charge by the hour?

Answer:

I do not charge by the hour. I prefer to eliminate

the stress of counting the hours. Instead, I charge
a flat fee per project, regardless of duration.

Question:
Are you working with a team?
Answer:
Not at the moment. I’m flying solo.

contact form section

Section Title:

Got a project in mind? Use the form to

 21

give me as much detail as possible and I’ll get

back to you as soon as I can.

Form Structure:

• Name
• Email address
• Project details
• Budget range
• Timeline
• Submit button: Let’s do this

design guidelines
Alan wants a modern looking website that would
be easy to use by anyone. He likes to keep things
clean and simple and loves designs with lots
of whitespace.
 22

In terms of color, he really likes the color scheme

of his logo so the website should probably mirror
that in some shape or form.

He will be developing the website himself and

will be making it responsive so we need to make
sure our design works well on other screen sizes.