How To Create Your Own Website As A Small Business Owner

In today’s digital age, having an online presence is the standard expectation people have for businesses. So, as a small business owner, this means either paying someone to build you a website or building one yourself. A lot of small business owners find themselves in the position of not having a budget large enough for a good website or they simply do not want to invest in getting one built. They decide they are going to do it themselves. Whatever the reason for your situation, if you find yourself in this position, I want to help you with providing you as much information as possible in a concise format in order to help you get the outcome for your website that you want.

I will start by saying that it’s definitely a good idea to at least strongly consider hiring someone to create your website for you. Building a website is a large task that will take you lots of time to do it yourself as a business owner. When you consider how much time it’s going to take you and how it’s likely not going to come out nearly as good as it would if done by professional who specializes in that area, outsourcing it and focusing your time and efforts on other more important things really starts to make sense. If you are interested in getting a website built, please check out my company at DarkLight Studio. We’d be happy to hear from you and learn about your project.

But, if you do decide that you do want to build it yourself, you’re going to need a few pointers and this will serve as a great resource for you. It’s filled with lots of great information and is designed to give you tons of great actionable advice in a clear and concise way and helping you learn as much as possible in as little time as possible. There’s a lot of mistakes you can make when building your own website without any design experience and I want to help you minimize those mistakes. Putting in some time to going over this resource now will save you lots of time in the future and will help you get a much better result in the end so stay tuned.

This resource is tailored for beginners, those who are taking their first steps into the world of web design or small business owners looking to build a website their self. If you’re more experienced, a lot of this information will be familiar to you. You’ll also find that as an experienced designer, you can break these rules and get away with it. In almost anything, breaking the rules comes after learning and perfecting them. This resource is more geared towards people who are still learning them. Let’s get into it.

1. Dive Deeper into design do’s and don’ts with Refactoring UI

For small business owners eager to elevate their website’s design but unsure where to start, Refactoring UI is an invaluable resource. This book is specifically crafted to clarify design for non-designers, making it an ideal companion for those of you venturing into website creation for the first time. It’s the resource that can give you the most knowledge and practical advice the fastest.

What’s useful about it?

• Accessible Design Wisdom: “Refactoring UI” breaks down complex design concepts into digestible, actionable advice. It’s like having a designer guide you through each decision, ensuring your website not only looks professional but also engages your visitors effectively.
• Practical Techniques: This resource stands out by offering concrete examples and techniques that you can apply immediately. Whether it’s choosing and creating the right color palette, optimizing your layout for user engagement, or selecting fonts that enhance readability, “Refactoring UI” provides information on it without it being overwhelming to a new learner. It gets right into practical insights you can use right away. There’s also a lot of visual content to help clarify things so it really is a good resource.
• Empowerment Through Understanding: Beyond just tips and tricks, “Refactoring UI” empowers you with a deeper understanding of why certain designs work, without throwing too much material at you.

You can try starting small by focusing on one aspect of your website, such as the typography or color scheme, and apply the principles you learn from “Refactoring UI”. You’ll not only see immediate improvements but also gain confidence in your design decisions.” Refactoring UI” will help you communicate your brand’s message more clearly and compellingly, even without being an expert in this area.

Refactoring UI Book Cover

2. Stick to One Typeface

An extremely simple but equally extremely effective piece of advice, stick to one typeface. The choice of typeface (the overall design of your letters and characters) plays a crucial role in how professional your site appears. It’s tempting to mix and match different styles, but simplicity will be your ally here. Using one typeface throughout your website ensures a clean, unified look that speaks volumes about your professionalism. Using too many different fonts and typefaces and combing the wrong ones is a common mistake amongst inexperienced designers. Keep it simple and just stick to one.

Typeface vs. Font: What’s the Difference?

• Typeface is the design of the lettering, the visual appearance of your text. Think of it as the “family” of the text’s look.
• Font refers to the variations within a typeface, such as weight (bold, light) and style (italic, regular).

Why One Typeface Works Best

• Consistency: A single typeface keeps the user’s experience coherent and smooth. It eliminates visual clutter, making your site easier to navigate.
• Focus on Content: With one typeface, your content takes center stage. Your message becomes clearer, engaging your audience more effectively.

After selecting your typeface, choose different fonts (bold, italic, etc.) within your selected typeface to create hierarchy and interest, but maintain consistency by sticking to one typeface family. This approach will help your website stand out with a professional, polished look. This also takes any pressure off you from having to select multiple typefaces. Figure out the one you want (a tough decision in itself) and you’re all set.

On the left shows an example of a layout using multiple typefaces and on the right shows an example of a layout using one typeface. The one on the right looks much more professional and clean.

3. Craft a Color Palette

Selecting the right color palette is a lot more than just picking favorite colors; it’s about communication and consistency. Colors convey emotions and can significantly impact how your brand is perceived by your audience. You don’t want to be the guy out there who has a bunch of random colors of different shades and hues thrown around in different parts of the website. And even worse, using colors that don’t resonate with how you want your brand to come off as to your customers.

The Power of Color Psychology

• Color Psychology: Different colors evoke different feelings and associations. For example, blue can evoke trust and security, while green is often associated with growth and health. Understanding the psychological impact of colors can help you choose a palette that aligns with your brand’s values and the message you want to convey

Creating Your Color Palette

• Tools for Selection: Utilize online tools like Adobe Color or Coolors.co. These platforms offer user-friendly interfaces that allow you to experiment with different color combinations and select a palette that resonates with your brand identity.
• Consistency is Key: Once you’ve chosen your colors, use them consistently across your website and all other brand materials. This consistency aids in building brand recognition and ensures a cohesive visual experience for your visitors.

Tips for Choosing Your Palette

• Start with a Base Color: Choose a primary color that best represents your brand. This will be the most prominent color on your website.
• Add Complementary Colors: Select additional colors that complement your primary color to create depth and interest. Choose different colors and then different shades of those colors. Don’t feel pressured to use too many colors if you don’t need them. Having most of your design using one primary color and different shades of it is perfectly fine.

On the left shows an example of a layout using multiple colors that do not match well and on the right shows an example of a layout using mostly one main color and different shades of it. The one on the right displays much better and has a consistent look and feel.

Example of a color palette

4. Font Sizes & Hierarchy

Creating a clear visual hierarchy on your website is crucial for guiding visitors through your content effectively. One of the simplest ways to achieve this is through strategic use of font sizes. This not only improves readability but also highlights the importance of different sections of your website. Also, using a consistent set of font-sizes is something you want to do. A mistake amateurs often make is deciding the font-size choice for every piece of their content on a whim. They might make everything a unique font-size and now they have 50 different sizes on their site. Don’t do this. Instead, follow a scale. Like only using multiples of 8, or 10. The example for 10 would be to only use the font sizes 20px, 30px. 40px, etc.

Understanding Hierarchy

• Visual Hierarchy: This is the arrangement of elements in a way that implies importance. Larger, bolder fonts capture attention first, making them ideal for headings and titles. Smaller fonts are perfect for body text, where detailed information is presented.

Tips for Applying Font Sizes

• Consistency Across Pages: Apply your chosen font sizes consistently across all pages. This consistency helps in creating a cohesive look and feel for your site.
• Emphasize Key Information: Use larger font sizes for headings and subheadings to draw attention to key areas of your site. This not only makes your content more scannable but also helps in emphasizing the structured flow of information.

By carefully considering font sizes and creating a clear hierarchy, you can significantly enhance the user experience on your website, making information easy to find and engaging for your visitors.

The example on the left shows a layout with poor font size hierarchy and the example on the right shows a layout with font size hierarchy. The one on the right is much more scannable, easy to read, and engaging.

5. Employ a Grid System

Using a grid system can significantly simplify the creation of professional and visually appealing layouts. A grid provides a structured framework that helps in organizing content clearly and consistently across different screen sizes. Using a grid system can make the sizing and placement of content a lot simpler, especially for those without much or any design experience.

Why Use a Grid?

• Consistency and Alignment: A grid ensures that all elements on your page align correctly, providing a neat, organized look that enhances user experience. Scrolling through a website that has a consistent use of spacing offers a much more pleasant feel then when scrolling through a site where everything begins to feel out of place.
• Responsiveness: With mobile browsing on the rise, employing a grid system can allow your website to adapt smoothly to various screen sizes, from desktops to smartphones.

Simple Grid Layouts to Try And Examples To Give You An Idea

• Two-Column Layout: Perfect for a basic homepage, with a column for text and another for images or call-to-action buttons.
• Three-Column Layout: Ideal for product pages or blogs, where the central column can feature main content with side columns for navigation links or additional info.

Tips for Effective Grid Use

• Start Simple: Begin with basic layouts and experiment as you become more comfortable with the grid system.
• Keep It Consistent: Use the same column sizes and spacing across all pages on your site for a cohesive look.
• Test Responsiveness: Regularly check how your layout looks on different devices to ensure a good user experience.

By incorporating a grid system into your web design process, you can create layouts that are both attractive and functional, ensuring your website stands out and effectively communicates your brand message.

Example of what a grid looks like on web page layout

6. Enhance Your Website with Open-Source Icons

A way you can elevate your website’s aesthetics and user interface without overwhelming the design is by incorporating open-source icons. Icons can communicate complex ideas, improve navigation, and make your website more engaging. As a user of technology, I’m sure you’ve grown to enjoy and appreciate well-placed icons in designs and would like that for your own website/products. This becomes a problem for a lot of non-graphic designers because if you can’t design your own icons and don’t want to pay for them, how are you supposed to use them on your site? Luckily for you, as a small business owner, there’s plenty of open-source resources you can use to have them for free or minimal cost.

Where to Find Open Source Icons

• FontAwesome: A popular choice for web developers and designers, FontAwesome offers a vast library of icons that are easy to implement on your website. Whether you need social media icons, user interface symbols, or anything in between, FontAwesome likely has an option for you.
• Flaticon: Offering a wide range of styles and themes, Flaticon is another excellent resource for finding open-source icons. You can customize the size and color of the icons to match your website’s design, ensuring consistency across your site.

Tips for Using Icons Effectively

• Keep It Simple: Choose icons that are easy to understand at a glance. Complicated designs can confuse rather than help your users.
• Be Consistent: Use icons of a similar style and size throughout your website to maintain a cohesive look. Don’t use a bunch of different kinds of icons from different libraries as it will start to make your design look a bit off with things out of place.
• Consider Placement: Place icons near relevant text or headings to enhance comprehension and guide users’ attention.

By utilizing open-source icons from resources like FontAwesome or Flaticon, you can add visual interest and improve the usability of your website without adding clutter. This simple addition can significantly impact your site’s professionalism and user experience.

Here are some examples of icons from the FontAwesome library

7. Leveraging AI for Content and Imagery

Creating compelling content and finding the right images can be an annoying and time consuming task for small business owners building their first website. It’s one of the things that really turns them off from wanting to take on the project themselves. Thankfully, New AI tools and online resources can simplify this process, providing a solid foundation to craft your website’s narrative and visual appeal. We’re living in a time where more and more AI tools are becoming available and here is an area where you can take advantage of them. As a non-creative person, these tools can provide lots of valuable assistance to you and help you do things both better and faster.

AI-Generated Content & Imagery

• Utilize AI Tools: Tools like OpenAI’s Chat-GPT can help generate draft content for your website, including product descriptions, blog posts, and marketing copy. This technology can save you time and provide a creative starting point for your content. And tools like MidJourney can help you generate tons of free stock imagery for your site. You might be surprised at the power and capability of these tools and how quick they continue to advance.
• Personalization is Key: While AI can offer a great baseline, it’s crucial to inject your personal touch into the generated content. Tailor the drafts to match your brand’s voice and mission, ensuring that the final output resonates with your target audience and reflects your business’s unique identity. Only the PEOPLE that understand your brand and its mission can give the kind of tone you’re looking for.

Tips for Effective Use

• Review and Edit: Always review and refine AI-generated content to ensure accuracy and relevance. These tools are not perfect and can be unpredictable at times. Always go through and tweak and adjust wherever needed.
• Optimize for SEO: Remember to optimize both content and images for search engines, including the use of keywords and alt text for images.

By harnessing AI for content creation and generating imager, you can efficiently populate your website with engaging material that captures the essence of your brand without having to pay lots of money, sourcing through a bunch of material trying to find what works, or having to create it yourself.

The content and the image below were generated by AI.

8. Consistent Spacing

One of the simplest yet most effective ways to enhance your website’s aesthetics and usability is through consistent spacing. A good consistent use of spacing makes the design feel nice, neat, and cohesive. As you can tell by now, the theme of pretty much all of these tips are to go for consistency. A bunch of random colors, a bunch of random typefaces, a bunch of random font-sizes, etc. all make the design feel inconsistent and out of place. It doesn’t make for a pleasurable viewing or using experience.

So, just like we went over how using multiples of 10 for a consistent use of font-sizes is something you can do to enhance the aesthetics of your design, we’re now going to look at how using multiples of 10 for spacing can work for you too. We call this the 10px grid. While we did already go over grids previously, we were talking about it more in the terms of groupings in a page. We’re now going over the actual pixel size of spacing between these groupings.

Why the 10px Grid?

• Makes Things Easier: Using the 10px grid or any consistent multiple of spacing takes away the anxiety of having to pick between any single number. People with no design knowledge don’t even know where to start with this decision. Reducing your pool of options by 10x will help simplify things.
• Consistency: Utilizing a base unit of 10px for margins, padding, and gaps between elements ensures your design is harmonious and unified.
• Flexibility: The 10px grid adapts seamlessly across various screen sizes, preserving your design’s coherence from large desktop displays to compact mobile screens.
• Readability: Adequate spacing around and within content elements improves legibility, allowing your website to communicate more effectively with its audience.

Implementing the 10px Grid

• Start with the Basics: Apply the 10px rule to fundamental elements such as the margins surrounding content blocks, the spacing between paragraphs, and the padding inside interactive elements like buttons.
• Scale Up: For more significant gaps or when designing broader layout elements (e.g., the padding around sections), employ multiples of 10 (20px, 30px, 40px, etc.) to ensure consistency while offering visual variety.
• Fine-Tuning: It’s understood that not every design element will conform precisely to the 10px grid. Adjust spacings slightly as needed to maintain the design’s overall aesthetic and functional balance.

By embracing the 10px grid system, you’re setting the stage for a website that not only showcases a sleek, professional look but also offers an intuitive and user-friendly navigation experience.

The example on the right shows a good use of consistent spacing and the example on the left shows a poor use of spacing and things look out of place. The one on the right looks much better.

Final Tips

Do your best when it comes to hierarchy & balance

Having good hierarchy and balance in a design is a bit more advanced and not something you can expect to do a great job of without practice and knowledge. But you can keep your eye out for things that are making your design look not the way you want or expected it to. Unnecessary bold or large text, use of loud stand out colors in parts you don’t want to stand out, elements that look very disproportionate to one another, etc. Take a look at your design and ask yourself what and how you feel about certain things. Take care of things that seem jarring. Make things as easy as possible to find and/or read. And just try to not make anything in your design feel lopsided or out of place.

CONSISTENCY

As I already previously pointed out, the theme of this entire post has been about keeping things in your site consistent. Consistency is key and it’s the number one thing that amateur designers and website builders get wrong. Same fonts. Same colors. Same spacing. Same style of visual elements. That’s another thing, don’t use a bunch of random unrelated pictures in hopes that it carries the design. It does not end up looking good. Keep things the same and keep things consistent and balanced. Follow this advice and you’ll be okay.

After reading this, I hope this puts you in a much better position to create the best site that you can and that you’ll avoid lots of headaches and mistakes you would’ve otherwise made while doing so. Good luck!