Form-
atting

Overview

Follow these guidelines when building your professional portfolio website.

They will ensure that your site loads quickly. This is especially important when you are networking and want to show your portfolio, on-the-spot, using your phone.
They will ensure that your work is displayed in-context, which adds value to them.
They will ensure that persons of all sight and hearing abilities can experience your site and provide a better experience during situations like bright outdoor lighting and locations where audio cannot be played.

General Advice

Overview: The goal is to create a fast and efficient way for prospective employers and clients to review our portfolio work and experiences.

Avoid building landing (home pages) with these features

Thumbnail galleries of images
Thumbnail menu systems that link to interior pages
Single page sites with menu buttons that send the user down the same page. These kinds of sites do not allow you to send links to individual pages.

Do build landing (home) pages with these features

A single large impactful image
An optional tagline
A straightforward persistent menu at the top or side bar
No other information

Image/video Thumbnail Galleries

Use galleries that allow text descriptions. Images that have a purpose that can be explained with text are more powerful.

Image/video Scrolling Web Page Galleries

The advantage to these is ease of adding text descriptions and ease of use on mobile phones and tablets.

Project Pages

Use scrolling web pages that contain ample text descriptions along with images

About Pages

Include your contact information. Do not use a form. Employers will want to be able to copy and paste your email into their address book.
Include you bio here. Talk about interestes outside of art and design
Include a link to a downloadable pdf resume

Tutorials and Tips

WIX Tutorials

Start with a template!

First: create an account
Then: You should start with a template, then customize it. Starting with a template is the only way to get a persistent menu, header and footer that automatically updates on every page when you ad a page or change the design. Here are some recommended templates (simpy choose one then click the "edit this site" button:
Avoid using auto scrolling galleries or any other widgets that have their own navigation systems. These will just confuse and slow down your users.
Individual and Group Project pages are best built with a simple scrolling style page

To embed a Google Slideshow

Follow this video tutorial
It's an older tutorial... so, in WIX, you will find the "embed" element about halfway down the list (not under the "more" button)
Not covered in the video: You can fine tune the size by changing the width and height directly in the embed code in the Wix embed element editor.

To create an image gallery with text accompanying the images:

Text descriptions that include short loglines are more powerful!
Only the 'Pro Gallery' widget can do this
You should control the size and compression of your images before importing them. then Under Under Settings > Advanced > Advanced Image Settings
- Set Image quality to 100
- Turn off image sharpening
- Turn off convert images to WebP (it's not yet 100% supported across all devices)

Don't Turn Off your Menu on Any Pages

But if you do... Watch this video to see how you can turn it back on

Artstation Tutorials

Adobe Portfolio Tips

General

Adobe Portfolio requires the selection of a theme. Only the landing page is effected by the theme. All of the internal pages are simple linear scrolling pages that can contain single or multiple columns.
Avoid using auto scrolling galleries or any other widgets that have their own navigation systems. These will just confuse and slow down your users.

Recommended Themes (you have to use a theme)

Mercedes: a clean grid interface with thumbnails that link to scrolling web pages
Marta: A large header that's perfect for a high-impact landing page, with a gridded thumbnail menu below.
Sawdust: a clean grid interface with thumbnails and a side-bar menu

Adobe Portfolio Formatting we do often

Placing images side by side
Adjusting overall page width
Text can be placed under images by clicking on the captions button in the image editor
To disable "To disable “more in this collection” for the entire site.
1. Go to any page
2. Scroll down the left menu
3. Disable “more in this collection”

Adobe Portfolio and Behance Integration

Adobe's How-to Guide

Formatting Guidelines

PDFs

Process and resume PDFs should have file sizes not larger than 5 mb. That will mean you will have to scale your images down to a 1400 pixel width (max.) prior to assembling the pdf in Acrobat Pro. Illustrator or InDesign.

Video and Animation

For best results; upload a ProRes , or High Quality h264 file to Youtube or Vimeo. Those sites will compress the video. If you upload an overly compressed file; it will result in low quality play back (because YouTube will compress it again)

Note: Youtube will play on any device. Vimeo will play on about 90% of all devices.

Digital 3D

Sketchfab.com offer free uploading and use (including embeds) of their fantastic interactive 3d viewer. It is fully integrated with ArtStation. Here are instructions for integrating the Sketchfab viewer onto your website, with your models in them .

Interactive Media

Interactive multimedia broken links: Add the bold text into the url
- http://kendallweblab.com.s166903.gridserver.com/sites/interactive1a/spring2020/amberthiel/
Show the layouts in context (see example below)
If it is a live site: link to it
If it is mocked up in Adobe XD (or similar)... screen-capture a video of it being navigated

interactive design layout by Tony Ellison image

Image Prep

It is critical to prep all images together prior to installing them into the site and to follow the following process:

Set up a template in Photoshop to match image sizes to each other and easily test color correction consistency. Adjust the curves and hue/sat of all images to match each other on the page.
When creating an image gallery with thumbnails, set up a grid mock-up in Photoshop and design the thumbnail set so they work well together, as if they are a single image.
Use Photoshop's 'Save For Web' feature - Size: Maximum 1080 pixels height or 1400 pixels width (which ever is longer). on Behance, art must be 1400 pixels to be displayed full screen.
- If an image is only going to be shown at half-page width; make it 700 wide pixels.
- If an image is only going to be shown at one-quarter page width; make it 350 pixels wide.
Use JPEG (quality set to high, 60), PNG-8, or GIF compression to maximize site loading speed.
Use PNG-24 compression only for flat color art or small transparent icons and logos. Otherwise your site will be slowed dramatically due to their large image file sizes.
Sharpen images a little bit after resizing up or down

Image Details

Web images are low-res. Add additional views for details can provide a closer look..

bill fischer jpeg image layout example vertical

illustration by Bill Fischer

Design and imaging by KCAD student Tony Ellison

Thumbnails

All of your thumbnails should be custom. Avoid widgets that do not allow custom thumbnails (such as the Light box widgets in WIX). If you are using Artstation, the customization of your thumbs is the only design control you have.

jacob myers portfolio thumbnail layout example

josh miller kcad alum thumbnail layout example

Accessibility Guidelines

Depending in the builder you are using, you may be able to build accessibility into your site. Understanding how to create accessibility is something you can not on your resume.

Headings

It is very likely that a sight impaired person will navigate a web page by tabbing through the headings. The headings should be written to maximize that process. Hierarchical/chronological use of text tags is also critical. For example:

Title, Heading, Sub-heading, Normal
H1, H2, H3, H4, Normal

Images

Descriptive alt tags should be included for all images. They need to succinctly describe the image. If the image serves as a link, it should include the link destination.

An example of a bad tag:

figure 2

An example of a good tag:

cartoon of a dog in a window barking at a postal delivery woman approaching a house on foot.

An example of a tag with a link destination:

fish icon: links to the fishing guide

Margins

Margins, the space between text blocks and sections of information should be generous.
Mildly colored background color change (external link) can help differentiate sections.

Video

Video should not auto-play. The user should have the choice for when a video plays.
Should be captioned if there is dialogue or voice-over. YouTube has a built-in tool for captioning that allows editing for the creator and user controls for the the viewer (such as Font size, and color) as required by ADA regulations. This YouTube Captioning Video Tutorial (extrnal link) by vidIQ. Published on April 25, 2020 will walk you through the process of using YouTube's tools for captioning.

Text

Should be high contrast against its background (light on dark or dark on light). Use the a combination of the Wave Checker (external link) and the NoCoffee Chrome extension (external link) to test color combinations for various color blind conditions. The visual presentation of text and images of text should have a contrast ratio of between 3:1 and 16:1 (Level II) or 7:1 and 16:1 (level III). I strongly recommend level III.
Should be sized for easy reading.
Should be left-aligned in most cases when there is a large volume of text.
If you use image based text, the text in the image must be included, in full, in the image alt tag.

Form-atting