- Do not edit this file.
- Do not start this project until you have read these instructions carefully.
You’re tasked with creating a presentation — or slide — deck of the designs for your own portfolio web site. No code is required for the midterm; you’ll implement the HTML and CSS of the designs in this assignment for your final project. The steps required to create your presentation are discussed below, and I’ll elaborate on each step in class.
Important note: Follow these instructions in the order listed below.
Prepare the content for your site. This should include information about who you are, how to get in touch with you, social media data, which portfolio pieces you plan to include, what you’ll say about each piece, any press you’ve received, any exhibitions you’ve been a part of, your education, a picture of you, and anything else you think will enhance your portfolio. No ipsum, or filler, content may be used.
In preparing your content, look at portfolios from other artists and designers, including those of undergraduate, graduate, and alumni from other design programs, such as RISD, SCAD, Cal Arts, Pratt, SVA, Parsons, Yale School of Art, and Royal College of Art.
You’ll need images of your portfolio pieces and of yourself for your web site. Choose PNG for computer graphic-based images, likely with a transparent background, and use JPG for pictures, such as those you might use in the About Me section of your site.
With your images chosen, ensure they observe correct ratios. For example, if some have dimensions of 1024×768 (a ratio of 4:3) and others have dimensions of 1024×780 (a ratio of 256:195, and probably a mistake), then you have differing ratios. You’ll need to either make all your images 4:3 or 256:195. We’ll discuss ratios in class.
Visit this link to help you to calculate ratios.
Choose a grid for your designs, establishing column, gutter, and unit lengths. One grid to consider, for example, might consist of 60-pixel columns and 20-pixel gutters, establishing 80-pixel grid units (60 + 20). Another might be 75-pixel columns and 25-pixel gutters, establishing 100-pixel grid units (75 + 25). There are many other grid dimensions you might use. (Here’s a GitHub repo of 960 pixel-based grid templates in PSD, AI, and Sketch.)
Visit this link for some grid examples.
Decide on the desktop, tablet, and mobile screen sizes for your site. For example, you might choose 1024 pixels for desktop, 768 pixels for tablet, and 400 pixels for mobile. If you chose 80-pixel grid units (60px column + 20px gutter), then 12 grid units would be used for desktop with 32-pixel margins ((1024 - (12 × 80)) / 2 = 32); 9 units for tablet with 24-pixel margins ((768 - (9 × 80)) / 2 = 24); and, 5 units for mobile with no margins (400 - (5 × 80) = 0). We’ll discuss other examples in class.
For common screen size dimensions, open Chrome’s Dev Tools (command + option + I in Mac or cntrl + option + I in Windows), then toggle the device toolbar (command + shift + M in Mac or cntrl + shift + I).
At this stage, you’ll be ready to draw your grid-based wireframes, or wires, which are rectangular representations of the sections of your site. This can be done using Balsamiq Mockups, InDesign, InVision, Photoshop, Illustrator, Sketch, or any other digital tool that allows you to create rectangular containers.
Alternatively, you may also use paper and pencil to draw your wireframes. If you do, you’ll need to take pictures of your drawings to include in your presentation.
Whether you go digital or analog, you’ll need to create one wireframe per page per device. For example, if you have a home page, an About Me page, a Portfolio page, and a Contact Me page, you’ll need a desktop, tablet, and mobile version of the home page; a desktop, tablet, and mobile version of the About Me page; a desktop, tablet, and mobile version of the Portfolio page; and, a desktop, tablet, and mobile version of the Contact Me page. Ensure each wireframe shows a grid. That comes to twelve wireframes.
Visit this link for some examples of wireframes with grids.
You’re ready to implement the designs for your portfolio site, using the content, images, grid, device sizes, and wireframes you created in the first 5 steps. Use Adobe’s Color CC for color help; choose typefaces from Google Fonts for open source fonts; try Font Awesome and The Noun Project for myriad icon examples; and, create your own assets for your site.
You’ll need to create one design per page per device. For example, if you have a home page, an About Me page, a Portfolio page, and a Contact Me page, you’ll need a desktop, tablet, and mobile design of the home page; a desktop, tablet, and mobile design of the About Me page; a desktop, tablet, and mobile design of the Portfolio page; and, a desktop, tablet, and mobile design of the Contact Me page. Render each slide with and without a grid. That comes to twenty-four designs.
Note: Get to this stage sooner than the Complete by date below, as this is where you’ll spend the bulk of your time.
Visit this site for some grid templates.
With your designs finalized, prepare a one-page slide containing the style guide for your designs. A style guide is a document that defines design assets, colors, and text styles you used in your designs. For example, if you use Open Sans as body text, #bada55 as a color for the background of your pages, and #c0ffee as the color for accents, then these would be listed as such in your style guide. At the very least, your style guide should list the following:
- Typefaces (eg, Open Sans, Roboto, etc)
- Font weights (eg, Open Sans Light, Open Sans Light Italic, Roboto Semi Bold, Roboto Black, etc)
- Color palette (eg,
#5f8ee4,#e4655f, etc) - Grid geometry (eg, grid column widths, grid gutter widths, and grid unit widths)
Visit this Medium article to see some style guide examples.
Compile a PDF slide deck called presentation.pdf consisting of the following:
- Wireframes with grids (at least 12 slides)
- Style guide (at least 1 slide)
- Designs (at least 24 slides: 12 with grids; 12 without)
Again, the PDF slide deck must be called presentation.pdf and it may not be larger than 20MB. This is the file you will submit as your midterm project.
| Item | Points |
|---|---|
| Real content, not ipsum/filler | 5 |
| Image ratios listed in slides | 5 |
| Grid dimensions listed in slides | 5 |
| Responsive design screen sizes listed in slides | 5 |
| Wireframes for each screen size (includes grids) | 5 |
| Designs conform to wireframes and grids | 5 |
| Quality of designs | 10 |
| Style guide includes all design assets | 10 |
| Presentation deck contains the required 37 slides | 15 |
| Quality of presentation deck | 10 |
| Presentation file 20MB or smaller | 25 |
No late work will be accepted
- Monday Section: 6:00 PM on 4 March 2019
- Tuesday Section: 6:00 PM on 5 March 2019
- Log in to GitHub.
- Fork this repo.
- Clone your fork.
- Checkout your personalized branch.
- Replace the enclosed empty file
presentation.pdfwith your ownpresentation.pdffile. - Issue a pull request back into the original repo, the one from which your fork was created. See the Issuing Pull Requests screen casts at this page for more.
Note: This assignment may only be submitted via GitHub. No other form of submission will be accepted.
Make sure not to include any working files, such as .ai, .psd, .sketch, or .indd, in your submission.