OBJECTIVE

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.

REQUIREMENTS

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

PROCESS

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

DUE MAY 18