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.

• 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

• 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).

• 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.

• 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

• 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.

• 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

• 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.

• 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.

• 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.

• 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.

• 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

• 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.

• 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

• 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.

• 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.

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.

• 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.

• 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.

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!