*Portfolio Website Primer; Introduction + Resources

09.19.2020 // lecture, Tutorials //

ADN491/Senior Seminar Studio/Professional Practice
Portfolio Website Primer; Introduction + Resources

Before approaching anything first draft up an outline of what it is you want this website “thing” to showcase… a simple outline, basic architecture framework, features you want to include and more important your message + identity… a basic wireframe or tree structure, fishbone diagram… whatever helps you to outline the navigation structure of your website.

So, a basic outline:

About Me
Simple paragraph or two about your background, not too personal
– think about author’s bio on inside liners of book covers

Contact Me

You should at least have an email, possibly a phone number, maybe a mailing address
It’s possible you can link to facebook, linkedin, twitter or other contact format
A quick note about privacy, it’s up to you to determine how much information you desire to make public.
There are ways to “cloak” the html email so it doesn’t get skimmed by email harvesters and ‘bots’;  lookup: Email Address Obfuscation
You should also consider what kind of public profile you have online, your Facebook page may not necessarily work in your favor.

Artist’s Statement

“Artist’s Statement” OR “Designer’s  Statement”

Your design statement is about facts, a basic introduction to your work.” The perception of “artist” may pigeon-hole perceived   capabilities and “design” is ideally more applicable across the college.

Professional Resume

Include a simple HTML representation of your resume.
Include a link to an Adobe PDF and/or Microsoft Word format of your resume – these are traditionally standard formats for viewing and printing.  If you are concerned about people/headhunters gleaning information from your resume, include the basic structure in HTML and provide a contact email to request a PDF resume and portfolio. This is an extra step but it can deter people from just grabbing your background information about your work history.
Awards, Achievements and Testimonials could be presented as well.

Personal Work
This is optional… This could be an area of work that you do on your own and not specifically for clients. It could be experiments, work in progress or work from early in your design process. It could be a rolling blog of what you are researching or interested in – just remember to be able to dedicate the time needed to make a blog meaningful.

Portfolio

Painting
Sculpture
Mixed Media
Video + Animations
Posters
Brochures
Logos
Websites

These are general guidelines and examples, you may find a different approach to presenting your work. For example, associating the work in your portfolio by medium (oil, acrylic, pencil, charcoal) or by client/benefactor.

Try to keep the number of sections and the number of images per section to a minimum – 5 sections, 15 images per section; remember you are showcasing your best work not all of your work. If you have certain images you want to showcase more then others, make them featured items for viewing from the front page or at the beginning of each portfolio section.

Keep in mind as to what images/projects you want to showcase, who your audience is and how best to be brief and to the point with your message and project descriptions.  Balance your personal style with a unique portfolio design as well as leverage usability with creativity with a focus on using the appropriate online technology/medium to represent your ideas.

Portfolio Overview Video; Catherine Howard;

Creating a Portfolio Workshop – Catherine Howard (10.29.13) from NC State – College of Design on Vimeo.

Try to include a single line for titles, a brief paragraph about the work and some measurements (inches and feet) to give an idea of scale. Essentially a “brief paragraph” about the work. For example, what your role was in the work, and possibly software used… If works are done with more than one individual this is often a plus to prospective employers since it  shows a student can collaborate. What was the design problem or any specific constraints involved that might be shared to broaden viewers understanding of the solutions success.

Then you can look at some of the great resources online that can handle what you want to throw at it… but if you don’t have a framework and content for the sections then it gets more bogged down towards the end while you’re building it… try not to get stuck on the idea of what you want the system to be hosted on and focus more on your design, layout, content and navigation… don’t forget about your personal message and your professional audience.

A note about accessibility – ideally include “alt” and/or “title” tags, for images and html refs respectively,  within image references to add more descriptive element (on roll over or for screen readers) for the images presented. Not only is this good practice for accessibility it will aid in SEO (Search Engine Optimization), Search Engine Spiders traditionally love the keywords and that could increase the rankings of your page in search engine return.

[ http://www.w3.org/TR/WCAG10-HTML-TECHS/#image-text-equivalent ]

NCSU Website Resources
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

There are a variety of services available for NCSU students to build a small, personal website using University resources.

You can follow the walkthrough use the Getting Started wizard to help you find the service that’s right for you via:

You can choose to use Google Sites or WordPress:
Other options:


FTP Software
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

If you are hosting your website on campus through AFS space or if you have a hosted server from some other company you will need to use a FTP software to upload and download your files to and from your local computer and the website. There are some setup requirements using information provided by your hosting company but it’s a pretty straightforward process.

NCSU Students can obtain a free copy of Fetch here:

Fetch
http://fetchsoftworks.com/

CyberDuck
http://cyberduck.ch/

WF_FTP
http://www.ipswitchft.com/

Smart FTP
http://www.smartftp.com/


Hosting Companies
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

http://dreamhost.com/
http://www.brinkster.com/
http://mediatemple.net/
http://www.godaddy.com/
http://www.buydomains.com/

A huge variety to choose from, look at pricing structures.
Long term 3-5 years and 7-12 years annual rates are very affordable per month.

Ask about coupon or discounts to waive setup fees.

Look at features like “frame forwarding” and “hidden URL” to allow domain names and hosting to be seperate.   Look for features like “subdomain setups” that allow you to use one website domain name but host multiple websites in the future.   Look for the ability for multiple emails and ftp upload access for you and clients


Static HTML, CSS and Javascript/Ajax + Lightbox Photos
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Using an HTML editor like Adobe Dreamweaver and basic HTML/CSS you can get a professional looking website up and running. You can opt using CSS and use standard HTML tables but some tweaking will need to be done to layout your website cleanly.

Examples:
http://fancybox.net/

http://lokeshdhakar.com/projects/lightbox2/

http://noelboss.github.io/featherlight/

http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

Professional Creative Portfolio Hubs+Networks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

https://www.artstation.com/
http://www.krop.com/
http://www.behance.net/
http://www.coroflot.com/
http://www.linkedin.com/
http://creattica.com/info/about/
http://www.deviantart.com/

PAID Online Portfolio

https://www.squarespace.com/

https://www.weebly.com/

http://www.bigblackbag.com/online_portfolio_samples.asp

http://4ormat.com/

http://otherpeoplespixels.com

http://www.livebooks.com/creative-professionals/students-and-educators

http://www.viewbook.com/

Online Blog as Portfolio
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

WordPress
http://wordpress.com/
http://wordpress.org/download/

MovableType
http://www.movabletype.org/

Expression Engine
http://expressionengine.com/

These options can work as a great CMS (Content Management System) for your design portfolio.
They are all flexible, feature-rich content management systems.
You can download and host it yourself or sign up with their free hosting.

They use a wide variety of plugin modules that allow you to use Flash, Flash Video, embed Youtube+Vimeo and LightBox Gallery

Using the blog format you can have an area that you update as works in progress or news, be aware that if you plan on using this as a traditional blog for content that it will require some time and upkeep to keep your site fresh and your visitors informed. It really depends on how you want to approach your online portfolio, single use or mixed use platform.

Off-the-shelf Portfolio/Website
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

http://www.carbonmade.com
Third party, online portfolio service.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Benefits:
Free, 5 projects + 35 images
Allows easy edits, uploads
Has a bio/artist’s statement area available
Dedicated, custom URL (i.e. somehappyportfolio.carbonmade.com)
Simplified templates for use (1,2 and 3 column wide, horizontal or vertical formatting)
Up and running in about an hour.

EXAMPLE: http://leecherry.carbonmade.com/

http://www.indexhibit.org/
Index + Exhibit, A web application used to build and maintain an archetypal, invisible website format that combines text, image, movie and sound.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Benefits:
Open source, free
Flexible infrastructure and tagging elements within this CMS platform
Requires PHP/mySQL backend system and some programming knowledge
Has custom and modified template structure for the look and feel

http://cargocollective.com/
http://www.indexhibit.org/

EXAMPLE: http://www.rltdesign.net/

http://www.tumblr.com
Third party, online (mini) blogging systems
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Benefits:
Stupid-easy to setup and use…
Free, unlimited images, videos
Templates are available to customize your look
Image display: 1200×1600 for a ~2MP capture quality
Dedicated, custom URL
‘feed’ images and documents from a variety of sources and formats
Up and running in 30 minutes

http://www.wix.com
http://mosaicglobe.com

Template based website portfolio design
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Benefits:
Drag & Drop. No programming.
Search engine friendly.
Flash and Flex based websites
Wix is a do-it-yourself website builder: a free online tool that lets you create and customize your own websites.

Personal Branding Page + Content Aggregators
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Although these are primarily content aggregators and may require a bit more work.  They need a connection with your own instagram, twitter, flickr, linkedin or other platform in order to utilize some of their features… this allows a single point of contact for all your different content and image resources.

https://about.me
http://magnt.com

A central hub where recruiters, customers, business contacts, family, and friends can go to learn about and contact you.
Quickly build your personal profile page that points users to your content from around the web. Make your own home page and stitch together all your content from around the web into one place.
All of your social networks in one place.

Photo + Video Hosting
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Host your images and videos at these third party websites.
Use HTML object embed snippets of code to include the images + videos on your website.

http://www.flickr.com/
http://vimeo.com/

A quick note, I often get asked why I don’t include YouTube.com… My response is, your message and audience. The content on youtube may not even be remotely associated with the quality of work you want to portray. Also, you can’t control what youtube videos get linked or associated at the end of your footage. It is possible to use youtube as a hosting source as well as a distribution platform for your work and use the object embed tag on your website to include your video – it really depends on the approach and strategy you want to use to promote your work.

One final note, be sure to read and review the terms and conditions on third party hosted websites for the usage rights for your content. This issue is something that is coming up more and more and is something you should be aware of if you are will to have your work hosted on other systems.

Mobile Platform Portfolio Gallery
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

This is a relatively new and rapidly growing format to get your portfolio on the mobile platform. Although a small mobile phone screen may not be the best platform delivery to view high-quality images or videos however the Android Tablet or Apple iPad format can be a novel way to distribute your showcase projects.

Portofolio to Go
http://www.nickkuh.com/portfolio-to-go/

Photo Wall
Main image view displays gallery thumbnails to enable intuitive gallery navigation. Just click the main image to go full-screen.
Send Portfolio to a Client
Share your photos and Flickr links via Facebook, Twitter or Email
Save favourite Photos to your iPad Photo Library
Integration with your Flickr.com gallery

iPad Portfolio
http://ipadportfolioapp.com/

Portfolio offers a self-contained, brandable presentation tool for your business on your iPad.
A separate management interface lets you build your image and video galleries with drags and taps.
Access anything in your Dropbox folders
Password protected gallery options

Pholio
http://www.brians-brain.org/pholio/

You simply drag and drop to put your photos in the order you want.
You have full access to cut/copy/paste/delete.
You can change the title of any gallery, or add a title to any photograph, by simply tapping the title bar.
Pholio makes it easy to download pictures from your Flickr account.


Student Group/Association Resources
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

AIGA and IDSA student group membership, discounted fees for students to sign up and access their resources. Allows members profile and portfolio information.

http://www.aiga.org/membership-student
http://www.idsa.org/membership


ARTICLES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Instagram as a Design Portfolio
https://www.fastcompany.com/90163328/ingenious-hack-turns-instagram-into-a-design-portfolio-site

The One Page Graphic Design Portfolio Guide
http://www.ucreative.com/articles/the-one-page-graphic-design-portfolio-guide/

The Remedies for A Great Designer Online Portfolio
http://www.onextrapixel.com/2009/08/17/the-remedies-for-a-great-designers-online-portfolio-with-25-impressive-showcases/

The Dark Art of Pricing | Jessica Hische
http://jessicahische.is/thinkingthoughtsaboutpricing

A Better Portfolio
http://www.instantshift.com/2009/04/26/how-to-create-a-better-online-portfolio/

Creating A Successful Online Portfolio
http://www.smashingmagazine.com/2008/03/04/creating-a-successful-online-portfolio/

Please Enjoy My Last Portfolio Sucked, Yours Might Too
http://astheria.com/design/my-last-portfolio-sucked-yours-might-too

Build a Killer Online Portfolio in 9 Easy Steps
https://studioblog.envato.com/creating-online-portfolio/

Presenting your portfolio
http://www.aiga.org/content.cfm/portfolio-presenting

How to Decide What to Include in Your Portfolio
https://business.tutsplus.com/articles/how-to-decide-what-to-include-in-your-portfolio–fsw-3626

This post is tagged: , , , , ,

Comments are closed.

Archives