An online portfolio is essential for designers working in almost any field. Sites like Behance are suitable for hosting some work (especially extended/deep portfolios), but a well-designed personal site lets you showcase the highlights of your design work while communicating in your own voice and style. For your final assignment, you will design a portfolio site presenting a brief introduction, an image gallery (or galleries) with lightbox style popups, and links to your resume and email. You can break the sections apart across multiple pages, or design a layout that combines the required elements in a single document – whatever makes the most sense for your specific content.
- portfolio hosted and “live” online – you will upload and host your portfolio on a commercial hosting service, using a personal URL you choose yourself. (If you already have a personal domain and/or hosting account, you can use that instead.)
- gallery must have at least 9 images – content can be broken up by theme/subject/etc. into multiple galleries if you want.
- resume in .PDF format – you can lay it out in HTML as well, but a downloadable file is useful for anyone thinking about hiring you.
- no minimum/maximum number of pages – some designers like breaking their work up across multiple pages (see my sister’s portfolio) while others opt for a less-organized but more mobile-friendly single scroll (like mine). Every body of work is different, and every designer’s communication style is different.
Step 1: Mockup
- start collecting assets for your site. An “asset” is a piece of media or data that you want to use in your site: high-res images for your portfolio, graphics and logos, fonts, etc.
- create a Photoshop document – you can use any resolution, but I recommend 1920 x 1080 pixels (16:9 aspect ratio) – unless you’re making a single page/scroll layout, in which case your mockup should be as tall as you need.
- place assets and page elements in the Photoshop document to mockup your layout
- export your mockup as a .JPG (file -> export -> save for web (legacy)) and post to OpenLab under the categories “Site 3: Personal Portfolio” and “Photoshop Mockup” – DUE 4/27
Step 2: Adapted HTML
- create a new HTML document (you can use these blank starter files).
- recreate the mockup layout with HTML and CSS. You can use Photoshop to check the size and positioning of elements, and to create new assets (such as thumbnail images).
- use the same CSS to generate drafts of any remaining pages for the site.
- DUE 5/4 (checked in class)
Step 3: Apply Lightbox
- add a lightbox plugin for your gallery – I walk through this process in class, so make sure you have your layouts ready!
- apply the lightbox to your gallery and add any customization or additional interactions
- Working Gallery DUE 5/11 (checked in class)
Step 4: QA, Upload and Onward
- do a thorough QA (quality assurance) check, focusing on links, images, and the lightbox popup.
- upload your site and all assets to the “public_html” folder in your hosting account.
- take a screenshot of your hosted site – if it doesn’t show up after uploading, trying clearing your browser’s cache and reloading the page
- post the screenshot with a link to the hosted page to OpenLab under the categories “Site 3: Personal Portfolio” and “Final” – DUE 5/18