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.
Overview: The goal is to create a fast and efficient way for prospective employers and clients to review our portfolio work and experiences.
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.
A single large impactful image
An optional tagline
A straightforward persistent menu at the top or side bar
No other information
Use galleries that allow text descriptions. Images that have a purpose that can be explained with text are more powerful.
The advantage to these is ease of adding text descriptions and ease of use on mobile phones and tablets.
Use scrolling web pages that contain ample text descriptions along with images
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
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
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
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
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.
Go to any page
Scroll down the left menu
Disable “more in this collection”
Adobe Portfolio and Behance Integration
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.
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.
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 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
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
Web images are low-res. Add additional views for details can provide a closer look..
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.
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.
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
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, the space between text blocks and sections of information should be generous.
Mildly colored background color change (external link) can help differentiate sections.
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.
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.
Links in body text should be underlined
Links to external sources should labeled as such:
Example: I-See-U.info: Advocacy for Design Citizenship (external link)
Link text should make sense out of context and it should be obvious where the link will take a user. Users of screen readers will often search the content of the site for links.
Don't use 'Click Here' or 'More Information' for your link text. Instead, make the text more descriptive.
A good example: Learn more about the principles of universal design (external link).
A bad example: Click here to Learn more about the principles of universal design.