How to Build a Web App, Part 1: The First Steps
The process of building a web app starts long before you write your first line of code. Here’s how to make a plan and what tools you’ll need before opening your text editor.
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?