Fast company logo
|
advertisement

A guide to getting your work on the internet so you can share it with others, written by Jason Huff and illustrated by Sean Suchara.

How to make a website for your creative work

[Illustration: Sean Suchara]

BY Jason Hufflong read

This post originally appeared on The Creative Independent, a resource for creative people with a deep archive of how-to guides and interviews.

If you’re a creative person living in the world today, people will expect to be able to find some examples of your work online. How you choose to put it there, though, is completely up to you.

I got started on the web in the early aughts when I created a gallery for my creative work. I call it a gallery because it was just that: a blank space with images in a row that linked to some projects I wanted to share with friends. Since then my site has evolved, disappeared, come back, and spawned other sites that express my ideas and identity online. Each evolution was a chance to share new work in a way that reflected how I wanted people to experience it.

I work on the web everyday. I help designers, artists, and galleries discover and create their online presence. And for seven years, I designed and led teams at Etsy, a platform that helps millions of creative humans around the world use the web to make an income from their craft. In all of my work, I’ve learned that every person brings their own body of knowledge and point of view when they create their own space online. The unique approaches that each individual brings to the experience are what make the internet an interesting place to explore.

Before digging into this guide, I recommend reading Laurel Schwulst’s essay, “My website is a shifting house next to a river of knowledge. What could yours be?” It’s a great sister piece to this more practical guide, and provides many poetic explorations of the website format. Like Laurel mentions in her essay, “Artists excel at creating worlds.” I hope this guide will help you start creating yours.

[Illustration: Sean Suchara]

Start with “why”

Consider your end goal

Begin planning your online presence with an end goal in mind, i.e. what you hope to accomplish by putting your work online. This goal can be as simple as, “share my best pieces of writing with friends and acquaintances,” or, “make the internet a bit weirder and more wonderful by documenting my creative process daily.” It can also be more ambitious and specific–“I’d like to sell enough ceramics to be able to hire a studio assistant,” or, “I’d like to show off my best curatorial work to help me win more grants and residencies than I did last year.”

Goals can feel intimidating, especially when they’re applied to a creative practice. As you start considering the end goal for putting your work online, you might find yourself asking, “Won’t having a goal just make me feel constrained, or cause my site to end up feeling contrived?” The answer is no. Just like with designing something or making a work of art, using a constraint can help you be more focused and inventive. It will also ensure you plan your site in a way that’s attainable, sustainable, and helpful to your practice.

Getting started: It ain’t that hard

Starting can be hard. Trust me, I know from years of experience. So I’m going to offer you a six-step mini-guide for getting what might feel like a daunting task off the ground. To complete this short process you’ll need a blank sheet of paper, something to write with, a timer (you can create one by searching google), your intuition, the ability to temporarily avoid critiquing yourself, and about 30 minutes.

Mini-guide to create a goal for your creative web presence:

  1. Take a deep breath. Chill out.
  2. Set a timer for 15 minutes. Then, free-write some ideal outcomes (aka potential goals) you have for sharing your work online. Hold off on judging these outcomes–just write what pops into your mind. Try to write down five to 10 ideas. The more specific you can be, the better. If you feel stuck on one, simply move on to the next.
  3. Once you’ve completed your list, use a one-minute timer to review and circle the two outcomes/goals that resonate most deeply on a gut level. This is your moment to tune into your inner guide.
  4. Spend five minutes expanding each of your circled goal ideas. You can do this by writing a long and more specific description that gives the goal more color. This should take about 10 minutes in total. You can use the SMART goals framework if you’re like me and find frameworks helpful. This will ensure your two draft goals are specific, measurable, attainable, relevant, and time-bound.
  5. Use the final five minutes to review both goals and make a decision about which one resonates most with why you want to create a space for your creative work online. You can also take pieces from one and add them to the goal you’re more excited about, or you can merge both together if it makes sense.
  6. Voila, you’ve narrowed down your reasons for making a website into one specific goal. Read your final goal out loud. How does it feel? Make tweaks if necessary.

Note: If you reach the end of this process unsatisfied with your goal, feel free to take a break for a bit and then replay it.

Congratulations! You’ve officially started the process of creating your online presence. Writing your goal down means you’re 33% more likely to get your site up. Putting it in a spot where you can see it everyday is even better. So, take a moment to celebrate.

Who is this thing for, and what should it look like?

Identify your website’s audience

[Illustration: Sean Suchara]

When you put work online, you’re adding it to a public space. This is the case even if you design your website to be a small collection of images and links held together by a few lines of code. Because of this, it’s crucial to consider the needs and wants of your future website’s visitors. As with your site’s goal, being specific about your audience will help you to focus precisely on how your site’s content and form should take shape.

Spend some time imagining your website’s ideal visitor, and write out a list of things that might be important for their experience. Ask yourself: Who are you creating this website for? What kind of experience is that person looking for? Where are they coming from? Are they friends, artists, curators, potential clients, or someone else?

To get even more specific about your audience, it can be helpful to think about people in your existing community who match the profile of your ideal visitor. Then you can imagine that person’s wants, needs, and motivations for visiting your site.

Once you’ve created this ideal visitor profile, feel free to give them a name. Then, keep them in mind alongside your goal as you continue work on your website.

Inspire yourself by researching other websites

Chances are you’ve visited some other creative people’s websites and can easily remember a few of your favorites. It’s worth your time to revisit those sites to see what makes their site successful. What does their web presence look and feel like? Can you interpret their end goal from their site’s design?

As you explore different websites for inspiration, keep your goal and audience in mind, and take notes on what you do and don’t like. You’ll likely find a remarkable amount of similarities and differences between all the sites you visit. The similarities are usually focused on meeting common expectations for any site visitor regardless of their profile. The differences are what make the experience of visiting an artist’s site memorable, and usually relate to their specific practice, technical abilities, and creative sensibilities.

As you brainstorm some of your favorite creative websites, I’ll share a few of mine:

  • Visual artist, curator, writer, and teacher Morehshin Allahyari uses a customized WordPress site that works well for both desktop and mobile viewing, and for screens of all sizes. She keeps content organized into logical sections that match how she works: artworks, curatorial, writing, teaching, contact.
  • Visual artist Petra Cortright creates an expressive experience with an early-web vibe. The arrows point you toward an intentional 30-second scroll to finally reach the links to her work.
  • Visual artist American Artist uses SquareSpace with a minimalistic, monochromatic aesthetic. The stark black background creates focus for the large images of their work while keeping the navigation, links, and writing crispy clear across the site.
  • Artist and writer Ingrid Burrington keeps her site’s experience simple by relying primarily on text. She shares what she’s up to in a way that shows both self-awareness and a sense of humor. Note that her navigation is created by a sentence that describes her work.
  • Visual artist and programer Damon Zucconi resists common navigational buckets by creating a sprawling and immersive portfolio that can be filtered by “Not Everything” and “Mostly Everything.”
  • Visual artist and writer Jenny Odell uses a custom splash page (a page that loads before the site’s main content appears). Once you’re past the splash page, she uses a grid layout to make it easy to navigate her projects and writing.
  • Creative director and designer Seokhoon Choi creates a graphic, single-page site that works more or less like a business card. It has all the key information needed to get in touch, while expressing his personal aesthetic.
  • Early tech pioneer and artist Tom Jennings uses his site to share an unassuming 25-year-old archive with 30,000+ pages of content, all written in basic HTML with a simple CSS setup. A line near the bottom of the homepage points out that the site has “no trackers, no ads, no javascript.”
  • Designer Carly Ayres uses a public Google Doc for her site. The title, “[Carly Ayers] Website FINAL,” is a wink at file naming practices, because few digital files are ever final. The doc is open to comments and editing from anyone online, making her site a true public space–graffiti and all.

Now that you’ve run through some folks on my list, you can head off and explore people that inspire you. Most everyone will share their website links in their social media profiles, so browsing Twitter or Instagram can be a good place to start your research. As you browse, take notes and make sketches of the layouts and ideas you like. Once you’ve gathered enough inspiration, it’s time to put it to good use.

Think strategically about what will live on your site

[Illustration: Sean Suchara]
Start by making a list of exactly what you’d like to share on your site: the words, images, projects, music, blog posts, news, links, or whatever else. As you do this, return to why you’ve decided to put things on the internet–yes, your end goal. If you’re like me, there might be years (or even decades) worth of work hanging around. Sharing it all likely doesn’t make sense. Would your ideal audience want to sift through your whole archive trying to find your best projects?

The way you choose to balance and contextualize your past, present, or even future work on your website is completely up to you. Ultimately, this gives you the power to say exactly what you want to say about yourself and your practice–without feeling obligated to be completely comprehensive. It’s totally up to you to decide what you want to share, and how you want to share it.

Basic organization

As you’ve researched other sites, you’ve likely noticed these four basic types of pages:

  • Work/projects: A portfolio-style presentation of the things you’ve made or done that together create a good representation of you, what you do, and what you want to do. This could be a more thorough archive, or just a few highlights–it’s up to you.
  • About: A page sharing a short statement about who you are and what you do, plus (if you want) a longer paragraph detailing your more recent work, the specifics of your practice, or anything else you’d like to share. Some people include a link to a more detailed CV here, but you don’t need to.
  • Contact: A simple page sharing how your site’s visitors can get in touch with you, be that through email, social media, or a contact form. Sometimes this is combined with the About page.
  • News: If you plan to post frequent updates, it’s a good idea to have a section on your site that’s just for announcements. You can also use this section to create pages about new projects, before those projects are ready for your “Work/projects” portfolio section.

Start sketching your site out on paper

advertisement

Your first instinct for getting started might be to buy a domain or sign up for a platform. However, starting by sketching with a paper and pencil is helpful because it’s much easier to play around and try out multiple approaches. Doing this initial work will help you better understand what capabilities your site will need when it comes time to choose a platform or framework, or even domain name.

With your content in mind, take some time to make a few wireframe drawings of what your site might look like. As you start sketching, consider these questions:

  • What are the key pages you need?
  • How can someone navigate around?
  • How frequently will you be updating your site with new projects?
  • Where will you share news or other updates?
  • How will someone sign up for a mailing list (if you have one), or find your social media profiles?
  • Where can visitors find info about how to get in touch?
  • What will be unique about your site’s overall look and/or experience?

As you sketch, keep referring back to your end goal. Be playful at first, then revisit what you’ve drawn with a more critical eye. At some point, consider your site from the perspective of the ideal site visitor who you identified earlier. From their perspective, what might be missing? What information won’t be helpful or relevant to them? Which elements will make them feel a connection to your work, and to you as a person?

Once you’ve reached a point where you’re feeling good about your sketches and you know the basic pages and components you want to include, that means you’re ready to get started in the virtual space.

[Illustration: Sean Suchara]

Technically speaking

To code or not to code

Now you may be asking, should I code my own site? To answer this question, simply acknowledge your existing coding skills (or lack thereof), assess what you’ll need to learn to create a site you’re excited about, and then think about whether or not it makes sense for you to spend the extra time it takes to build a site from scratch. Know that there is no need to code your own site these days, as there are tons of flexible, easy-to-use platforms out there.

If there are web skills you’re looking to develop, coding your own site can be a great learning opportunity. Plus, there are lots of great courses and guides out there. Just keep in mind that learning to code while you create your site can add significant time to the project.

Quick-start platforms

The site-building platforms listed below will let you customize themes to meet most of your design needs. Additionally, extensive documentation and support are available with each platform. With the exception of Squarespace, each of the below also offers a free version. Paying for the platform will you get more features and options, including the ability to register a custom domain name, which I highly recommend. With this in mind, here are the most commonly used platforms:

  • WordPress.com: This is the most common platform on the web for building and maintaining small sites. It has plenty of templates and plugins to meet most of your needs. WordPress.com also offers fairly low pricing compared to other options.
  • Squarespace: This platform offers a wide array of beautifully designed templates that work responsively across all screen sizes. It also provides plenty of customization options. They have 24/7 customer support that is responsive and helpful.
  • Wix: This platform is easy to use and flexible, and includes automatic site backups. They have a wide array of templates with a clever algorithmic helper called ADI (Artificial Design Intelligence) to guide you through setup. Unfortunately there is no live support (just email), so when you encounter a problem, it can take a bit longer to resolve.
  • Weebly: This platform is similar to Squarespace and Wix in many ways–including the setup, features, and pricing. They have a more limited theme selection, but they do work on all screen sizes. Themes can’t be edited as much as you like.

DIY frameworks

[Illustration: Sean Suchara]

If you are technically adept, exploring these DIY options can be rewarding, and will make your site feel more unique. Keep in mind that these options will require more steps, skills, and time than the platforms listed above–even if you already know how to code. Also note that if you plan to sell things from your site, you will have even more work to do here.

All of these frameworks are free, but require you to pay for your own site hosting and domain registration. I’ve listed the DIY approaches in order of complexity, with the simplest options towards the top:

  • Basic HTML: If you’re good with the basics of coding, but have the desire to do something technical, this option is a great place to start. Seth Price‘s site is a good example of a notable artist with a basic HTML site.
  • WordPress.org: This is the free and open-source version of WordPress. Most companies that offer website hosting and domain registration have one-click installation options for this version of WordPress. You get a lot of the perks similar to the paid WordPress.com platform mentioned in the previous list, but play a bigger role in maintenance, upgrades, and security. Note that without certain plugins, these sites can be vulnerable to security threats.
  • Indexhibit: Developed by other creatives, Indexhibit is the first framework I used to create my site in graduate school. It’s free, flexible, and simple, but does require that you know how to create databases, use FTP, and change permissions on files. They have helpful tutorials for getting things set up quickly.
  • Github Pages: For the most technically adept, this is a great option. You will still need to register your domain with another service. This offers speedy static sites, version control, and free hosting. The templates that come with this setup are very basic, and you’ll likely want to make bigger changes to them. If you choose this route, I recommend using Siteleaf to make editing content easier.

Your name dot com

Once you’ve chosen a platform or framework, you’re ready for one of the most exciting steps: buying a top-level domain name. This is essentially buying an address on the internet.

Now, if you have a fairly common name, there is a good chance that yourname.com may already be taken. If it is, fret not: this gives you one more opportunity to be creative. Domain names have become more plentiful in the past few years, with the introduction of many alternatives to “.com.” If you can’t get yourname.com, try to choose something memorable that relates to your creativity, personality, or audience. A personal favorite domain name was John Michael Boling’s now defunct https://www.gooooooooooooooooooooooooooooooooooooooooooooooooooooogle.com/. There are also plenty of fun alternatives to “.com,” including “.pizza,” “.club,” and “.info.” You can browse available domain names related to your own name here.

Note: iwantmyname.com is a good tool for exploring available domain names, however I highly recommend buying your domain name through the platform or web hosting service you’ll be using. It will make managing your site over the years much easier. More on this below…

Once you have a domain name picked out, how do you buy it?

If you chose to go with a quick-start platform, each one will have its own guide to buying a domain, and it will likely automatically connect it to your site after you’ve purchased it.

If you chose the DIY framework route, there are dozens of sites that will register a domain for you. To keep your setup simple, it’s good to buy a domain with a company that can also host your site. The service that I’ve personally used for this purpose is DreamHost. They have reliable uptime, affordable pricing, and are completely carbon neutral. If you want to dive deeper into the options for registering and hosting services, you can read this list of reviews.

Building and versioning

[Illustration: Sean Suchara]
The web is ever-evolving, and hopefully your site will evolve too. But before it can evolve, it needs to live. Like with any other creative endeavor, perfection is the enemy of progress. It’s easy to get caught up in all the possible ways you could create your site. Because of this, it’s best to set a deadline for yourself, get feedback, and launch the damn thing.

Some basic steps to follow as you start to build your website:

  1. Gather all the content you plan to publish on your site, and organize it based on where it will live. If you have images or articles, bring them together within one file. (A nerdy note about those large images you’re probably using: eventually, you’ll want to run them through TinyPNG before uploading them. This is a free service that will compress large images to help your site load efficiently for visitors.)
  2. Using your earlier sketch as a guide, and with either a quick-start platform or from scratch, dive into building an initial version of your website. Think of what you’re making as a prototype, or “minimum viable product,” that will change and get better as you experiment and get feedback. At this stage, don’t worry about getting every single image or article up–you’ll have time to do that later.
  3. Share your prototype with a few people you trust, who also know you and your practice well. You can do this by simply emailing a link, or better yet, by sitting with them and having them explore your site while you watch. Tell them your goal, and then ask for their feedback. Note: You will get something extremely valuable in this moment. In the future, when people on the internet view your finished site, you will not be sitting with them. This means you’ll have no idea how people will perceive your site, and therefore, how they’ll perceive you. Use this time with your trusted friends to see what their first impressions are, what they think the site says about you, and whether or not they think the experience will work to help you reach your main goal.
  4. Based on the feedback you get, you may want to tweak some things, or even rearrange your site entirely. (Remember: how your site comes to life is up to you, so it’s ok to cherry pick the feedback you agree with.) If you do make edits, ask for a second round of feedback–from the same friend, and maybe a new one, too–to see how your newer version lines up to your goal. Hopefully after a few rounds, you’ll have confidence that your new site is accomplishing what you want it to accomplish.
  5. Finally, add the rest of your content and put on all the finishing touches. (This is the moment to process your large images using TinyPNY, as I mentioned in the nerdy side note earlier.)
  6. Once your site is complete, send it to another trusted friend (preferably someone who is good at catching typos and details), and ask them to do a quick review.
[Illustration: Sean Suchara]

Launch day

Congratulations, you’ve put the finishing touches on your site and now it’s time to launch it into the world! Just like how you built a site that suits your style, you can launch it in your own style as well. I have some friends who like to keep their announcements more intimate by sending around an email note with the people they want to share it with BCC’d. Some other friends would go for a wider audience by using Instagram and/or Twitter to share news like launching a new site. Any way you want to share your new home on the web is great, as long as it feels right to you and keeps your goal and audience in mind.

For more tips on thoughtful approaches to promoting your work, read A creative person’s guide to thoughtful promotion by Kathryn Jaller.

If you’ve made it this far and successfully launched a site, that’s a big deal. Please do me one final favor and celebrate all your hard work. Treat yourself to something special, and admire what you’ve accomplished.

Appendix: Maintenance mode

[Illustration: Sean Suchara]
Some basic steps to follow as you start to build your website:Much like your own human body, a website is made up of many ever-so-slightly shifting components, and because of this, it’s worth doing at least an annual checkup to make sure things are all working as they should.

Here is a checklist of recommendations for keeping your site running smoothly once you’ve got it up:

  • Make sure your domain and hosting account is set up to auto-renew. If you can afford it, invest in a multi-year contract from the outset to save some money in the long haul, and make things easier on your future self.
  • Use a password manager, and/or create a private and secure document that has all of your account information and login details. The more complex your setup is, the more important this documentation will be when something goes awry, or when you finally need to renew that hosting contract three years from now.
  • Annually log into your account manager and backup your site to your computer or a thumb drive. This archive will be nice to look at years from now when your site has evolved and changed. It also comes in handy in rare moments when content is lost or a service goes down. (Note: If you’re on a platform like SquareSpace, backups can be a little trickier)
[Illustration: Sean Suchara]

In summary . . .

Creating a space for yourself online with your own domain and style is one of the most important things you can do to share your work. As you think about how to present yourself and your work online, don’t obsess over getting everything perfect. Keep your setup simple, and focus on your goal and audience. Once it’s up, pause to celebrate your effort and accomplishment. Then, get back to making the work you’ll be excited to share in your next site update.

Recognize your brand’s excellence by applying to this year’s Brands That Matter Awards before the early-rate deadline, May 3.

CoDesign Newsletter logo
The latest innovations in design brought to you every weekday.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Privacy Policy

Explore Topics