How to Design a Portfolio Website

How to Design a Portfolio Website


– Hi guys, it’s been a while since I made one of these graphic design how-to videos, but it is the new year,
and some of you guys may have resolved to
make a portfolio website for yourselves, or you
may be applying to college or to jobs and really
need to get it sorted out. So, I thought I might
give you a couple tips. Here are a few ideas on how to present your portfolio website
in the best way possible. The number one tip that I can give you is context, context, context. I was talking to someone
who was applying for jobs, and I looked at her website,
and it had really nice pictures of her projects, but no information about what the projects were actually about. So let’s say you’re including
this T-shirt design, and you only upload this picture
with no other information. I mean, it’s a nice design,
but I know nothing about it. Was it a school project, a commission? Were there any restrictions? Could you only use a
certain number of colors? How many revisions did you go through? Is it part of a series? But then, let’s say that you
uploaded all of these photos, and explained that it was
a self-motivated design that you sketched out a year
ago and finally produced, and then somehow it became your best-selling merchandise item. For every single project that you post, your audience cannot judge your
ability to solve the problem if they don’t know what the
problem was to begin with. There might be some projects
where you have a ton to say and you don’t necessarily want a crowded portfolio
page with tons of text. In that case, I suggest you keep a blog where you can ramble
off about your projects as much as you like. And then, also, have a
separate portfolio page with a one- or two-sentence description that links to the blog
post for more information. Along the same lines, put
together a substantial About page. This is your chance to really
show off your personality, so include a picture or even
a video, if you’re a YouTuber. Keep it casual. Don’t just rewrite your
resume in paragraph form. If you’re looking for a job, plainly state what your goals are, where you’re located, your e-mail address, and a link to your resume. If you’re active on Twitter
and Tumblr and Instagram, include links to those,
because employers love to see that you know how to use social media. However, I would advise against
including your phone number. Think it through. Why does anyone really need
it, in this day and age? E-mail is so much more
convenient, because you can reply to it on your own time,
and if it’s someone you don’t want to talk
to, you’re not forced to be sitting there on
the phone with them. If you need to give
someone your phone number after talking over e-mail a couple times, it’s totally fine, but no
one really needs it up front. Overall, though, the main
thing to keep in mind is, “If I didn’t know me, and
I was looking at this site “for the first time,
would I hire me?” slash accept into college, slash
whatever your situation is. “Do I get a complete picture
of who this person is “and what their skills are?” If not, you may have a
little bit more work to do fleshing out all of the
details that you want to share. Okay, so when it comes
to the actual navigation of your site, don’t get too fancy. Keep it simple. The design of your site is basically another portfolio piece,
and you wanna make it easy for people to find your work. Don’t make your visitors
chase the navigation around the screen or make it
a code that you have to break before you’re allowed to enter the site. Just keep it simple. As for the portfolio page, there
is nothing that I hate more than having to click a tiny
little thumbnail to see the whole piece for every
single photo that’s on the site. And yes, that is a screenshot of my own website from years ago. Don’t make the same mistakes that I did. Instead, I suggest what is
currently on my own site, obviously, which is just one big long page of large images that you
just have to scroll through so that you don’t even
have to click on anything. But, if you don’t like that
approach, that’s totally fine. You do you, just make it easy
for people to find your work. So when it comes to actually
creating your website, we’re all designers here. We’re not necessarily the best at code. There is no shame in having
somebody else code your website. My current website, I paid
one of my friends to code, and he did a great job and
did it in way less time than it would have taken me. I just gave him detailed
PSDs for every single page that was on the site,
and even though it was a pretty simple WordPress-based design, I consider that money so well-spent, because I avoided so much frustration if I had tried to just do it myself. If you don’t have any
friends who know how to code, there’s this site called
PSD2HTML, which Hankering uses all the time, they do really good work. But, if you don’t have
a lot of money to spend, or you just don’t want to
design a custom layout, there are plenty of
template sites out there where you just upload your images, and then, you’re done. I have personally never
used any of these sites, but I asked on Twitter
which ones you guys use, and these were your suggestions. First is BehanceProSite, which
seemed really easy to use, and the results are just beautiful. Plus, they let you build your
site without paying anything, so it’s easy to see if it
works for you and your work before handing over any money. Carbonmade is also a great one, and their website is so cute. Their sites are a little more simple, but maybe your work is really complex and you don’t want it
competing with other things on the screen, so simple
can be really good. If you don’t have a lot of work to upload, you can get your side for free. But, if you want the more robust package, it comes to 12 dollars a month. SQUARESPACE is another good one, and they have a lot of really professional-looking
templates to choose from. They are either eight dollars
or 16 dollars a month, depending on how much storage space and how many pages you need. Or, if you want to stick with something you’re already familiar
with, apparently deviantART also does portfolio hosting, and they have both free and paid options. Or, you could just set
up a new Tumblr to use as your portfolio. I’ll link to a blog post down below all about really
professional-looking Tumblr themes that you can use specifically
to make a portfolio site. So I know you’re going to
ask, but I cannot tell you, objectively, which site’s
the best since, number one, I have never used any of them personally, and number two, they all have
their pros and their cons. So you guys just have
to do your own research and figure out which one
is the best one for you. So, I hope that helped you guys
out, at least a little bit. I’ll link to everything
that I just talked about down in the description,
including my own portfolio site which, I know, isn’t perfect. I haven’t updated the
portfolio pages in forever. My blog is really disorganized. But I am not currently job hunting, so it’s not at the top
of my priority list. So, let me know in the comments
if you have any questions or if you have any more suggestions for templated portfolio sites that you can suggest to all of us. If you’re new here, I
have made plenty of videos like this throughout the
years, all about designing resumes, business cards,
YouTube thumbnails, logos. You can watch all of those
videos in a playlist right here. Or, if you are done
with boring design talk, and you just wanna make something, I put up a video last week
about three DIY projects you can make with old business cards. You can watch that video right here. Oh, and if you’re applying
to art school right now, I’ve made a lot of videos about
art school over the years. You can watch all of those
videos in a playlist right here. So, thank you guys so much for watching. Don’t forget to hit Like and Subscribe, and I will see you all next time.

87 thoughts on “How to Design a Portfolio Website

  1. Great tips as usual! Thanks, Karen 🙂 also what do you think are the best (preferably free) website design programs?

  2. Hey Karen, these are some really good tips on portfolio website building! I'm just applying for internships so it's been useful. One thing though, you said that it's not worth including your phone number. It may just be a UK thing, but companies here usually request them so they can spring random phone interviews on you! They are meant to test how good you are and how much knowledge you have on the spot. Apart from that, great video. Keep up the good work!

  3. It's like you knew I was stuck in a rut, Karen! One of my goals this year is to get a legit portfolio website going instead of my tumblr page and I've been so stuck. Thank you for this!! 

  4. great tips! i personally use wix for my photography portfolio/website where you can create your own website really easily from a template and there's the option to buy your domain too 🙂

  5. Hiya Karen!~ I'm from NYC, just graduated and looking for graphic design work is VERY hard. Could you do a video on where are some good places/websites to look for (entry-level) Jr. Graphic Design jobs? Thanks <3

  6. Honestly, depending on the person, I think your website should be kept pretty professional. Add a blog for something more casual but keep everything else as professional as possible. This is supposed to be for potential employers, not your friends and family. So I do think your 'About' page should be less casual than a typical blog post. Just my thoughts on the matter.

    As both a designer and a developer, I cringe at the template sites you mentioned. Even if you don't have a lot of work to display, you'll look much more professional with an actual website and not just a cut-and-paste template that thousands of other people are currently using. If you're not a developer in any sense of the word, then just find somebody to develop your design. I can't honestly think of any designer that would want to use another designer's work… Just my two cents, though.

  7. everytime i view a video i feel the urge to say you are awesome, you also remind me of one of my friends, she would love you, ps live long and prosper

  8. Hey Karen, another interesting portfolio website is http://cargocollective.com/ .

    As far as I can tell, they offer free minimalist portfolio websites, as long as your work is of a sufficient quality. To get in, you either need an invitation from another member of the cargo collective clique, or you have to send them an application with samples of your work for critical appraisal… But hey, you can't argue with a free website, or the extra kudos that come with acceptance.

  9. Hi Karen, thanks for the tips my question are there sites which offer designers a portfolio and order management platform at same time, something like fiverr.
    Thanks

  10. I can completely vouch for blogging about projects! It shows a great deal about what you get out of projects, which employers/admissions/ect love to see

  11. Not a portfolio tip per say but an art school tip. NETWORK NETWORK NETWORK. while you are in school. Hang out with people who aren't in your major but are in the same school. You never know where they might end up and what they might need when they get there.

  12. These graphic design videos of yours always seem to come at the absolute best time! Just worked on my portfolio today. Definitely taking your advice and putting it into play for today's revisions. 🙂
    Cheers,

    Elle

  13. other portfolio sites: indexhibit, crop. I actually wouldn't use deviant art, it's more catered for illustrators/animation and works aren't too impressive. There are also digital books like Blurb.

    For portfolio presentation use bigger images. Small images are so 90's/early 2000. Shoot the entire project so it fills up the frame. Then come in and shoot the details of the project. What's interesting about the project? is it letterpressed? does it have detail? Instead of shooting straight on, what about shooting from a different angle? Crop your details in an interesting way to make it more dynamic. Shooting is good because you get to art direct and you get to learn about your camera, settings and lighting. Shooting your projects also make school projects legitimate. If you shoot your projects on a surface, try to make it consistent with the other projects.

  14. Have you ever thought about a video regarding website design as a whole? You've designed a lot of websites of your own, and I'd love to see a crash course on web design, thanks!

  15. Hello Karen,
    I recently graduated with my major in Graphic Design. I struggled with web the entire time when I was in school and I don't personally feel like I understand web 100%. Will me struggling with web have a high chance of me not finding/ or getting a Graphic job? I would just like to know your opinion. Thank you! 

  16. hi Karen , my name is lulu and im a graphic design student at New York City Collage of technology … its not a fancy art school but i love it … thank you for your amazing videos there been a life saver … i discoved your channel late one nigth trying to study for a test and went to youtube to see if i can find a video to explain to me color theory …. thank yuo so much for your help … you are kinda my youtube crafter / diy role model and i know this is going to sound cheesy but i wish to be like you one day <3 

    have a nice day 
    your friend 
    Lulu

  17. Hey, Karen! I want to be a graphic designer, but I don't necessarily want to be a free-lance designer (not to offend anyone!), so what other job opportunities are out there for graphic designers? Thanks!

  18. I will deeply recommend wix.com! It's amazing, and easy to find out, and they have templates in category with over 100s of options. And you can of cures also make it from scratch. (y) 

  19. Not putting your phone number? Are you insane? If you're applying to a company, you should give them all of your contact info.

  20. Don't be scared about building your own website, all you need to be able to learn HTML coding is a basic text editor like notepad and a web browser. You could effectively build and host your website for free, including domain name using basic knowledge from google searches if you can't afford to pay someone to write code. In fact there are lots of freely available html/css templates so all you really need to learn is how to edit the content and then upload the files to a server, then do some basic configuration as a server admin (sounds harder than it is) and you're done.

    For more complex code you can find free scripts with instructions on how to use them, so really there is no excuse for not trying to make your own, other than lack of time 🙂 The pro's outweigh the cons unless you've money to blow, and have a reliable coder that will update your website quickly 😛

  21. **Update: squarespace is the standard and easy to use. followed by wix and cargo collective.

    correction: Krop(not crop as I spelled it) is another portfolio site. also Cargo.

  22. hi Karen, I know art schools and architecture schools are different. But any advise or books to read for people who want to apply to architecture schools (portfolio)? 

  23. 4:01 "If you don't have any friends…"  STINGER! – but very informative video… but I was lost at this point "PSD's" 3:49  This video has given me much food for thought on website layout – Much appreciated

  24. Coroflot is a good site to use. It's easy to use, you don't need to pay for it and it covers a wide variety of design fields. You also have a lot of companies posting career opportunities.

  25. Adobe Muse or Serif WebPlus are both good for building websites without code (although you can use code if you need to for something more complex) You can use templates, but as a designer you shouldn't need to.

  26. Loved these tips! Even for a graphic designer who is interested in web can take from this. Coding your own site does allow for you to take all the bragging rights, but purchasing a thene and then making it your own is just as good if not better! So far, WordPress is my favorite to manage my site and blogs and Ive become quite fond of Themeforest for quality themes!

  27. Hello, I need an advice about my portfolio. I want to add an animated video, but I dont know how to do it. Can I use websites like GoAnimate, Moovly etc.? Cause I want to make it fast and nice Im not a proffesional. Thanks 🙂

  28. This video is great! Making a portfolio website is such a great way to promote yourself! I actually have my own blog/portfolio website where I discuss graphic design, web design and so much more! I also make youtube videos on HTML5 and CSS for beginners who wish to make their own website! If you are interested you should check it out! If not, it's totally fine. Just wanted to leave some love Karen and tell you that you videos are GREAT 🙂 !!!!!!! xo

  29. Thank you so much for this, I have spent hours on wordpress like a lost dog, so confusing, I'm sure one of these alternatives will help me out a tonne!

  30. Looks like you didn't worry about responsive design on your portfolio site — will you, in your next version? One problem I had with developing my site was figure out how to show samples in a way that worked in a bunch of different sizes.

  31. I really found this and a lot of your videos inspiring and easy to understand, it can be overwhelming when you have to organize everything to sell your work and well you have helped making that a lot accessible for me. Thank you very Much!

  32. hello karen. im hafiza from Malaysia.. thanks for you sharing.. i love your tip.. easy to understand.

  33. http://www.one.com/en/?gclid=CIO3vOf7usQCFY-HaQodt6IADw&utm_source=youtube&utm_campaign=youtube_youtube_video_in-stream-cpv-usa&utm_medium=BANNER

    Do you know anything about this hosting site?
    Would it be good for a portfolio site?

  34. karen i'm loving Ur channel so  useful ! and Ur energy is just soo positive 😀 thanks 4 the tips keep up the good work 🙂

  35. Hi Karen, I'm thinking to start a portfolio website but I also love to talk and explain things when it comes to my work so I think a blog might be better, would it still be professional to combine the two and maybe have 'read more' options when it comes to explaining the projects I want to present in more detail?

  36. Thanks! Just started making my own web portfolio. I've used WP in the past but wanted something different and more customizable. Never heard of it until I found it, but I stumbled on Zoho Sites. I really liked it and made my portfolio on it, but you'll probably want to learn a little bit of basic html… it's a good skill to have and doesn't take too long to learn.

  37. This video is great Karen. I have a portfolio and have been called by many recruiters to submit my resume to their clients. However, it never goes to the next stage with their clients as far as them wanting to schedule an interview. I guess my portfolio isn't doing it :/

  38. well I just realized this video is like two years old…..does anyone know if these sites are still good to use? ive only heard of square space.

  39. I'm a computer science student delving into UX Design and my projects have potential but they're UX/UI designs are not the greatest compared to my competition (ux designers applying for the same internships as me) I'm designing my website right now and to try to make but for the ok design, i'm trying to include all the information I possibly can

  40. Probably the most in-depth video a about design portfolio and template. Thank you for the valuable and enjoyable 7 mins.

Leave a Reply

Your email address will not be published. Required fields are marked *