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).
