Making an artist website
Project 3 assignment sheet
What makes a good site?
Ideally your website is not just a 1:1 translation of a PDF into a website. Artist websites usually show us the person’s interests in some capacity.�In general, we are looking for two things:
1. The artist’s personality
2. An activation of what the internet has to offer
The internet is a medium for screens, which provides us with unique opportunities and pitfalls.�
What does the internet have to offer?
A lot of people think that making something online situates it in a certain gesture.
That’s not true. The internet is too big of thing to say that it provides a singular context, aesthetic language, or cultural meaning. But there are several stereotypes/public imaginations of the internet that you can play upon to build something intentional.
What does an artist website look like?
Projects
The primary building block for artist websites are projects.�Sometimes each project gets its own page. Other times, projects are stacked together on a single page.
Let’s look at some examples. Keep in mind in the following relationships:
Projects: a page for each project; images laid out in a simple grid
Designer: Ida Kauter
Projects: gridded yes, but stacked on a single page
Designer: Wille Larsson
Projects
Designer: Laboratorio
Projects
Designer: Daniel Schriër
Projects
Designer: Éditions Biceps
Projects: project carousels collapse images
Designer: House Publishing
Projects
Designer: Alfie Wheatley
Indexes
An index is a page that lists other pages. Most times you’ll see a primary index that lists all of the projects. Other times you will see several indexes that organize projects into buckets.
Categories provide a sense of organization, especially if you are working with a larger archive.
A bad categorization system results in categories with only 1 or 2 items. That’s unnecessary hierarchy. You could achieve a better effect with a tagging system or a nested menu
How are your indexes organized? Are things ordered chronologically or by theme? Are they grouped into categories? What characteristic do you use as the organizing principle?
Indexes: indexing projects by discipline
Designer: Nousjka Daniels
Indexes: indexing projects by body of work
Designer: Nicole Brugger
Indexes: indexes can be cute and fun too
Designer: Damon Zucconi
Splash pages
How does the artist make an impression
Splash pages: interactivity
Designer: Talia Cotton
Splash pages: jumping straight into the projects
Designer: Margi Pippi
Splash pages: an index with a twist
Designer: Joel Galvez
Splash pages: a navigation system with a twist
Designer: Priscilla Oliveros
Splash pages: a simple animation
Designer: Zimmer von Désirée
Splash pages: a bio
Designer: Dasha Lugovkin
Splash pages: a brief insert at the top, like a greeting
Designer: O.D.D.
Navigation
How do we move through your site?
Navigation: omnipresent list of projects in a parallel scroll
Designer: Fundament services
Navigation: same idea, completely different art direction
Designer: D Josh Cook
Navigation: only one thing to do: click!
Designer: John Patrikas
Navigation: it’s not all about menus. You can put links on project pages too.
Designer: Ida Kauter
Outliers
For however many patterns I can show you, there will always be people going outside of them. These sites show different ways of forming an online presence.
Outliers
Designer: Lutz Bacher
Outliers
Designer: Glen Fogel
How do you make a website?
We’ll talk about platforms and services soon, but before we get into that, we should talk about how to design for the web.
We begin with wireframes, where we design information hierarchy and the general layout.
Styling and art direction is applied on top of the wireframe.�What happens when real jpegs are put into the layout? When you choose a typeface? When you apply a color scheme?
Wireframes
Wireframes
Wireframes ask you to plan for information hierarchy without yet fully introducing complexity of style
A wireframe is a representation of the website with rectangles in place of images and filler text in place of real text. Wireframes should generally avoid color or images.
We use wireframes to answer questions like…
How many images can we expect the user to scroll through before they see text describing the image?
Does our vertical image work on a desktop screen?
Does our landscape image work on a phone screen?
Do we organize projects into categories?
If so, how does that look?
If there are videos to show alongside images,�how does the layout accommodate that?
Wireframes require a paradox.
You are not yet styling the page, but you need to know something about the style to know what the proportions of each element should be.
For example, if you want to design a page with a headline, your wireframe will sketch out the heading’s font size. But you need a typeface chosen in order to reliably make a decision like that
Similarly, you don’t want to put real images into the design yet, but you don’t want to go into the wireframe completely blind as to what materials you have access to. You don’t design a carousel if you only have 2 images per project.
For now, try to remain focused on just the information architecture
Good design is never a linear process.�We move between research, organization, and synthesize fluidly
Art direction
A wireframe can go a million different directions with art direction.
What are you actually doing to the jpgs to fill out the layout?
Are you cropping them?
Putting a frame around then?
Showing them all on a purple carpet?
Wireframes
Wireframes into art direction
Wireframes
Wireframes
Wireframes