Tips for Getting Started in Web Design
While your website designs should incorporate traditional elements, there are a number of things to be aware of when taking your design online. From text placement and heading styles to interactive elements and usability, website design goes far beyond the content you place on a page. Keep reading to learn more about the fundamentals of web design, as they apply to designers working online.
At their most basic level, websites are just fancy grids. When designing for the web, it’s important to keep in mind that any elements on a website are part of a series of columns and rows. That doesn’t mean that you can’t break the grid with your designs, but when doing so it’s important to be mindful of how that design will be executed.
If a text element on your page can be web-based type, it should be! Not only will this make your design more responsive and accessible to users, but it will also help your site’s SEO. Text that is part of an image or graphic will not be indexed by search engines, meaning you can easily lose out on those easy rankings.
When it comes to color pairings for website text, it’s important to keep ADA compliance in mind. Low-contrast text and backgrounds are not only difficult to read but could also violate ADA guidelines for online accessibility.
When designing for the web, it’s important to imagine how a user will interact with your design—even if the initial mockup is flat and undeveloped. What color will links be when you roll over them? Will there be some sort of animation as users scroll down a page? Consider the path of their discovery and make sure that you’re leaving elements along the way that will surprise and delight them (in addition to being informative and well-functioning).
While the base structure of a website is a grid, it’s also important to think about websites as funnels for the content on them. So what does that mean? Let’s break it down.
A website’s homepage should give a broad overview of everything you can expect to find on the other pages of the site. Does that mean your homepage should duplicate all of the site’s content? Absolutely not! Instead, think of the homepage layout as a teaser of what’s to come on future pages. It also offers lots of great opportunities to link to other pages within the site so users can learn more.
Not only are heading styles important for establishing a visual hierarchy on a page, but they are also an essential part of good SEO. H1 styles should be used only once per page for its main topic or title. Next, slightly smaller headings known as H2 styles should be used for the main ideas of your page. H3 styles can be used for supporting ideas of those main points, and so on and so on. For example, a page about your company’s history might break down like this:
- H1: About
- H2: Our Story, Meet the Team
- H3: Team Member Names
- Websites are fancy grids.
- Websites should organize content like a funnel — from most broad to most specific.
- Consider the path you’d like users to take when they interact with your design before any development begins.
Digital Project Manager
Megan Bannister is Project7 Design’s Digital Project Manager. On a daily basis, Megan works with clients and the p7 team on the studio’s digital and web-related projects.