0% found this document useful (0 votes)
28 views16 pages

Guide

The document provides a strategy guide for establishing an effective portfolio as a designer. It recommends getting at least two real client projects to demonstrate experience. Potential clients for initial pro-bono work include friends/family businesses, startups found on Twitter/Discord using relevant hashtags, and local Facebook groups. The portfolio should have a professional domain name, feature high-quality case studies of work, showcase skills/services, and include contact methods. Real-world experience with clients is essential for credibility.

Uploaded by

ezrob1982
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
28 views16 pages

Guide

The document provides a strategy guide for establishing an effective portfolio as a designer. It recommends getting at least two real client projects to demonstrate experience. Potential clients for initial pro-bono work include friends/family businesses, startups found on Twitter/Discord using relevant hashtags, and local Facebook groups. The portfolio should have a professional domain name, feature high-quality case studies of work, showcase skills/services, and include contact methods. Real-world experience with clients is essential for credibility.

Uploaded by

ezrob1982
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

https://designcourse.

com

Strategy Guide

Hello!

The DesignCourse Strategy Guide is meant to give you a game plan based on your

specific needs. You should find success if you commit to the plan based on the duration of

time as specified during our meeting.

High Priority Objectives

1 Establish at least 2 projects for real clients, that are fully live

2 Establish a social media presence

3 Demonstrate your Frontend skills with GREAT looking projects ***

Proceed to the next page for more details outlined in each step mentioned above.
https://designcourse.com

Strategy Guide

Establishing Real Projects

An effective portfolio needs at least two projects for real clients. Otherwise, potential

employers and clients alike will quickly realize that you do not have enough credibility or

experience. Put yourself into the shoes of someone who needs your services. Are you likely

to hire someone who hasn’t built a real project?

Projects that you’ve created from tutorials or courses you’ve watched have very little

value. They might be able to land you an internship, but they won’t do much else.

This begs the question..

How can I get real projects if I have little to no

experience working with real clients?

Great question! And you might not like the answer, but you need to be willing to work for

very little income or free for these two projects. Many businesses and organizations

starting out have very limited funds -- it would be difficult for many of these businesses to

say ‘No’ to free.

Believe it or not, you’re still benefiting from this relationship. You gain a valuable project for

your portfolio, which will then allow you to make money in the future. And it wouldn’t hurt

to add the stipulation that they pay you a small amount, should they decide to use your

work.

The idea that all work must be paid is nonsense. You need to do what it takes to establish

a complete portfolio.

On the next page, I will show you where and how you can find these clients to jumpstart

your portfolio.
https://designcourse.com

Strategy Guide

Establishing Real Projects (Continued)

Now that you know you need real projects, where can you find real businesses and

organizations?

FINDING CLIENTS FOR STARTER PORTFOLIO PROJECTS

Start with your own family & network

Do you have any friends or family that have businesses that are either new, or

existing businesses that have projects that could be revamped?

Twitter

Query your following, if you have one. If not, do a search for hashtags such as

#startup #buildinpublic #buildinginpublic #startup #saas, etc..

Discord

Use disboard.org to find discord communities of entrepreneurs and startup

founders.

Facebook Groups

Most communities have Facebook groups if you wish to find local clients. Make a

post offering your free services. Be honest. Tell them you need to build up a portfolio.

Contact these individuals, build a relationship, and provide them with your services.
https://designcourse.com

Strategy Guide

Your Portfolio

Once you have at least two solid projects, you need a portfolio. This section of the

document will provide you with numerous checklists to ensure you have the best portfolio

possible.

But first, you might be wondering..

Why do I need a portfolio? I can just send clients or

employers links to my work..

You certainly can do that, but it’s not as preferable as having a central location about you

or your business. Having a single website where all of your latest work is listed out, along

with your services and contact info is the best way to ensure your success.

All great portfolios have these in common:

PORTFOLIO MUST’S

Located on a unique domain name

Feature your latest work, preferably in case study format

Excellent project thumbnails

Feature your skills & services

Multiple contact methods, including an embedded form


https://designcourse.com

Strategy Guide

Your Portfolio

A unique domain name

Your portfolio needs to be accessible in via a domain extension, and not hosted on a

subdomain of an existing service. There are several reasons for this.

First, professionalism. You want your business -- your brand, to be taken seriously.

Which do you think people will take more seriously?

myportfolio.freewebhost.com myportfolio.com

Clearly the simplified domain is most professional. Additionally, it’s way easier to type,

assuming you’ve chosen a good domain name.

You also do not necessarily need to use a .com. There are many domain extensions

available today that you can use that would work just fine.

A great resource I like to use to help me find domain names is

instantdomainsearch.com.
https://designcourse.com

Strategy Guide

Your Portfolio

Feature your work

This is the no-brainer part. The number one factor most clients and employers care about

is your work. Your name, location, age, gender -- these are all secondary to the quality of

work you produce. That’s why having real projects that are created and presented in an

excellent manner are so important.

Naturally, you want to feature your best work first. First impressions matter.

I also advise placing a link to your work as the primary call-to-action in your hero section.

A secondary call to action can be used for the client or employer to hire you/contact you.

Example:

You need a rockstar UI/UX’er

Great, I’m your guy. I have over 10 years of

experience designing the latest and greatest

websites and apps.

My work Hire me

Primary CTA Secondary CTA

Your work should be the section that proceeds your hero section (the top section of your

portfolio).
https://designcourse.com

Strategy Guide

Your Portfolio

Excellent Project Thumbnails

When you list out your projects, you need excellent thumbnails. If your thumbnails are bad,

potential employers and clients may not even click on them. They might think, “Wow, this

is ugly.”

Here are some examples of bad thumbnails:

In this example, it’s just a Featuring layouts in Desaturating or altering a

random screenshot of a laptops and phones (in this thumbnail in this manner

(cut-off) section of a manner) is an outdated greatly distorts the original

layout. practice and should be design.

avoided.

On the next page, we will take a look at good examples of thumbnails.


https://designcourse.com

Strategy Guide

Your Portfolio

Excellent Project Thumbnails

Here are some examples of good thumbnails:

Featuring multiple You also do not have to Simply adding a

screens of the project apply a rotation. background with white

with a slightly rotated space around a layout

angle is a great way to works as well.

feature a project.

Note: If the designs you’re featuring are not good in terms of UI, it will be difficult to make

the thumbs look good as well. This is why it’s imperative that if you’re a UI/UX designer, you

quickly develop your UI design skills as much as possible.

On the next page, we will discuss featuring your skills and services.
https://designcourse.com

Strategy Guide

Your Portfolio

Once you have at least two solid projects, you need a portfolio. This section of the

document will provide you with numerous checklists to ensure you have the best portfolio

possible.

But first, you might be wondering..

Why do I need a portfolio? I can just send clients or

employers links to my work..

You certainly can do that, but it’s not as preferable as having a central location about you

or your business. Having a single website where all of your latest work is listed out, along

with your services and contact info is the best way to ensure your success.

All great portfolios have these in common:

PORTFOLIO MUST’S

Located on a unique domain name

Feature your latest work, preferably in case study format

Excellent project thumbnails

Feature your skills & services

Multiple contact methods, including an embedded form


https://designcourse.com

Strategy Guide

Your Portfolio

Skills & Services

Secondary to your work, you need to feature your skills and services you offer.

POS
RSTI B E DE
F OLL I O MSUGNE
I ST’SR S K ILLS POS
RSTI B E coder
F OLL I O MUST’
SS K ILLS

UI UX Design
Located on a unique domain name
Located on
Frontend and/or
a unique
Backend
domain
Devname

Identity
Feature Design Web
your latest work, preferably in case /
FeatureMobile
study
your / Desktop
format

latest Apps
work, preferably in c

Responsive Design
Excellent project thumbnails
Web 3 / dApps
Excellent project thumbnails

Software Knowledge
Feature your skills & services
Scripting / Coding
Feature your Languages
skills & services

Such as Figma, Webflow, Sketch,


Such as HT ML, CSS, J avaScript, PHP

Multiple
etc..
contact methods, including an
Multiple
embedded
ython, etc.. P
contact
formmethods, including an

Frameworks

Such as React, Vue/ N uxt, Svelte, Laravel, etc..

Note: It is not advisable to put progress bars indicating your skill levels. Simply list out the

skills you have and say no more regarding your proficiency level.
https://designcourse.com

Strategy Guide

Your Portfolio

Contact Methods

You want to ensure you provide potential clients and employers with multiple contact

methods. This includes an embedded form, along with email, social media and a phone

number.

Providing individuals with as many contact forms as possible will yield the best results.

Example:

Let’s talk!

Name

[email protected]

555-555-1234

Email

Message

/yourhandle

etc...

Send message
https://designcourse.com

Strategy Guide

Social Media Presence

A well-established social media presence will significantly help your endeavors as a

freelancer, or one who’s seeking traditional employment. An established and active social

media presence provides a signal to potential clients and employers that you’re:

active

someone others find worth following

knowledgeable.

Conducting yourself as a brand is very important. The goal isn’t to use social media in the

context of a personal platform for random thoughts, ideas and opinions -- but rather one

that is specifically curated to featuring both your work and your knowledge.

Doing this will serve two purposes:

1 Audience building 2 Opportunity

Sharing your work, tips & tricks, case The obvious benefit of a large social

studies, etc.. will generate followers. One media following are the natural

benefit of this is social proof. Potential opportunities that arise from the

clients and employers are more likely to exposure.

trust someone who’s active and has a

large following. Indirectly, the social proof gained by a

following will nudge prospective clients

and employers in the right direction.

In the next sections, we’ll dive into a specific social media strategy.
https://designcourse.com

Strategy Guide

Social media presence

Platforms

There are many social media platforms out there, but there are a few key platforms that I

highly recommend.

First, there are two platforms that I recommend both designers and coders establish --

and that is Twitter and LinkedIn.

Twitter LinkedIn

Twitter is a great platform that has many An absolute must for any freelancer or

designers and coders. It’s excellent for those aspiring to a traditional employee

networking, as others in your shoes are position.

eager to learn and connect.

Additionally, I recommend these networks if you’re a designer or coder:

PO
u i /R
uTxF O
deLI
sOigMnU S T ’ S Pr
f Oo
RnTF
tO L Id
en O/ c
MoUd
SeT’S

Dribbble.com Github.com

Remaining active (green blocks)

Behance.net

Dev.to & Hashnode

Publishing content
https://designcourse.com

Strategy Guide

Social media presence

Content Strategy

You have to remain active in order to build up your following on social media. There are

many ways to build an audience. Here are a few methods:

ui/ux design FRONTEND/CODE

How-To’s How-To’s

Show people how to design something. Use one of the many code screenshot

Give them a tip/trick for a specific piece of tools and explain a particular piece of

software. code.

Your work Your work

Did you just design something that you Did you just complete a coding project for

think looks great? Share it! a client? Share it!

Case Studies Case Studies

Just finish something for a client? A case Just finish something for a client? A case

study is an excellent piece of content that study is an excellent piece of content that

others are likely to enjoy. others are likely to enjoy.

Top X Lists Github Repos

Research some aspect of design and Share useful github repos for various

create a top X list. Example: Top 5 free serif languages.

fonts, top Figma plugins for free photos.

Before/After

Notice bad design somewhere? Do a

quick before/after presentation.

Engaging with others & commenting on their posts

is an excellent way to build followers.


https://designcourse.com

Strategy Guide

Social media presence

Publication & Timing

The degree to which you publish content in the form of articles and/or posts/tweets will

depend on your availability. The more the better, as long as the quality doesn’t suffer.

minimums

Twitter, LinkedIn & Similar Blogging Platforms/YouTube

Post/tweet at least once a day. You can Create content for these types of

syndicate the same content across these platforms at least once a week.

social platforms.

Engagement with others

Engagement in the form of commenting

on other’s posts should be done at least a

couple times per day.

If you adhere to the above schedule, you will start to build a following. Be sure to utilize

appropriate #hashtags for maximum exposure.

Are you hesitant because you’re a beginner and

fear no one will listen? Nonsense!

Sharing what you learn, as you learn, is beneficial

content to others in your shoes.


https://designcourse.com

Strategy Guide

Integrating Interaction & Animation

One thing I noticed is a lack of any interaction or animations/micro-animations. I highly

suggest at least integrating some subtle interaction design.

Below are popoular ways to integrate interactions:

GreenSock (JavaScript Animation Library)

Threejs (WebGL in the browser)

CSS (CSS itself can handle a lot of animations).

I recommend taking a look at both CSS animations and then GreenSock at the very least.

Threejs can become quite complex, so it’s not a necessity for most projects.

The three sites mentioned previously are great for inspiration as it pertains to animations,

micro-animations and more:

awwwards.com

cssdesignawards.com

thefwa.com

The following is a list of potential UI elements that you can integrate animation into:

Button states (hover, click)

Transitions (fading in, moving elements, from point a to point b)

Scroll-activated animations (User scrolls down, elements

animate)

Parallax (A common scroll-activated animations where certain

elements move at different speeds)

Lottie Animations (A great resource for predefined animations

you can integrate into your projects).

You might also like