This week I did a crash course presentation for a class of junior photography majors about portfolio websites, and some basic notes about good (and bad) website design. The students must put together an online portfolio of their work this quarter. Most of them do not know how to code HTML and CSS, so my presentation was geared toward making an account with a user-friendly website builder. I supplied my notes below if anyone else would like more information on how to make a portfolio website. There are MANY choices to choose from today….
NOTES ON WEBSITE LAYOUT
If you have no idea what website layout you prefer, visit an array of portfolio websites (photography, design, illustration, studio, etc.). http://vandelaydesign.com/blog/galleries/best-photographer-websites/ Make note of the layouts that you enjoy, and layouts that you find bothersome. You want to highlight your work, and also be organized. If it is confusing for viewers to navigate, they will get tired of trying, leave, and not come back. You want your website to be memorable!
Domain name:
-Choose a domain name that is distinct, clear, professional, and will stand the test of time.
-Examples: JulieApplebee.com or JulieApplebeePhoto.com is better than JulieApplebeeIncrediblePhotography.com, JulieApplebeeSelfPortraits.com, and AwesomeJulieApplebee.com.
Features to consider:
-Home page appearance
-Horizontal or vertical navigation
-How to organize work in navigation (Specific photo series? Theme? Year? Etc.)
-Minimal scrolling or a lot of scrolling
-Photo gallery layout
-Include a blog? (If you choose to incorporate a blog, keep it up-to-date with new work on a regular basis, and only focus on your work, inspirations, tips, etc. Do not stray and turn it into your diary or music log.)
Fonts:
-Use standard, legible fonts throughout your website.
-As a professional, Papyrus and Comic Sans are forbidden font choices.
-Choose a color that sits comfortably on the background color, and does not hurt the viewer’s eyes.
-Build hierarchy in your descriptions/artist statements/etc. by using regular, bold, and italicized versions of your font and changes in font size.
Background color:
-Use neutral colors that will not compete with your images. You want viewers to notice your awesome work– not your Pepto Bismol pink, Tennessee orange, or bedazzled unicorn background.
Search engine optimization (SEO):
-Choose a website builder that will maximize your search engine optimization to reach new viewers. When “Sally Mae Photography” is googled, it should appear within the first few listings.
-City, specific photo process, photo themes, etc. are also important to program into your website for search engine purposes.
Computer, laptop, tablet, and mobile friendly:
-Choose a website builder that will arrange your website to look great and operate effectively on all media.
eCommerce:
-Some website builders come with an eCommerce option to promote easy business with client galleries and shopping carts. A small percentage of the profit will go to the website builder.
Logo:
-A professional logo is SO IMPORTANT! Make friends with a Graphic Design student. Make a trade. Offer to photograph their self-portrait and/or three-dimensional portfolio pieces, in trade for their design skills for a logo and branding/website advice. Get to know them, and show them examples of what you like. They may just come up with something fantastic you would not think about.
Website background music:
-Don’t do it! This is 2014. MySpace days are over.
Flash websites:
-Don’t do it! People visit your website to see your work– not to watch fancy visual effects that take twice as long to load your images.
Examples of what NOT to do:
–http://www.theworldsworstwebsiteever.com/
–http://www.topdesignmag.com/20-examples-of-bad-web-design/
–http://art.yale.edu/
WEBSITE BUILDERS
1. http://wordpress.com/
-Online review: http://blog-services-review.toptenreviews.com/wordpress-com-review.html
-Features: http://en.wordpress.com/features/
-Watch demo: http://wordpress.com/#video
-Cost: Free. Every site has a default web address that ends in wordpress.com (for example, yourgroovydomain.wordpress.com). There are some paid upgrades available but they are entirely optional (and very reasonably priced!). As a professional, you will want some of these upgrades…
-Upgrades and prices: http://en.support.wordpress.com/upgrades/
•Custom design: $30.00 per blog, per year. With the Custom Design upgrade, you can make
your blog look exactly the way you want. The Font Editor lets you customize the fonts in
your theme in a just few clicks — no coding knowledge required! The CSS Editor lets you
customize the stylesheets of any available theme. Register for a custom domain.
- No ads: $30.00 per blog, per year. We sometimes run discreet advertisements on your blog to users who aren’t logged in and aren’t regular visitors. Purchasing the No-Ads upgrade will eliminate any ads on your blog so no one sees them at all.
- Premium themes: Priced per blog, for the lifetime of that blog. Add more options for site customization, exclusive designs, and support direct from theme authors with a Premium Theme upgrade.
- Space upgrade: All WordPress.com blogs come with 3000 megabytes of space for storing uploaded files and images. For even more storage space, the following prices are per blog,
per year:
-10GB= $20.00; 25GB= $50.00; 50GB= $90.00; 100GB= $160.00; 200GB= $290.00
-Support/Introduction: http://en.support.wordpress.com/introduction/
-Support/Using WordPress.com to Create a Website: http://en.support.wordpress.com/using-wordpress-to-create-a-website/
-Examples: https://brittanyspencer.wordpress.com/ (treated strictly as a blog)
2. http://www.squarespace.com/
-Online review: http://blog-services-review.toptenreviews.com/squarespace-review.html
-More features: http://www.squarespace.com/feature-index/
-Watch demo: http://www.squarespace.com/tour/overview/
-Cost: Free 14-day trial. You have 3 packages to choose from…
- Personal= $10.00 per month / $96 per year
- Professional= $20.00 per month / $192 per year *MOST POPULAR
-Unlimited pages, galleries, and blogs, with unlimited storage, bandwidth, and contributors
-Fully integrated E-commerce
-Sell up to 20 products
-Developer platform
-Mobile website and store
-Custom domain
-24/7 customer support - Business= $30.00 per month / $288 per year
- More pricing info: http://www.squarespace.com/pricing/
-Galleries:
- Gallery Blocks– Squarespace Gallery Blocks can be added anywhere on your website and offer hundreds of presentation variations, including slideshows, sliders, grid layouts, and more. Integrated lightbox functionality allows for full-browser-sized imagery.
- Display Effects– Each gallery offers multiple lightweight hover and transition effects.
- Video in Galleries– All gallery collections allow for mixed media presentations, including video and audio content in addition to images in the same gallery.
-Examples: http://www.judelandry.com, http://www.jakedugard.com/, http://jennafincher.com/
3. http://www.weebly.com
-Online review: http://web-content-management-review.toptenreviews.com/weebly-pro-review.html
-Features: http://www.weebly.com/features/#
-Cost: Free. Everything you need to create your own high-quality site including free hosting. As a professional, you will want to upgrade….
-Upgrades:
- Starter= $4.00 per month. Connect your own domain, get expanded site stats, and premium support.
- Pro= $8.00 per month. Professional multimedia features, powerful site search, and password protection. *MOST POPULAR
- Business= $25.00 per month. Fully integrated eCommerce. All available features. The complete package.
-Themes: http://www.weebly.com/themes/
-Photo galleries: http://www.weebly.com/features/#!/photos-and-slideshows Create a dynamic photo gallery in just a few clicks with Weebly’s robust gallery builder. Simply select and upload photos to take advantage of Weebly’s advanced transition effects, automatic resizing, and library of unique gallery layouts. Also includes a slideshow maker, free image upload and photo editing, and Weebly Photo Library. Choose from a range of slideshow layouts.
-Examples: http://www.jaimejphotography.com/
4. http://www.wix.com/
-Online review: http://web-content-management-review.toptenreviews.com/wix-premium-review.html
-Features: http://www.wix.com/about/features
-Watch demo: wix.com > Click “Check out our quick tour”
-Cost: You have 5 packages to choose from… http://www.wix.com/upgrade/website
- Connect Domain (Most Basic)= $6.90 per month / $48.96 per year
- Combo (For Personal Use)= 10.95 per month / $99.00 per year
- Unlimited (Entrepreneurs & Freelancers)= $15.95 per month / $149.04 per year * MOST POPULAR
- eCommerce (Best for Small Business)= $19.90 per month / $194.04 per year
- VIP (First Priority Support)= $29.90 per month / $298.80 per year
-Templates: http://www.wix.com/website/templates
-Example: http://www.marycatherinedavis.com/
5. http://cargocollective.com/
-Online review: http://blog.iso50.com/10005/a-weekend-with-cargo-collective/
-If you want to use Cargo Collective, you must first apply for an account: http://cargocollective.com/contact
-Cost: Free (Cloud hosting, 12 Projects, 3 Pages, 100MB Storage, Edit CSS, 5 Membership Invites); $66/year or $9/month (Unlimited projects and pages, unlimited bandwidth, Advanced editing, All templates)
-Templates: http://cargocollective.com/designs/
-Examples: http://christianmdunn.com/
6. http://www.smugmug.com/
-Online review: http://digital-photo-printing-review.toptenreviews.com/smugmug-review.html
-Features: http://www.smugmug.com/features
-Cost: Detailed comparisons: http://www.smugmug.com/features
- Basic= $5 per month / $40 per year
- Power= $8 per month / $60 per year
- Portfolio= $20 per month / $150 per year (commerce options)
- Business= $35 per month / $300 per year (commerce options)
-SmugMug Pro: Every site includes a fully-integrated shopping cart. Pick the photo products you want to sell, price your inventory, and keep 85% of the markup. We cover credit card processing and customer service. http://www.smugmug.com/pro
- Pro Labs: Wow your clients with gorgeous wall art, prints, and gifts: bayphoto, whcc, Loxley Colour, ezprints
-SmugMug for Everyone: (non-commerce option) Build your portfolio website by choosing your favorite theme and photo gallery. Simply drag-and-drop your photos into SmugMug’s content boxes to create the design you want. Customize your font and color combinations. Upload your 1080p HD videos. http://www.smugmug.com/consumer
7. http://www.photoshelter.com
-Online review: http://www.sitebuilderreport.com/reviews/photoshelter/our-review
-Features: A professional and customizable portfolio website specifically for photography. Built-in shopping cart for prints, products, licenses & personal use downloads. Marketing & client management tools to grow your business. http://www.photoshelter.com/mkt/research/
-Watch demo: http://www.photoshelter.com/tour/index
-Cost: 14-day free trial. You have 3 packages to choose from: (Sign up for annual plans and get 8% off.) https://www.photoshelter.com/signup/subscriber
- Basic= $9.99 per month
- Standard= $29.99 per month * MOST POPULAR
-10 classic templates
-Beam portfolios (http://www.photoshelter.com/beam/)
-Optimized for iPad
-Customizable Designs
-60GB of storage
-Use your own domain
-Built-in eCommerce Tools
-Free telephone & email support
-Search engine optimization & social sharing tools
-Partner perks - Pro= $49.99 per month
-Templates: https://www.photoshelter.com/website-examples/
-eCommerce: Use our pro labs or your own. Automatically fulfill orders with prints and products from the top labs in the industry, choose a boutique lab from our Print Vendor Network, or use your own. Available lab options: whcc, BWC, Adoramapix, ezprints, Loxley Colour
More website builders to check out…
22slides.com
4ormat.com
allyou.net
aphotofolio.com
behance.net/prosite
bigfolio.com
bludomain.com
imcreator.com
intothedarkroom.com
foliolink.com
icompendium.com
livebooks.com
neonsky.com
otherpeoplespixels.com
photobiz.com
photocrati.com/photography-wordpress-themes
photoidentities.com
showitfast.com
sitewelder.com
tafota.com
virb.com
visualserver.com
I hope this helps somebody out!
Brittany Spencer // Papermaking & Graphic Design 