Subscribe
Share
Share
Embed
Welcome to Episode 2 of the Dietitian Turned Designer podcast. Today we're discussing Website Design 101, covering the basics of why having a website is important, the benefits of using WordPress, and the core elements of website design, including white space, font size and contrast, responsive design, and color theory. We'll also touch on the importance of accessibility and testing your website for optimal user experience. Tune in for tips and examples on how to create a beautiful and functional website for your business.
WEBAIM CONTRAST CHECKER: https://webaim.org/resources/contrastchecker/
DIVI WEBSITE THEME + BUILDER: https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=70692 *affiliate
WORK WITH COURTNEY https://decletdesigns.com/
FREE RESOURCES https://decletdesigns.com/free-website-and-branding-resources-for-private-practice/
TOP 20 SOFTWARE FOR PRIVATE PRACTICE https://decletdesigns.com/top-10-software-tools-for-private-practice/
JOIN ME ON INSTAGRAM https://Instagram.com/Decletdesigns/
Websites, local SEO, and marketing strategy for dietitians in private practice. Hosted by Courtney Vickery, web designer and dietitian, helping you build a site and online presence that actually gets you clients.
In each episode, we'll tackle the practical side of private practice: websites that actually convert, tech tools that don't give you headaches, and strategies to streamline your workflow. Whether you're drowning in admin tasks or just starting your practice, we're here to help you spend less time managing your business and more time doing what you love - helping your clients.
Join us as we chat with successful dietitians and practice management experts who've figured out how to make technology work for them, not against them. We'll share real solutions for real practices, focusing on what actually works in the world of weight-inclusive care.
From fixing your scheduling nightmares to making your website work harder for you, Tech Savvy Dietitian: Websites, Local SEO & Marketing for Dietitians in Private Practice brings you practical strategies you can implement right away. Because your time is better spent helping clients, not fighting with tech.
Welcome to the Dietitian Turn Designer podcast, where we strive to empower health and Wilms professionals with the knowledge and skills they need to create inclusive and impactful online businesses. I'm your host Courtney Vicary, 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 Vicary, and in today's episode we're gonna be talking all about website design 1 0 1 from basic to beautiful. We'll cover all the fundamentals of creating a website that's not only visually appealing, but also functional and user friendly.
Before we jump in, let's talk about why you should have a website in the first place. 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. 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 s e o, and stability.
And if you didn't know, it's actually owned by a nonprofit organization and not an individual. But we're gonna discuss more about all of those things on another episode, because today we're gonna 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 wanna let you know. Don't be afraid of white space. It's okay to let the page breathe. Um, 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. You know, maybe think about Apple, Google, Dropbox, and you know, those sites use a lot of white space to create a minimalistic and modern look and 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 webs, 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, um, 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 wanna 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, um, crucial and critical to having a website design that allows it to be more accessible.
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 gonna display and the audience that you're targeting.
For example, if you are designing your website for your practice and you tend to work with an older audience, you're gonna wanna choose a larger font size to make sure that it's easily. I'm 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, you know, 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 they're, you know, 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 gonna get you clients. And it can also be very visual on the other end. It could be very visually overwhelming if you have. Really, really high contrast. 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 com, 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, you know, hierarchy and the most important to the least important.
So using different font weights, making something bold or thinner. Um, different styles, you know, metallic not, and emphasizing important information in this way is, you know, something that makes the page easily. Um, 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. I. And the next one I get asked about a lot, and since so many people will be viewing your website on a MO mobile device, it is so critical and that is responsive design. 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 gonna 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. 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 wanna make sure it's all phones and devices and you can't just make your browser smaller and assume that means your site's gonna look good on a mobile phone. That 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. 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 wanna make sure you're using layouts that are responsive, that padding the margin, um, the images you're using.
What looks great on desktop may not work on mobile, right? We need to adjust for that, and it may be a different image. 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.
Again, like I said, if you're using a builder in WordPress, so I have used Divvy, Elementor, beaver Builder, Genesis, and I'm trying to think of some other Spectra, you know, 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.
Use that to your advantage. And we're gonna 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, you know, 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, the trust in your brand. We'll decrease a little.
When you're picking the colors, you wanna make sure that you're thinking about the psychology of color, cuz that is very important because we know that different colors can impact how the audience perceives your brand. 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.
Think about. Again, going back to that brand, um, 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'll 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. I know we've talked about contrast, but there's other things to do too. So, The alt tags for your images, um, and ensuring that your website is keyboard friendly and that you're using clear and concise language.
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.
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 clothes captioning on videos.
And honestly, I won't even watch them if that's not an option, because I need to see the clothes 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, you know what 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. 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. 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 AB testing and if you're not sure where AB 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, um, 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 gonna talk about, um, 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 health 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. 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.