Principles of Beautiful Web Designs

Hello, everyone. Welcome to this episode of Ecoffee with Experts. I am your host, Matt Fraser. I have on the show today with me, Isaac Moan. Isaac is a Web Developer in Charlotte, North Carolina, and a small business owner with over 20 years of experience designing, coding, and developing website projects. He has successfully launched over 250 websites ranging from personal blogs to medicinal and business-oriented websites to large e-commerce websites. In addition, Isaac studied at the University of North Carolina at Chapel Hill, where he custom tailored his major in Web Development Network Administration. He likes to live a healthy vegetarian lifestyle, play disc, golf racquetball, and he’s been a computer geek since he was young. Isaac, thank you. Welcome to the show.

Thanks for having me.

Yeah, it’s awesome to have you here. So we were talking off camera about your experiences, and you’ve developed quite a few websites. So it’s good to just talk to you and explore the idea of the principles of beautiful web design. How did you get started in designing websites? And what are your thoughts on the web?

Well, I started web design because I was a yearbook nerd in high school and started learning to lay out the yearbook spreads using PageMaker and Adobe PageMaker. And that got me interested in the Adobe Suite. I started to learn illustrator as well. I still have two yearbooks I laid out so long ago. And so that got me in Photoshop Illustrator and PageMaker. And having that knowledge and went to college and eventually found my way into journalism school. I used that as an excuse to take the Web Design and Web Development courses offered through the journalism school at the time because they didn’t have a specific track at Chapel Hill for what I wanted to do. So we started learning Adobe Flash, and I started learning action scripting and coding and making projects but also the design elements of it and then Dreamweaver. So do a little cold fusion. A lot of the Macromedia OC was called back then one of the Macromedia programs. And, of course, Adobe bought Macromedia. So from college, I started and picked up a few little websites on the side. So I did a restaurant, a Greek restaurant there in Chapel Hill using Dreamweaver and doing generalized HTML and CSS. From there, I started getting more clients. So I moved to Charlotte and started Web Symphonies, my business. And from there, I picked up more and more clients. So web design has always been an interesting thing to me. It’s a passion of mine.

I remember what you’re talking about because I think I got my diploma in Web Design in 2009. And I learned Dreamweaver and flash. And then next thing you know, boom, WordPress, like an evolution of the web. So it’s amazing how much it’s changed, even WordPress now how much it’s still changing with headless WordPress. I don’t want to go down that rabbit hole. But it’s pretty amazing what’s happened. But how do you approach web design when making client sites? Like, what’s your process for going through that?

Well, it’s interesting how web design has changed over time. In some ways, it’s dynamic and rapidly evolving. But the core principles of good design and usability remain the same. It was interesting to see the very beginning of the internet. I was there to watch these websites get created and their design. I made a website for a friend of mine for his wedding, and he wanted me to make it look like 1999 animated GIFs. Like it was super. It’s a retro-looking site, it was almost hard to do. To make it a bad, bad use of the website for this wedding website for him. Because back to some of these crazy principles, bad layouts, buttons, anatomy, and everything like that. But, I would say that trends change, yet some of those core principles remain the same. But for me, there’s always a delicate balance of design versus functionality. You know Google has said page Speed loading, We have to do mobile first. Now, it’s got to load quickly, you must consider SEO. So all those things come into play when you’re designing, but you also want to have a functional website and be pretty. And in some ways, the more pretty you make it, the slower it gets. That’s not always the case. But that’s something to consider. There’s a need to balance the trends of familiarity of what a user experiences versus adding something that’s cutting edge, it also depends on your brand. So, isn’t it? So, for a client, when I’m approaching web design, I try to take those core principles of speed, aesthetics, usability, and purpose and harmonize them as much as possible. And so, it is nice that as the web has evolved, the audience has learned how to use it more. So for example, navigation and hamburger menus, when they first came out, many people didn’t know what they were. But now, you can sprinkle in these design elements more and expect your users to be familiar with them when using your website.

Do you have a different process for new clients, and brand new businesses, as opposed to established businesses who want to redesign?

Yeah, so many of my projects are, maybe, someone like a massage therapist who comes and starts the business from scratch. They give me a logo and say, Okay, here’s my logo, here’s what I want to do. And so, I would say the logo, you can start from there, and you can look at what fonts the graphic designer chose for that logo, colors, and the tone of the logo itself. And that can set the sight of the entire website. And I would say your website’s tone conveys your company’s personality in your language, photos, and design. For example, you can have an edgy design, and you might be a tattoo artist or photographer, where it’s maybe more dark mode. You’ve got some edgier elements on the websites, backgrounds are a little more contrasting, and things are a little edgier in your face, or maybe pushing the limits of what design is. You can even have some cool, advanced elements like CSS animations or things like that. But then, for massage therapists, as I mentioned earlier, you might want softer colors, a cleaner design, and more whitespace with soft edges in ways to soften the whole design to set this tone of relaxation and luxury. So, setting the tone at the beginning of a project is very important and can often be the difference maker when you’re making a website for a client, especially from scratch.

I have tried to design websites for people, and without a logo it’s impossible, in my opinion. If they don’t have a logo, unlike we need a logo, you can’t design a website without a logo, it just doesn’t make sense. I’ve even gone so far as to get premade logos from ThemeForest for people on a graphic river or whatever. So you’re saying it portrays the brand and is important in laying the foundation for the site, even down to the color theory of what you will do with the colors.

I would be remiss if I didn’t mention imagery because I always tell clients that good pictures can make or break the website. You can have a nice design, you can have a great color scheme, you can have good fonts chosen, and you can have everything laid out nicely. But if you don’t have good imagery, either stock photos that make sense or that are not stock photos. But often, the best photos will be you and your business, shaking hands with your customers, performing the task you’re offering, or shots of your business around your office. Often, suppose they’re going to get a professional photographer. In that case, I’ll take a picture of the brick wall with the sign in the office or have a nice clean shot against it to give me some small accent images to add to the website. That will set the tone for- Hey, this is our office. These are our photos, and if they’re taken by a professional photographer, with good lighting, the proper focus, depth yield, and everything. It makes such a difference on a website.

It makes it night and day. Many clients, especially small business owners, are price sensitive regarding websites. I don’t understand. I wouldn’t miss the mark if I said that people think it’s easier, doesn’t cost a lot, or whatever the case may be. Yet the fact is that the web is complex, and there’s no such thing as a simple website. So how do you overcome that with clients? For instance, I had a hair salon that asked me to design a website, but didn’t want to provide me with any creativity whatsoever, no content, no pictures, no logo, no words. And this was the beginning days of when I was doing this. I eventually gave them their money back. So, there’s no way I can do anything for you. You don’t have the time to talk to me, you don’t have the time to give me these things. What strategies for working with clients suggest that an investment in a photographer is the right decision to make and communicate that to them?

Yeah, that’s a tough one. Because, often, it depends on the client. And so I can make a strong suggestion you should get a photographer, but unless they have it in their mind already, they’re often coming to the table as they are, and it’s hard to change their mind. Especially if they’re a client who does not appreciate what I do, what I bring to the table, or how hard a website can be to build, make and design. Now, with the advent of Squarespace and Wix and these do-it-yourself builders. At first, I felt threatened when they started coming out, but I enjoy that they’re now because often, I will have people like, I tried to do this myself, and it looks okay, but now I need you. I will say that when I first started, I would work for pretty much whatever someone could pay me. You can pay me 300 buck, I’ll do what you need me to because I’m desperate for work. It’s when I was starting up. And even with that mentality at the very beginning, I wish I would have said no. I’m worth something, and I need to be paid at least x amount to do this work, it’s worth it. But as a student right out of school, I was still proving myself, still developing. So I was willing to take on bad clients who didn’t respect what I did and wasn’t willing to pay for it. Luckily, I’m in a position where I can say I have a higher price, and they are listed on the website. And that was a decision to say, I do custom website design, which is high prices. But if you value what I do and you’re willing to pay this, that shows me that you want a solid custom product, and you will take my advice and appreciate what I do. Because I have had those instances of bad clients where it’s like, once you start them off at a low price for something, then everything you do, they’re expecting it to be for this budget price. So when you start working, you’re like, I should charge other clients more for this. I’ve worked with this client long, and now they’ve been underpaying and what they’re expecting, and that’s where it’s built well to let go of those contracts where they didn’t value me and keep the ones that do.

That’s smart business and refers to those people who can’t afford to pay well you know why? Sounds like custom web design isn’t for you. I’ve checked out Squarespace and Wix. That sounds more like what you’re looking for.

So someone trying to do it themselves, I do not believe you can on Squarespace. You need to put in at least 10 hours to have the bare minimum of a website on Squarespace if you’re trying to do it yourself. And if you don’t know what you’re doing, it will take 30 hours to get the images formatted and cropped correctly and get your content together. And so when you start doing all that, and you’re 30 hours into it, you’re going to say, You know what, I should have just paid someone else to do this. And I use this old analogy I’m sure people have used before. I know how to change the wheel on my car, my dad showed me how to change my oil in high school. But do I do it? No, I take my car to the mechanic because he’s got all the equipment ready, laid out, and ready to do it. They can change that oil and get it done. So that’s how I look at it. I’ve got the tools and the knowledge, and they’re always little complicated things that you don’t realize when you’re trying to make a website that you’re like, Oh, that’s a slap some content on a page, and there’s my website. It is way more to it than that.

There is way more to it than that. I had a question in my head, but it jumped out. Oh, the value of time. People value your time because we’re the experts who know how to do it. And the loss of time of you spending those 30 hours could be worth more money than you are paying. Because I think the average small business owner, I don’t think to realize this, their time is worth $250 an hour, based on some studies I’ve read. So, for example, suppose you can outsource something for less than $250 an hour, no matter what, even if it’s grocery shopping. I certainly don’t charge $250 an hour for web design. Let’s say this, do you tie the design’s return on investment to the project? For instance, if it’s a plumber, we will design your website with SEO in mind and best marketing practices. And it’s going to generate business, and it’s going to convert. So first, you need to get traffic to convert, but you need the right design to convert. Do you have a process, or do you use that in your communication strategies with clients?

You know, that’s interesting. So, in terms of providing absolute ROI numbers to the client, I don’t use that in my sales techniques. I stress the importance of pages that convert well, have prominent calls to action, and can be invaluable. Because if you can bring traffic to your site and have a nice converting page, that needs to happen to get those leads. How I convey to them is my ultimate job is to get you business. My ultimate job is to make a website for you. But beyond that, it’s to get people filling out a form or clicking on the Buy Now button to contact you or whatever needs to happen to get your product so that you have a chance to sell your product to them. And so I can be hard across different industries. And I do some general principles of a good converting page for a local business might be 10 to 15% conversions, but for E-commerce, one to 2% conversions, it’s going to be pretty good. Because you’re generally scraping a lot more, and you’re getting people, they’re going to have a lot of traffic or really good product before people can convert. But anyway, so I don’t necessarily.

You may not tie to ROI, but you’re still trying that? Because this is a site that’s going to make your money.

It will get you to try to sell your product anyway.

In a professional way.

I’m a small business owner, too. I own the business, so I can come at it from the angle of saying, Look, I’ve worked with many small businesses. I am a small business owner. I know how to help you hear my suggestions. And another thing I’ll tell clients they may not think of is to use the Google business suite instead of the GoDaddy hosting email account. I’ll recommend- hey, I like using DreamHost as my hosting provider, but I wouldn’t say I like GoDaddy. Some people love it. I upgraded GoDaddy servers, and it’s gotten much better and faster. But in terms of the UI and the advent management, I’m not sure.

They have a bad reputation amongst web designers and developers in the industry, and they’re trying to clean up their act.

But we bring those things to the table. And anyway, I touch on the principles essential for beautiful web design with my clients. I try to convey these to them, so they understand what I will build for them.

What do you communicate about those things?

Well, number one, to me, is clarity of content. Okay, sometimes I’ll be like. Alright, I need some copy or need to write copy, and I can provide this as a service. But if you want to provide and write up some copy for me, they will, but often, it’s wordy and not trending to the point. And so clarity of content, your imagery and your minds, and your call to action are important to me. So great photography is another essential principle, well shot, well lit, real pictures. Graphics can go a long way if used in the right way. So we’re talking about backgrounds of rows or dividers, accents, and little accents that might make a picture fade into white in the next section. Another one would be choosing appropriate fonts and conveying more of that.

For instance, in the beginning days you and I talked about, there weren’t many fonts to choose from there were browser-based ones. And it’s amazing how, with Google coming along, you and I were talking off camera about Beaver Builder and whichever theme you choose. But you can choose so many fonts, whether it’s Google web fonts or I don’t even if they call it Typekit anymore, but Adobe fonts. Are there any strategies you use for selecting fonts? Do you use a logo as a base?

You hit the nail on the head. So I only use the logo as a base if they’ve chosen it. So there are Serif and Sans Serif fonts. Essentially, saris have the little extra curves and little feet and things like that. And Sans Serif is more what we’re used to now. I prefer a Sans Serif font for paragraphs of websites. It’s generally more readable unless you’re trying to look newsy. But that said, even within Sans Serif fonts for paragraph text, there’s still a wide array of fat and skinny and long and bold and Napolitan. When looking on Google, I use Google Fonts most of the time. It’s the easiest to embed, although I think it adds a little more bulk to loading websites versus having the only Font you’re using versus having Google. Sometimes if you have themes loaded in font libraries, it’ll load extra ones you’re not using. But anyway, that said, you want to make sure that when you pick a font on Google Fonts, it includes the bold and semi-bold, maybe or anything, like different font weights are important, but it adds to your general question. So I’ll start by looking at the logo. And I’ll say, Okay, if they’re using a Serif font in the logo, maybe I’ll choose Serif fonts for the headlines of the website and then choose Sans Serif for the paragraph. However, if they’re using Sans Serif in the logo, and they’re going to want a cleaner Sans Serif across the website, I might still pick two different Sans Serif fonts that complement each other. You’re not using the same headlines. So the headlines stand out they complement but don’t necessarily have the same fonts. If you spice up the headlines to make them a little different, it can add to the subtleness of the design. To say, okay, it sounds a little more refined when you have two different ones that match. I’m not necessary, but those are the little things you can do to convey a tone of what you’re going for. And sometimes, paragraph fonts don’t look great when blown up to 46 or 50 pixels. They don’t look as good as they do in a paragraph font. So, for example, I might use Montserrat as the headline, but then I would use Roboto for the text of the paragraph. So that can be apparent, and I’ll do it sometimes. But there are many choices, so that it can be overwhelming. I try not to spend too much time because you can get lost.

What tools do you use to find fonts? For instance, the client has a logo that’s a sans serif logo. So let’s say it’s Ubuntu. Ubuntu is, is Ubuntu veil? I can’t remember. I think it is. I can’t remember either. Ubuntu is available on Google Fonts. But the point I’m trying to make is, are there any tools you use to find fonts to pair together, any website tools?

I know we’ve had to use the Font before because I’ve had to be like, what fruit is this? And then I had to try to match up the closest thing and figure out what this is from a graphic. Because often the graphic designer will give you the logo, or maybe they don’t know where they got them. Or it’s been a while since they designed it, or you’re unsure and can’t always find the fonts that graphic designers use. I often go to Google fonts and realize what thickness I want and what kind of Slant I want. I’ll use these filters there. And then sometimes I’ll use sky fonts on my local machine to import the fonts so that when I’m using something like Illustrator or Photoshop, I can see what the Font looks like on my local machine as well while I’m designing it. But otherwise, I’ve enjoyed how web fonts have become more integrated. For example, with Beaver Builder and WordPress, you can get out of the box, it’s got all Google’s fonts. So if you find something that you like in Google Fonts, it’s going to be there, and when I’m designing Beaver Builder, that makes it pretty easy to search through, and you start to get your favorites too. I generally have a few favorites I like to use for most things, and then I’ll vary occasionally. Sometimes I will buy a custom font somewhere where I’m like You know what, I can’t find what I’m looking for on Google Fonts. It doesn’t quite match what I’m looking for in the logo. So I’ll buy a custom one, embed it into the website, and import these tiny font files.

Depending on what they need.

What about you?

Yeah, sometimes I’ll find font Peri.CO, then there’s Font Joy. And those sites with Typ.io will sometimes help you find. Or you’d mentioned the Font. So I’ll take their Font and logo, and if what the fonts build spits out something similar, I’ll use that for the headlines to have continuity amongst the feel of the site. And then I’ll go font pairings with, let’s say, Bunto and find out what the web says or what other people say for font pairing. Sometimes they’ll say politely left title. I can’t remember the name of it off the top of my head, or maybe it’s Open Sans, which is a common Font or Playdough or something like that. Or Roboto, or remoto, whatever it is. However, people say it. And you’re right, there are lots of fonts that people recommend. And I think it’s a standardized web. Steve Krug wrote the book, Don’t Make Me Think. If we started using fonts that people aren’t familiar with, it would make them think. And that’s a sure, what the heck is this? Like, if you say Sans, which hopefully God nobody ever uses. So the person who even made it regrets making it.

I used it on that wedding website from 1999.

So, those are some good ways. And typography makes such a difference.

Yeah, I was going to say along those lines. I think it’s very important to consider line height, it’s so overlooked, and people don’t realize it. But the space between lines can make something readable or unreadable very easily, and space between headings and your body text. Sometimes that can be too much. But I like to make sure I have equidistant vertical spacing between headlines, sub-headlines, and paragraph text. Maybe you have a headline and sub-headline in one, and they’re close together. And then you’ve got equal spacing between the paragraph and the next paragraph below it or maintaining that vertical space. And you can also see the space between the edge of the section and the top of the headline. And maintain that space below the headline, so it’s all central. As we’re moving down the page, things like that make a small difference, but it can help the clarity of the typography and everything. So line height is your friend. Sometimes, line height out of the box in WordPress can be a little too big. Other times it depends on the Font, and other times it’s not big enough.

And especially with web accessibility becoming increasingly necessary. In that regard, having the proper fonts and even the font contrast is becoming increasingly important. What about font management? Do you have any tools that you use for managing fonts?

So I have Sky fonts. That’s a little applet you can put on your Windows program computer, install the Font on your local machine, and manage them there. So you can make sure you’ve got some congruence. The only thing and be careful about this, I have seen some bugginess where your local chrome, your browser if you have it installed on your local machine, will try to use your local version of it. And I’ve seen some times I’ve had inconsistencies where people who don’t have installed their local machine, and they’re doing the web version, your website’s loading, it can look a little different than it did in Photoshop for you things like that. But for the most part, Skyfox is one of those tools I use.

I think I have. It doesn’t sound crazy. I probably have 1000 fonts installed on my computer, and over the years, I’ve just collected fonts and bought some premium fonts. And I found it very hard. So I’d have to open the Font in Photoshop to see what it looked like, to remember what it looked like. I had to create some documents, and it was a pain in the butt. So I found a cool tool called font base. It’s not free. It costs money. But to me, it’s worth every penny, especially once you get into the weeds of getting that many fonts. All you do is type in a sentence that will display the Font, and you can activate and deactivate fonts so that they’re not all there. So it’s cool software.

That is cool. I’m looking at it now. Over the years, I had many fonts, but a couple here. I’ve got some new computers over time. And then I didn’t always import the old fonts. I felt some of these were from, like, 2002. And I was like, I don’t know if I even want this Font on my computer. So yeah, I have them in a folder ready to install if needed. So with Google Fonts, for the most part, that covers most of my bases, and there are the paid fonts. And then moving on from fonts, I would say the color scheme we mentioned, we’re still focused on the logo and the website’s tone. But the color scheme is more tools that help with that. But finding the right color scheme to match the logo. I’ll take someone’s logo sample. I’ll use the dropper tool to sample in Photoshop what colors they’re using. If their design is nice, they’ll give you this whole sheet where it’s got the whole style guide. That doesn’t always happen, though. Sometimes you can use some detective work. But once I get those colors, I’ll go to something like peloton.com. And so peloton will let me do the complimentary or the triadic, or you can figure out the complementary colors and get color schemes there. And then you can cycle through and figure out what you want. And so there’s also a website called coolers.co, where you can just like, hit your spacebar, generate color schemes, and lock in colors, so all those things help. And so, before you start designing, ensure you’ve got fonts picked out, and your color scheme is ready. Those color schemes can be important in picking, for example, the color of the URL, the links on the website, and maybe the colors of headlines. Maybe it’s a subtle change. It’s constantly complimenting the logo because sometimes, for example, I had a very light purple logo with a light purple that didn’t really work. It’s like its own headline or even links. However, I used a darker purple to complement that and still have the same purplish feeling. Still, I did not necessarily use exactly the color from the logo to provide a cohesive design.

Do you mention to them the colors you want to choose?

I only choose a primary color, an accent color, and maybe one or two more, but I don’t often have too many colors. However, this is a good time to discuss, Call-To-Actions. The one exception is maybe I might have a color scheme everywhere, but the call to action button, you want it to contrast fully. So, say green is your primary color on the website, and you want that red or orange button to say, okay, it’s the complete opposite. A total contrast, book now, click now, call now, schedule now. A call that moves you to action. And you do so by using these colors that are very different from the main colors. So if you have a green logo, a green headline, and a green button, it all blends in. And if that button is green, the users may not be as compelled to click on it. And so, in wrapping up the essentials to a beautiful web design, a few more principles would be, as I mentioned before, letting elements breathe. So having that equal spacing between elements, paragraphs, and headlines. You can use horizontal padding so that everything is nicely spaced and centered on the logo. And then defined sections of content. You might notice a trend now is to have rows of content. I would sometimes say that if you use long pages and there are no defined rows, I’ll do like a white row, a gray background row, or a color background row. And so it defines sections of content. If you don’t have those, it can be confusing or start scrolling, or people get lost on a page. So that’s a good principle to me. Then finally, you have to design it all with the user and audience in mind. So you must ensure you know who is coming to your website. At least get a sense of who this client’s audience will be and what they are selling, and you want to design the website to ensure you have them in mind because it depends on the population. But you want to ensure that you are calling attention to them, making it easy for them to sign up, and not putting too many things in the way, like annoying popup, and I know popup is standard now. But with the cookie affecting the popup. I know it used to drive me crazy. So you want to be very judgemental and selective, and some of the elements you might be tempted to use.

What’s one big takeaway you want listeners to get from this episode?

One big takeaway? Designing websites convey your brand. It speaks to what your company is about. People can sense that your website can set the tone for what services you sell, and it can be that first impression. It may make you think, hey, there is a lot more soul and elements coming together to make this product sell your product.

How can our listeners connect with you online?

They can go to my website, websymphonies.com, where they can reach out and connect with me. Or they can shoot me an email at creations@websymphonies.com.

Are you on LinkedIn?

I am on LinkedIn, Twitter, and Facebook.

All those spots and search for you. I’ll make sure to put those links in the show notes. Hey Isaac, I want to thank you for being on the show. Its been a pleasure having you here.

Thank you, Matt, and I also appreciate it and thank you for having me.

You have a great day.