Exploring Web Options

1. Platforms...Or Lack Thereof

There are many, many choices for pre-built website templates. These are all considered user-friendly platforms you don't need a coding background to set up and customize. Some offer a suite of "widgets" like calendars, e-mail signup forms, and so forth, which can be helpful for a small business.

Popular platforms:

Squarespace
WordPress
Wix

Go through their available templates and see if there’s something that suits you. Just a couple of many theme galleries below:

Example theme keywords:

Portfolio
Minimal
Vintage
(We'll revisit design adjectives in Chapter 5)

If you found something you like...well I guess you can stop now? :) Just kidding. We’re going to dive in and learn about coding learning, user interface design on the web, project organization, free tools, and how to work with tech professionals. We’ll also do a web content exercise and look a some artist websites.

And don't forget those themes you liked! Looking through themes is a great starting point, whether you use pre-built themes or not.

If you have the slightest interest in learning to code, give it a try.

Benefits:

Foundation for knowing what's "doable" or complicated to build
Vocabulary for communicating with tech folks
Understand the medium and how to control your message
Incorporate free pieces made by other people (e.g. slideshow photo galleries, see Lightbox as an example). "Open source" is free stuff which you can contribute back to (you probably heard that term before). Using these typically involves copying and pasting code and swapping in your images.
Unique website that doesn’t look cookie cutter. How many times have you seen the Twenty Ten WordPress theme?

Places to learn to code in-person Boston:

MassArt Continuing Education: Attracts lots of graphic designers, other arts-inclined folks also looking to build a portfolio. Highly recommend this! This is where I took my first web design class.
Girl Develop It: Short classes and workshops, they often have a basics class. I haven't been to one of their classes, but I've been to one of thier coding meetups and had a positive experience.
General Assembly: Offers longer term bootcamps (high time commitment and price), but they also host lower cost weekend/one-time courses. I took an evening long workshop covering the Sketch software which was great.
Artisan’s Asylum: Doesn't consistently offer web design classes, but I took one there in summer 2015 which was fantastic.

I highly recommend attending a course or workshop with the intention of building your portfolio site. Pretty much every class works toward a final project of your choosing...so choose to do a portfolio!

Look for courses about HTML and CSS. Those are the main building blocks and most accessible for arts-inclined people.

The Learn to Code With Me Getting Started guide is a great overview and lists several online learning tools.

Tips for learning to code:

Start with small consistent steps and a disciplined schedule for learning. For example, choose to read 1 article and watch 1 YouTube video a week
Talk to fellow learners: online, at Meetups, at conferences, anywhere you can find them.
If you like podcasts, there are some good tech ones out there. I find it really helps me to hear people talk about coding, revealing their ups and downs and things that motivated them to keep going. I really like Developer Tea.

Choosing a pre-built theme vs. custom coding is not an all or nothing decision. If you find an online platform you like, such as Flickr or YouTube, for displaying photos, video, etc. you can set up an account there and then link to it from your home website. May be helpful if you want to be search-able in that platform’s database (e.g. appear when someone searches for “furniture design metal Bauhaus” on Etsy)

The in-between option (most complicated) is to customize a content management system like WordPress. This is called “theming”. For example, you could have a WordPress site with that platform’s blog post functionality, but have it look different than any other theme you see on sale. Theming is an advanced topic you would need more than a basic understanding of web design/development. Content management systems introduce databases, which have their own quirks and setup requirements. Custom-themed sites, however, are something you can keep in mind if you 1) have the budget to hire someone or 2) that is something you want work toward over time.

Be a spy! Wondering if a site you're on is WordPress? Right click on the page, then select “View Page Source”. You'll see a bunch of website code. Click command + F and search for “wp”.

2. UI Elements on the Web

The goal of learning the vocabulary of web user interface (UI) elements is so you can understand and break down websites you see and communicate with web designers and developers. You can only truly master web design — and envison + create something that is perfectly unique for you — if you have an understanding of all the elements. In this chapter, we'll take a look at a few UI elements (there are several more we won't cover).

Even though this chapter is all about visuals, you really need to turn on your left brain. UI design is all about structure, patterns, and logic. What is a re-usable component and what are all the conditions it’s designed to respond to? (on sale, coming soon, etc.) Are things organized alphabetically, by topic, by date? How can you indicate how much stuff you have to show?

Thumbnails / Teasers

Previews of content the user can browse through. Several are displayed at once, often shown in a grid structure.

Mountain Crest Gardens home page thumbnails

Mountain Crest Gardens home page [accessed January 21, 2018]

Mountain Crest Gardens indoor succulents page thumbnails

Mountain Crest Gardens indoor succulents page [accessed January 21, 2018]

Slideshow / Carousel

Full page width gallery the user can rotate through. Clicking options are typically arrows or arrows and tabs. May have text or links overlaid, as well as elements (usually circles) indicating how many items are in the slideshow and where the user is in the sequence.

bxSlider home page [accessed January 21, 2018]

Minnetonka Moccasin home page [accessed January 21, 2018]

Navigation

Allow the user to explore the site, and indicate how large the site is. Links are usually shown as text, and must be differentiated from the main website copy to indicate they are something the user can click on (e.g. underline, icons, all caps).

Hershey's Kitchens home page [accessed January 21, 2018]

Lululemon home page [accessed January 21, 2018]

Hero Image

Prominent image with text that sums up the content of the page or website.

On the News app, Washington Post sometimes has story heading unique to particular stories [bomb cyclone story accessed January 2, 2018; goverment shutdown story January 3, 2018]

Get inspiration from sites like these, which show variations on UI elements. Search for keywords like "slideshow". Site like those below are not just for UI elements, there is lots of other great design-related stuff, too!

Keep your eyes open for elements you like in websites you visit. Once you are familiar with the elements, you'll see them everywhere! They don’t have to be on artist websites, they could even be commercial websites! Sometimes you’ll find something appealing that can translate to more artistic subject matter. For example, Hershey’s gluten-free peanut butter blossoms recipe page was inspiration for this page.- bright colors and patterns, bold and informal type.

Word to the wise: Ever notice how websites look different on your phone? Responsive web design, the ability for websites to serve different formats dependent on device, is a "must have" in 2018. It used to be more a "nice to have", but with the majority of traffic now coming from mobile devices, it is critical your page is readable on small screens. When visiting websites, pay attention to how some UI elements transform. Also look at mobile apps for inspiration — the same design elements can be used on a website.

Q & A: Let's discuss design decisions!

Can my home page be primarily visual? Or am I required to provide text and info about the website?

Typically, the latter would be mandatory for a home page, but for an artist site I would argue you can be a little more experimental.
In any case, make it clear how the user can bypass a creative feature and get to your main content.

On a project page including both images and text, which should I lead with?

I recommend starting with the page title no matter what, for context. That way, the page can stand alone if it was accessed without visiting the home page first (e.g. found via a search engine, link shared by someone). From there, you can go right to images.
If you start with text, keep it very short. On mobile devices, very little of the page will show at once, so the user shouldn’t have to scroll a lot if what they came there to do was view images.
A student at the workshop compared this to newspapers: articles always start with headlines. This was a great point, because it demonstrates that design principles can often be shared between printed and digital media.

Do images need captions?

Not mandatory but can be helpful for a variety of things (title, date, summary - just like label copy in an exhibit). You can also add live links in captions (see UI design chapter above!).
If you do not add captions, be sure to add alt text and a title for each image so that website visitors using screen readers can access descriptions.

How much of a series do you show? All of it, or just a preview?

If you have costs associated with particular content (e.g. an album which you are selling), that is a good reason to show only previews.
If you have an exhibit open you want people to visit, you may want to include just a preview so they are motivated to visit the entire exhibit in person.
However, if the only place people can see/hear the work is online — and you want visitors to access all of it — include the entire series.

How far back in time should work go?

Lots of flexibility to go back far in time because there's essentially infinite storage (compared to something like a portfolio book). Take advantage of that if you want to show a lot of work.
If you're concerned of a (seemingly) infinite section, you could post just the first few and then have a separate "archive" section.
Highlight work that indicates the direction you want to go, if you are actively looking to make some sort of shift. This may mean excluding previous content which which does not match that direction.
However, if there's something you love which you feel represents you well (even if it's not "relevant"), definitely include it! Tailoring content can be appropriate, but remember we are human, not perfectly curated products — let your uniqueness and passions shine.
Some older media (e.g. videos) may be lower quality, in which case it may be better to stick with newer media (good point by a student in the workshop).

How many sections of the site?

Stick to 5 or fewer if you can.
Can sub-organize large section into medium, date, etc — we'll look at an example like this later.

3. Tools & Logistics

Domain Names & Hosting

A domain name is the address Internet users use to access your website. This is the www.yourname.com you type in your browser.

Choose a name that is as descriptive as possible, but not super long. Your first name and last name is a good choice. If you have a company or collective, its title is another good choice. Domain names are first come first served, worldwide — it may be possible the name you want is already taken. If so, you can try variations on it (the host you purchase from often will recommend alternatives, based the first choice you supply).

Buy your domain name as soon as possible! You can secure your domain name before setting up your site.

Once your site is up and running, add its domain name to your business card, e-mail signature, cover letters, printed brochures, etc. You can access it without the "www" (e.g. leahbrunetto.com rather than www.leahbrunetto.com), which is helpful for saving space.

Buying a domain name is not the same thing as buying hosting. A domain name is a one-time cost and hosting is a continuous service, usually billed yearly. No need to buy more than a basic subscription for a portfolio website. You can choose to buy several years hosting in advance.

What's a good host? I use DreamHost which I’ve had good luck with. They have very good support (i.e. they get back to me quickly when I have a question and their responses are clear). GoDaddy is very popular. If you want to do something with a content management system, some hosts specialize (e.g. BlueHost is a WordPress host).

Free Tools

There are lots of free tools out there for setting up and updating your website, once a domain name is purchased.

Try these free tools!

Sketch 30 day trial: This is a tool to draw out your website ideas before building anything. You can find lots of tutorials on YouTube for how to use it. There are many other tools for making website sketches (also called wireframes or mockups) — Photoshop, Balsamiq, etc.
Sublime Text: Should you decide to build your own website, you will need a text editor to write and edit code. Sublime Text is good, and there are many others! (try Googling "free text editors")
FileZilla: Once you have files for web pages ready to add, this tool will allow you to upload them to your web host. Think of it like moving a file to a folder on your computer. This tool is called an FTP client. When you register for a web hosting account, they will provide the login info for you to plug into FileZilla. After you log in via FileZilla, drag files from your computer to your web server (referred to as "remote", since it's another computer sitting somewhere else).
Google Analytics: Free tool which records visitors to your website (number, location, device accessed, etc.) Highly recommend setting this up as soon as you launch your website. Website analytics is a whole field unto itself, there are lots of resources out there if you want to pursue further.

If you choose to set up a site with a database (e.g. WordPress site, where the database is the collection of the blog posts) the database is stored by your website host and can be found in the control panel ("cpanel" for short). You can log into the cpanel on your host's website.

What about if you have an existing site? How can a new one be built without messing with the live site? You can work on a new site locally (locally = design and test the site offline before it is added to your web server, sort of like a draft). If your site does not have a database, the transition to live is as simple as copying over your home page and then adding all your new pages. For a site design that does have a database, there's another free tool MAMP (and WAMP for Windows) which allows you to work offline with a test database. If all of that is confusing, don't worry — my goal in mentioning this is to show how web design and development continues to be mostly free of cost, even when it gets more complicated.

File Preparation

This is something you can work on in advance of building your website. As an artist/designer, you surely have lots of content stored.

Where do you have content living? Notebooks, coursework folders, ideas scribbled in the Notes app on your phone? Get everything into one place (Google Docs highly recommended!). From there, you can organize it and see how it would make sense on a website.

What about images? You may have a variety of types of images saved.

Image file types for web:

JPG: Use this for photographs
GIF: Use only for animated features
PNG: Use for anything with transparency. Common for logos or other graphical elements.

Make sure images are saved at 72 dpi and in RGB mode. These settings are optimal for digital. If you have files at 300dpi and in CYMK (for example from a print project), convert them before you add the online.

Choose a file naming convention that's specific and predictable. For example: project-name_piece-name.jpg

4. Defining Your Creative Identity

Let’s get off the computer for a bit! Print out this activity sheet (PDF).

Use your answers to these questions to guide web copywriting, look and feel, site organization. Tier relevance/importance to you if possible (Examples: Are you primarily a visual artist, and play piano on the side? Do you consider yourself equally a dancer and a poet?)

Post-activity:

Visiting an artist's website could be comparable to visiting and exploring a collection at a museum. If you want your visitor to be immersed in your world, there are lots of opportunities to do so! Deeply exploring for the adjectives you choose (question 3 in the activity) is great way to start.
Be yourself. No need to put overly marketing-y language on your website. If you don’t feel comfortable being self-promote-y, let your areas of interest, personal style, and talent speak through your artwork and writing.
If you’re still on the Internet in a few years, you’ll probably need to go through this re-design process again. ;)

5. Collaborating with Tech Professionals

Always specify "web developer" or "web designer". A "developer" could be someone who works on the web, or in another software form like games or financial software.

Agencies offering web design services are expensive. Unless your project is large scale or particularly complicated, seek freelancers for help with your artist website. You can try seeking work from students and recent graduates of universities or coding bootcamps for cheaper rates — they are often looking for work for their portfolios, and would charge lower fees.

Freelance project marketplaces:

Freelancer
Upwork
Craigslist
Fiverr (a student at the workshop recommended this)

Tips for working with developers:

Know what you want and what all the design trends and UI elements are — be one step ahead
Get familiar with vocabulary: domain, server, etc.
Know what's unnecessary so you don’t get talked into and charged for stuff you don't want
Some web developers will feel more comfortable if you pass off a design to them. Others want be more involved in the design process start to finish. Know what would work better for you and specify the working relationship in your inquiry.

You can also meet tech professionals at Meetups. For example, here's the Boston tech Meetups section. Read the descriptions and see which ones may attract freelancers looking for projects. If so, come with an outline for your project and maybe someone there would be a good fit to collaborate with! These are also great places if you are working on your website yourself, and are looking for a second set of eyes or help debugging technical issues.

6. Artist Sites for Inspiration

Online exhibit: Henri Matisse: The Cutouts: Clear organization and way to explore the artist’s background and work. Check out the simple videos under the “What is a Cutout?” section. Minimalist & colorful style.

Online exhibit: Artist in Paris - Van Gogh Museum: This is a narrative-based page about the artist Van Gogh. You can digitally “open” exhibit objects and get information about individuals people in the photos. Quotes are also featured prominently. Bold & luxurious style.

Individual art piece: Small Bottle with Peonies and Blue Delphiniums by Van Gogh: From the website above, a view of an individual art piece from the museum’s collection. Image is displayed prominently with summary, object data, and topic tags. Bold & luxurious style.

Individual art piece: Non-Object (Plane) by Anish Kapoor: From MIT’s List Visual Arts Center, an image of the sculpture plus summary including both text and audio. Links to brochure and artist bio. Bold & colorful style.

Installation artist site: James Turrell: Three vertical slides on home page which summarize the artist's work, work organized in several categories, and exhibitions organized by type (solo, group, etc.). Clean & minimalist style.

Graphic designer site: Louise Fili: Work organized by context, "Before & After" gallery, blog, and client list. Vintage & colorful style.

Next steps!

Review pre-built website themes
Review the user interface elements that appear on the web, find variations you like
Buy your domain name (and hosting, if you're ready)
Organize content you already have
Optional: Network with folks in the tech industry
Look at other artist websites for inspiration
Envision and draw out your ideal site
Decide whether a) you want to build your site yourself or b) hire someone
a) Start a coding learning practice or b) create and circulate a call for proposals