*Portfolio Website Primer; Introduction + Resources

ADN491 Senior Studio
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 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 ‘bots’
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 Microsft Word format of your resume – these are 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.

 

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 Optimazation), 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 ]

Try to include a single line title, 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 a  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.

NCSU Student AFS Space + WWW4 Setup Access
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

All NCSU students have access to personal web space for use with hosting web pages and documents online. AFS is a distributed network file system that enables files that are physically stored on many different AFS servers to be accessed as if they were in a single directory (or virtual drive) on a local computer. This allows users from any AFS computer at any remote site (such as a computer lab) to access files in a unified and easily identifiable way.

It does not have PHP/mySQL access but it will allow you to host HTML, CSS, XML, Flash and Quicktime Movies.  The space is split between email and AFS – so you share ~350 MB of disk quota between the two and can use the online tools to balance them. This storage space for email is going away with the transition to Google Apps @ NC State.

http://oit.ncsu.edu/afs/personal-file-space
http://oit.ncsu.edu/afs/www-setup


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:
http://www.ncsu.edu/software/available-software/vendor.php?vendor=Fetch%20Softworks

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.

Lightbox2
http://www.huddletogether.com/projects/lightbox2/
http://leandrovieira.com/projects/jquery/lightbox/

EXAMPLE:
http://www.tranquilexplosion.com/index.html

 

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

http://www.krop.com/
http://www.behance.net/
http://www.coroflot.com/
http://www.linkedin.com/
http://creattica.com/info/about/
http://www.design21sdn.com/

http://www.deviantart.com/

PAID Online Portfolio

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/examples/

 

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://shownd.com/
Third party, online portfolio service.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Benefits:
Free membership grants 75 images, 15 audio files, 25 Flash files, and 8 videos
Premium membership tier available for upgrade/purchase
Job listings and job recommendation tools
Allows easy edits, uploads

http://www.tumblr.com
http://www.posterous.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

EXAMPLE: http://deathful.tumblr.com/page/2

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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

These two options could be utilized; although these are primarily content aggregators and may require a bit more work.  They need a connection with your own 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://flavors.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.

 

Flash “Widget” Image Gallery
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Simple Flash image gallery applets that can be used standalone or integrated with your HTML/CSS website.  Modifying a basic XML text file lets the Flash .swf applet know where your thumbnails and larger images are located in your folder. Some allow you to link to external sites such as flickr to pull your images from.

Article: http://onebitpixel.com/aml/?p=490

http://www.simpleviewer.net/products/
http://www.db798.com/pictobrowser/index.html
http://slideshowpro.net/
http://www.flashgallery.org/
http://www.monoslideshow.com/

 

 

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.

iShowPro
http://apps.visual23.com/ishowpro/

Listing of albums and Album preview image
Thumbnail grid layout
Large view with Lightbox2
iPhone, iPad, iTouch detect/redirect
Can be linked directly to your website portfolio as well as integrated with SlideShowPro.

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

Pocket Portfolio
http://www.pocketportfolioapp.com/

Easily create galleries of images stored locally on your iPhone or iPod Touch; cleaner interface then stock iPhoto gallery
Create multiple gallery sets, or groups of galleries, and switch between them depending on who you’re showing.
Create an iPhone photography gallery set to show friends and keep a separate gallery set with your professional work.
Send galleries and contact information directly from the app.
Upload images directly from your computer to your device over WiFi.
View your galleries in vertical or horizonal orientation.
Customize the cover page with an image and title.

xtrafolio
http://www.xtrafolio.com/

Separate admin settings page for gallery control
Switch on the optional passcode so no one can enter the settings area by mistake.
Customize all pages with your personal logo, style or colour

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

GruntMonkey Viewport

http://viewport.gruntmonkey.com/

Viewport is a web based framework built using a healthy dose of HTML5, CSS3, and Javascript optimized for the iPad.
Video Walkthrough available

Foliozo

http://shapehq.com/work/foliozo

Foliozo syncs with your Dropbox account
add various images file types and entire PDF files

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/content.cfm/membership-student
http://www.idsa.org/members/Become_an_IDSA_Member.html


ARTICLES

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The One Page Graphic Design Portfolio Guide
http://www.youthedesigner.com/2008/01/31/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://www.jessicahische.is/obsessedwiththeinternet/andhelpingyougetpaid/the-dark-art-of-pricing

Design Students: An Online Portfolio Is A Necessity
http://www.positivespaceblog.com/archives/design-students-an-online-portfolio-is-a-necessity/

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

Resources for Students & Job Seekers
http://badassideas.com/resources/

Build a Killer Online Portfolio in 9 Easy Steps
http://freelanceswitch.com/finding/build-a-killer-online-portfolio-in-9-easy-steps/

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

How to Decide What to Include in Your Portfolio
http://freelanceswitch.com/freelancing-essentials/how-to-decide-what-to-include-in-your-portfolio/#more-3626

This post is tagged: , , , , ,


Comments are closed.

Graduate Handbook


Please read the Graduate Handbook for a general overview of the program. (Adobe PDF Document)

Archives