Basics of Portfolio Design [2012]

1. Content and Purpose: Hey everyone. Welcome to the Skillshare class. I'm excited to be talking to you guys today about how to present your online portfolio. Yeah, I just want to go over a couple of things, what we're going to cover in this class. We're going to start with content and the purpose of the site and then we're going to move on to really choosing a platform that works best for you. Then talk about the design of the site and how it looks, and wrap it up with some finishing touches including your sign up domain names and that sort of thing. Also just to go over that, this is an online class, so as you go, you can be working on your project and uploading it to the project gallery to get feedback from your fellow students. Then you'll be watching these videos and going through the project guide where all the steps are outlined in a lot of detail there for you as well. Yeah, just a bit about myself. I work here at Skillshare as the Dean of the School of Design. I'm really excited to be teaching this class. It's something I've been helping friends with for a while now and I'm excited to be sharing it all with you guys today. The first unit is content and purpose. Here we're really going to be thinking about the content for the site. That's important before you get into the design of the website because it helps you to make those decisions later on. That's why we're approaching that right from the get-go here. The first step is really about setting goals and thinking about what you're trying to achieve with your portfolio website. Are you trying to get a job? Are you're looking for an internship? Are you here to find maybe new freelance clients, and that sort of thing. Then what are you going to use it for? Those are things to keep in mind. I think the best thing to do is write down some of these thoughts. You can reference them as you go through the project. The second step is to select the actual projects that you're going to be including on your portfolio website. A couple of things to keep in mind here are to curate the projects that you'll be including. Don't feel like you have to include everything that you've made over the years, but really pick some specific projects that can tell a story about yourself and your work and that align with the goals that you set for the site. The next step is to collect images and copying the content for the site. Things to think about here are getting the best images for the site. It might be, they do motion graphics or maybe that you do print design, in which case you might want to photograph that work in those different settings that works best for it. Then also a lot of portfolio sites, I think really focus on the images, but it's also important to get some context of the work. You can do this by writing some descriptions to go along with each of the projects. I think this is a really nice touch because it allows anybody that's viewing your site to really get a sense of what the project was about. You can also talk about the process that you went through, some of the problems you solved and give some more details about that project. Then you also want to think about adding additional pages that you're going to be including on the site. This can include things like your About page. There's other types of pages too, you can do a Contact page or Services page, where you might list out the different types of jobs that you are looking to work on. These can help to paint a fuller picture in addition to the core content of your site, which is really the projects. Lastly, for this unit, you're going to want to collect some inspiration. You can look at some examples online. Think about who is the artist, or designers, or photographers that you admire and check out their websites and see how they actually present their work online. Collecting that inspiration and making some mood boards will help you as you move forward into the rest of the class so you can get a sense of what else is out there online already. Up next, in the next video, we'll do platforms and tools, and looking forward to it. Thanks. 2. Platforms and Tools: Everyone, welcome back to the second unit of the Skillshare class. In this unit, we'll be covering platforms and tools. We'll cover four core platforms that really help you to build your portfolio websites. Thinking around this is that it allows you to jump off and get really started on your site instead of building it from scratch. These platforms provide a backend interface that's really easy to use, that allows you to update and edit your website. It gives you the tools that you need to rebuild your site and focus on the content and not so much having to write a lot of custom code. The first step of this unit is to pick a platform. There's four that we're going to cover, but there's lots of other ones too, which I've outlined in the project guide. Feel free to share other ones that you might know of as well. The first one is Cargo. This is the one that I've been using for years now. A couple of details about Cargo is that it's $66 a year, which is pretty good. Also has advanced CSS and HTML editing. If you do want to actually get in there and get nitty-gritty, you can do that. The second one is Behance. Behance has its normal network site, but they also have a product called ProSite. That allows you to create custom portfolio websites that don't have any Behance branding on it, so it looks just like your own site. A couple of details about Behance is that it's $11 a month. It's really nice because you still have a profile on the larger Behance network as well. You get that access to all those other features that they have built, and also that community there is really nice. The third one is Virb. Virb has been around for awhile. It's $10 a month. Virb is nice because it has blogging built right into it, and you can input your Tumblr Feed and things like that. It's also mobile responsive, so it will work well on a smart phone or a tablet device. The fourth one is Squarespace. Squarespace has been around for a while. It's known as drag and drop tool, so you can create your website with this intuitive interface. It's also responsive. It also have great e-commerce features. If you're an artist that wants to sell prints or photographs or pieces of your work, they have really great integration for that. This one ranges from $8 to $16 a month. The next thing you want to do is actually sign up for an account. You can check out each of those websites and really choose which one's good for you. Each have a long list of the different features. Most of them having some common core features are the same and there's some more specific things I just covered that might help you in choosing which one is best for your website. Remember that these are actually paid sites, but again, there's some other ones that are listed in the project and they're free. The third step is to upload your content. Go ahead in whichever platform you chose, upload your projects and your pages, and don't worry about what it looks like at this point. That's not something you need to really think about at this point. It's just important to get the content up on the site and see what it feels like with all the projects and pages there. Up next, we'll actually get into the design of the site and the visual aspects of it. I'm looking forward to that. Thanks. 3. Design and Themes: Hi, everyone, welcome back to Unit 3 of this Skillshare class. In this unit, we're going to be covering design and themes for your portfolio website. We really can get to understand what your site should look and feel like. The first step is to choose a template. You should start with one that works for the content, and the purpose of your site, and the goals that you're trying to achieve, and then you can customize it from there. Choose one that you can build upon us as we go. Here are some examples I wanted to share with you. This is a traditional layout, so you have the column on the left, which list out all of projects, and you also have the corresponding thumbnails in the main area there. This is one on [inaudible] I believe and it scrolls left to right so each columns are different project. This one just a full grid so there's no left or right hand navigation and just shows you the thumbnails, so you just really focus on the work in this one. This is one that's more of a [inaudible] design, so it doesn't obey that grid as much and allows the projects to bounce around and be in different spots on the page. Those are some examples of themes and templates. In the project, I've linked to the options for all the different themes for each of the platforms. The next step is to choose the project thumbnails for your portfolio website. Things to think about here is how they all work together and how when someone visits the site, what they're going to see with all your thumbnails there at once. They should have well-defined edges, not too detailed, and then also, when you're saving the them out in Photoshop, save them for web so that the site loads faster. Some are nice and small. Here's some examples for thumbnails. We see people do a close in shots of the different projects. They zoom in on some details and fills out that thumbnail nicely. You can also include like the project title on the thumbnail as well. The last step is to add in your personal brand, so if you have one, feel free to add it in the header. All the four platforms that we talked about earlier have the ability for you to add in custom header or a custom logo for your site, and that's a great way add personal touch. But if you don't have that at this point, no worries at all. Just adding your name or the name of your site and it'll be good to go. Here's some examples of that. People have different logos or different styles that they've used in their branding, some handwritten, personal logos there. Whitney Dail at the bottom has her look and feel with her different typography and the rest of the site has the thumbnails underneath it. There's some things to keep in mind as you design your headers. Up next, we have the finishing touches. We will cover some technical things and wrap up the portfolio website. Thanks. 4. Finishing Touches: Hey, everyone, welcome back to the Skillshare class. This is Unit 4, its the last one of class. It's about Finishing Touches, couple of different things you can do to get your portfolio website ready to share it with everybody and really wrap it up nicely. The first thing to consider is Domain Names. There's a different approach to do this for each of the platforms and you can find the how to guides that are very specific for each of the platforms and the project guide for this class. This is great addition for your personal brand. You can put your own custom domain name on your business card or your Twitter profile and really do that as well. That's domain names. The second thing to consider is how you're going to promote and share your portfolio website now that you have it all set to go. You can do this by adding it to your email signature so whenever we send an email, it's right there at the bottom and people can easily find your work and see your portfolio. You can also include on your social media profile, on your Facebook or your Instagram feed and send people to see your work as well. The third thing to consider is any add ons that you want to do. Most these platforms, like adding a blog or online store, so you continue telling stories about what you're working on or share some things for people to purchase. That's a way to keep building your portfolio website and keeping it fresh as you go. The fourth thing to keep in mind is that, make sure you update your portfolio website, now that you have it all built. Whenever you're doing your project or you have a new piece to share with everybody, feel free to post it up on your portfolio website and then share that out that you've actually update it. That can keep people coming back and checking out what you're working on. That pretty much wraps it up. Thanks so much for taking this class. It's been exciting to have you all here. Make sure you share your projects, to get feedback from everyone else in the class. Then also, please leave some feedback on the class as well. I'd love to hear what you've thought of it. Thanks so much.