Ep. 2: From Basic to Beautiful – Website Design 101

dietitian turned designer podcast

Welcome to the Dietitian Turn Designer Podcast, where we strive to empower health and wellness professionals with the knowledge and skills they need to create inclusive and impactful online businesses. I’m your host, Courtney Vickery, and you guessed it, I’m a Dietitian Turn Designer, and my goal is to provide valuable insights and actionable tips to entrepreneurs, designers, and health professionals who want to create weight, inclusive businesses that prioritize authenticity, compassion, and inclusivity. On this podcast, we have informative and engaging conversations with industry experts, and we explore topics such as weight, inclusive design, branding, website development, marketing and business management, and more. So whether you’re a seasoned entrepreneur or just starting out, join us on this journey to create positive change in the world of health and wellness.

Hello, hello, friends, and welcome back to the Dietitian Turn Designer podcast. I’m your host, Courtney Vickery, and in.

Today’s episode, we’re going to be talking all about Website Design 101. From basic to beautiful, we’ll cover all Of the fundamentals of creating a website that’s not only visually appealing, but also functional and user friendly.

So before we jump in, let’s talk about why you should have a website in the first place. So this may be a little controversial, but I believe that social media is not a reliable platform for building a business. That’s because if you rely solely on social media, you really don’t have any control over your reach or the algorithm or the platform itself. But when you have your own website, it’s like you own a piece of the Internet, right? You have complete control over your online presence and you can build trust with your clients.

So when it comes to creating a website, WordPress is probably the most popular choice due to its freedom. It is a quote free software with tons of customization options, great SEO, and stability. And if you didn’t know, it’s actually owned by a nonprofit organization and not an individual. But we’re going to discuss more about all of those things on another episode, because today we’re going to talk all about the basics of web design.

First, let’s talk about white space.

You can call it white space or negative space, but essentially what it refers to is that empty space between design elements on a page. This is the most common thing I see when I’m doing website reviews, when someone has DIY their website. And I just want to let you know, don’t be afraid of white space.

It’s okay to let the page breathe, because this space is crucial in creating a clean and organized layout and improving readability.

You don’t want your readers to become overwhelmed because they’re looking at so many different things on your page. Effective use of this white space will help guide their eye and help create a more balanced design.

Think of some examples. Maybe think about Apple, Google, Dropbox, and those sites use a lot of white space to create a minimalistic and modern look in order to emphasize other more important elements of their design.

You may not want to have that minimalistic look and that much white space, but when you’re planning your website, I do want you to consider how you can use white space and be more comfortable with it in order to help make your website be more engaging and visually appealing to your users.

And in general, if you want very specific numbers, I recommend at least 50 pixels of space between rows on a website. Let it breathe. And next, just as important as white space, we want to think about and consider the size of our fonts and our contrast. I know I talked about this in the last episode, but these are just so crucial and critical to having a website design that allows it to be more accessible. So choosing the right font size and contrast levels will help improve readability and like I said, make your website more accessible to a broader audience.

When you’re selecting fonts, it’s really important to consider the type of content that you’re going to display and the audience that you’re targeting. So for example, if you are designing your website for your practice and you tend to work with an older audience, you’re going to want to choose a larger font size to make sure that it’s easily able to be read. And I know that those script fonts are so pretty, I use it sometimes, but you really need to think of them only as accent fonts.

Don’t use them as main headers because they can be so hard to read for so many people. And even if you and I think we can read that, someone else may not be able to and we don’t want someone to not be able to read our copy on our page. And again, for specifics, in general, I would recommend not making your fonts be any smaller than 16 and that really also depends on the type of font that you have because there are some fonts that are 16 size would be too small still, so you need to use your judgment. But in general, for most fonts, 16 is as small as I would recommend going.

And as we talked about before, contrast levels do play a really big role in website design because low contrast is going to make that text difficult to read. And a website can be the most beautiful website in the world. But if we can’t read the content, it’s not going to convert anyone, it’s not going to get you clients, and it can also be very visual on the other end. It could be very visually overwhelming if you have really high contrast. So there is a balance here.

There’s a website I like to use and I’ll put the link in the show notes, but basically it’s called Web Aim and it’s awesome. I use it for all my websites that I design and you just take the hex code of the color you’re using and put both colors in and it will tell you whether there’s enough contrast to meet those accessibility standards.

Also with fonts, you can use them to create hierarchy of information and hierarchy and the most important to the least important. So using different font weights, making something bold or thinner, different styles, italic knot and emphasizing important information in this way is something that makes the page easily able to be read easier. So if you’ve read any of my emails, you will know that I do this a lot. I’m a skim reader myself, so I do want my copy and material and content to be skim reader friendly. And the next one I get asked about a lot.

And since so many people will be viewing your website on a mobile device, it is so critical and that is responsive design. So like I said, with so many people accessing websites from their mobile devices and their iPads or their tablets, it is important that your website is designed to be mobile friendly. So I am not going to hate on Wix. I had my first website on Wix and I think it’s a great place to start. But this is somewhere that it kind of struggles because even if it looks okay on the screen, I just oftentimes see on the actual device it looks different and it’s not as responsive.

So that’s why I really like WordPress because you can get it to be so specific to specific screen sizes because you don’t want it to just be desktop and phone.

What about tablet, what about different phones?

You want to make sure it’s all phones and devices and you can’t just make your browser smaller and assume that means your site is going to look good on a mobile phone. So what I’m talking about is if you have your browser open on your computer and you just kind of pull the arrow over and make it smaller and you’re like, well it still looks great, that’s not really representative of what it would look like on another device. So you need to use a responsive testing application or a responsive browser. And I do recommend checking it on an actual device and having other people check it on a device before you go live. So when you’re creating a responsive website, you want to make sure you’re using layouts that are responsive, that padding the margin, the images you’re using.

So what looks great on desktop may not work on mobile, right? So we need to adjust for that and it may be a different image. So you want to have that flexibility to show different images on different devices and of course your font sizes and testing it on multiple devices to make sure it looks great and it functions properly.

So again, like I said, if you’re using a builder in WordPress, so I have used Divi, elementor, beaver Builder, Genesis, and I’m trying to think of some other spectra, several different ones, and on almost all of them, you can adjust the padding, the margin, the font size, and the images based on the screen size. So use that to your advantage. And we’re going to talk a lot about color on this podcast as we move into the next part. But when it comes to website design, I think we all know that color is so crucial because choosing the right color scheme can help establish that brand identity that you’re working on and create that cohesive design.

You don’t want to use one set of colors or shade of colors on one page and a different one on another page. You also don’t want the colors you’re using on your social media page to be different than what’s on your website, because then people get confused. And when they get confused, their trust in your brand will decrease a little.

So when you’re picking the colors, you want to make sure that you’re thinking about the psychology of color, because that is very important, because we know that different colors can impact how the audience perceives your brand. So, for example, I think we all know blue is typically associated with trust and reliability, whereas a color like red would be more associated with excitement or energy. So think about, again, going back to that brand foundation or brand strategy that you have. How do you want your people to feel when they interact with your brand and what do you represent? Because that should be reflected in the design and the colors. And moving to the next point, you’ve heard me mention accessibility a lot, and that’s another whole theme on its own that we will discuss throughout this podcast. But again, it’s so important to make sure that your website is accessible to people with disabilities, including those with visual impairments.

So I know we’ve talked about contrast, but there’s other things to do, too. So the Alt tags for your images and ensuring that your website is keyboard friendly and that you’re using clear and concise language. So for the Alt tags, you probably have heard that they are helpful for SEO purposes, but really their purpose is to explain what the image is of, because people who are visually impaired are using those descriptions or tags to help them picture it in their mind of what they’re looking at. Now, when I say keyboard friendly, I see this so much. What I mean is that you cannot just create a pretty image in Canva or whatever and put words on top of it because that’s how you want it to look and you’re not sure how to make it in your website, and then you just upload it to your website. Because now what we’ve done is we’ve created an image, and if someone is visually impaired and they’re using their keyboard to highlight the text, they can’t highlight the text so it’s not accessible to them anymore. They don’t know what it’s saying. I mean, you could put it in the alt tag, but it’s not really best practice. So I would really recommend you try to recreate that design within the website system itself.

Actually type the words so that they can be highlighted and then read by those accessibility readers. And continuing with the last part for this accessibility piece, don’t forget to add things like closed caption on your videos or audio descriptions for your images to make your content even more accessible. I mean, for myself, I’m not technically hearing impaired, I don’t think, but I absolutely need closed captioning on videos and honestly, I won’t even watch them if that’s not an option because I need to see the closed caption. And last but not least, make sure that you test and refine your website design. And remember, that is an ongoing process.

A website should not, we call them brochure websites sometimes if you’re not doing things actively on it all the time. But it shouldn’t be something that you just do and you let sit for years. It should be very organic, pun intended process that is continually improving. So even the best design website can always be improved over time. I’m constantly making updates to my own websites based on feedback I get or things that I see that I want to improve. So there’s tons of things you can do to improve your user experience and increase conversions. There are tools like Heat Maps, which are really neat because basically it records the screen as someone is on your site and you can see where they click and what they do. There’s also a B testing and if you’re not sure what a B testing is, it’s basically two different versions of, say, a headline and you see which one gets the best results based on the people that visit and what they do. And then that lets you know which one that you should choose.

Moving forward you can also get feedback from your audience through surveys, instagram, polls, and then use those information to make those decisions about your website.

So we’ve covered lots of things that you can look at on your website and improve. We’re not going to talk about platforms or plugins today. That will be for another episode. Today I really just wanted to focus on design itself, so I can’t wait to see what you come up with on your website again.

If you have any questions, you can always reach out to me. But again, thank you for listening to the Dietitian Turn designer podcast.

Are you tired of DIYing your website and brand? But maybe you’re afraid to let someone who doesn’t quite understand what you do do it for you?

Well, as someone who has experience in Both the help and design industries, I’m uniquely qualified to help weight inclusive private practices and businesses create beautiful brands and websites that showcase their talents and vision while staying true to their values.

You can reach out today to chat about my services, or you can check out my free resources on my website and you can also get the link in my show notes.

And don’t forget, you can always come hang out with me on Instagram where I share tips and tricks and of course, a few cat photos. And memes as well.

Let’s recap everything that we discussed today so that you can take this information and apply it to your website as soon as tomorrow. So we talked about white space, font size and contrast, responsive design, color choices, accessibility, and testing and refining.

What I would recommend is you pick one of these things and make it a goal to adjust that one thing on your website within the next week and then do that again the following week. Choose the next thing, don’t try to do it all at once and don’t let yourself get overwhelmed. Take your time. And again, I can’t wait to see what you do.

Thanks for tuning in to the Dietitian turn designer podcast. As your host, I’m passionate about providing valuable insights and actionable tips to help entrepreneurs, designers and help professionals build weight inclusive businesses that prioritize authenticity, compassion and inclusivity. We’ve had some amazing conversations with industry experts about topics from weight inclusive design to web development, marketing and more. And we’re not stopping there. We’ve got even more great content coming your way.

So thank you for being a part of this journey with us.

Whether you’re a seasoned entrepreneur or just starting out, we hope you’ll feel inspired to use your designs and marketing as tools for positive change in the world of health and wellness.

Leave a Reply

Your email address will not be published. Required fields are marked *

      courtney vickery dietitian website brand designer

      Hi, I'm Courtney

      I'm a Dietitian turned Designer who loves helping weight-inclusive private practices get more clients with designs that stay true to their values & mission.

      Latest Posts

      Sign up for updates

      Grab some freebies

      Follow me

      About

      Declet Designs offers website design, branding, and SEO for weight-inclusive small businesses. Located in Athens, GA, and serves small businesses and private practices nationally.

      Declet Designs is a welcoming and inclusive space for all people regardless of their race, ethnicity, age, disability, sexual orientation, gender identity or expression, neurodivergence, or national origin.

      Declet Designs is located on the lands of the Muscogee and Tsalaguwetiyi people and wishes to acknowledge them as the Traditional Custodians of this land. We also pay our respects to their Elders, past, present & emerging.

      COPYRIGHT 2023 DECLET DESIGNS LLC