In a rush? Check out the TL;DR and suggested tools at the bottom of this post.
1. Claim Your Domain
Is this a project for a new business or online portfolio? If your web app will be public when it’s finished, you’ll need a registered domain. Once you’ve nailed the name (which can be arguably one of the hardest parts), check that it’s available and affordable on a domain registration site like name.com.
Is the name you want already taken? Try adding hyphens ("my-company.com"), location ("mycompanyseattle.com"), or category ("mycompanycatering.com"). Some registrars will suggest alternate domain names or TLDs (top-level domain, like .com, .co, or .net). Get the .com TLD if you can—.net, .co, and .io are suitable back-ups. If all of the names you’re trying are taken and no good variation comes up, you may want to consider how hard your company will be to trademark or find in a Google search.
Here’s an example of what happens when you search for “Craft” vs. “Craft CMS” in Google:
Is your company name unique enough that your website will be the first option in Google, or will a Wikipedia page, dictionary definition, or completely unrelated brand come up first?
2. Start a Mood Board
What designs to you like? Which brands resonate with you? Collecting a list of these resources is a helpful exercise to help you find your style. Plus you’ll see how other companies are successfully engaging with their audience, communicating their message, and using video, images, fonts, colors, and copy to draw users in. Pinterest is a great tool to use, since many people already have an account and you can share public or private boards with others.
3. Consider the UX
If you’re not a designer, the look of your website doesn’t have to be fancy, but it should be easy for your audience to get the info they need. Think about your:
- Calls to action
Use CTAs like Click Here, Learn More, Find Out, and other actions to direct your audience to what they should do once landing on your page. Don’t assume they’ll automatically know how to navigate your site. - Link hierarchy
As you plan the navigation and file structure, consider which pages are most important and should be in your site’s navigation, and which ones can be linked to internally from other pages. Also, lay out the possible paths for your audience and how deep users have to go to get to crucial pages on your site, like a contact form or checkout page. - User accounts
Will people be creating accounts? How will they log in? What information will be more accessible to them if they’re logged in vs. not having an account? Consider any security and interface limitations if your web app lets someone create and save information that will need to be stored in a database for their access later.
Walking through the user experience will also help when you’re scoping out what technology you’ll use to build the app itself—which frameworks will support the structure and needs of your app the best?
Wireframing tools like Axure and Balsamiq will help you plan out the structure of your home and internal pages. Visualize how everything will be organized on your site so that you know early on what complications you might run into.
4. Collect Your Content
Before you start coding your website, answer the questions below to know what functionality, layout, and capabilities your website will need:
- Is text the best way to communicate with your audience, or will a video be more effective?
- What should be the first thing people see when they hit your web app?
- Do you want a blog section, or a forum, or both?
- Does each page need to hold several paragraphs of text, or are you featuring images or projects for an online portfolio?
- Will pages with 10 paragraphs or images look as clean and organized as one with only two?
Take some time to choose and organize your:
- Color scheme
Use a tool like Adobe Color to pick a color scheme. They have a gallery of themes that others have created, or you can create your own and save them for later. They also have a feature that will create analogous, triad, complementary, or other color harmonies for you. - Fonts
Sites like Typography.com have a huge library of fonts available. If you’re looking for open source typefaces, check out Google Fonts. It’s free, full of options, and easy to add to your project. - Images and assets
Not a photographer? No problem—great assets aren’t hard to find, between paid resources like Getty Images and free sites like Unsplash. You can even use Creative Commons to find images or illustrations that are open for commercial and non-commercial reuse. Just make sure to use attribution, if requested by the creator!
5. Pick a Platform
Do you need a CMS? Which one will work best for you? Use CMS platforms like Wordpress, Craft, or SquareSpace if you’re not planning on building your own. Some have free and premium templates available that can be used as the front-end of your website if you need inspiration, want to alter a theme that is already created, or are building the back-end yourself.
TL;DR
Building a web app? Before you start:
- Claim Your Domain (name.com)
- Start a Mood Board (Pinterest)
- Consider the UX (Balsamiq, Axure)
- Collect Your Content (Adobe Color, Unsplash, Google Fonts)
- Pick a Platform (Wordpress, Craft, SquareSpace)
