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:

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

Example keywords to try while searching for a theme:

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:

Places to learn to code in-person Boston:

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:

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 sample slideshow

bxSlider home page [accessed January 21, 2018]

Minnetonka Moccasin home page slideshow

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 website navigation

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

Lululemon website navigation

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!

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:

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? The following image file types are appropriate for use on web:

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:

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.

Places online where jobs can be posted for freelance web developers to find:

Tips for working with developers:

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!