If you’d rather read the info in the audiobook, it’s right here:
This is ‘Web Design Options: How to make the right choices for, and get the most out of your website.’
Hi, this is Tim Brown, a web designer and web presence marketer out of Minneapolis, Minnesota. I spend 50+ hours a week learning about and implementing the principles and techniques I will share with you in this book.
In part One, I will share some big trends in web design, and where it is headed.
In part Two, I will talk about your options for creating a website yourself, and give you some practical tips on the best ways and how to do it.
In part three, I will go over principles to remember for creating a website for your business, or organization. Visual, and design best practices, and ways to get people to your site, and getting them to do what you want them to on your site.
Finally, in part four, I will talk about your options if you decide to invest money in the process.
A little background, I started making websites at 12-years-old at my bus stop, the local library, in the growing suburb of Plymouth, Minnesota. Once I had exhausted all the Archie Comic Books they had in stock, I sauntered over to the computers, got an e-mail address and tried to figure out how I could be part of the growing mass of people sharing their ideas and interests with the world through a website.
At the time I was limited by the technology and my lack of knowledge. Now 15 years later, I create websites that are dynamic, and that I can hand off to other people, who have no knowledge of code so they can update the website quickly themselves. I am not the foremost expert in web design, but I have learned some incredibly useful things about starting a website, so I’ve compiled the most helpful stuff I know about creating excellent websites, that I’ll share with you in this short one-hour audiobook.
Part 1: Some big trends in web design, and where it is headed
Mobile websites are huge right now. According to the mobile leader, Mobify; “58% of all US consumers already own a smartphone.” “Global mobile traffic now accounts for 15% of all Internet traffic.”
But I’m sure you’re not surprised by this. Chances are likely you may be listening to this audiobook on your iPhone or Android. If you’re not a big smartphone user, you more than likely see people using these simultaneously pesky and useful devices more and more. How does this affect the pursuit and implementation of web design? Luke Wroblewski in his book “Mobile First” states why this is an opportunity;
“Screens are small, networks are unreliable, and people can find themselves in all kinds of situations when they pull out their mobile devices. But these constraints are not only good for business; they’re good for design as well. This is especially true if you subscribe to the adage that design is the process of gradually applying constraints until the elegant solution remains. ”
In that book, he talks about how on the mobile version of a website it’s really important to get down to the most important stuff on the website. If done well, the process reveals to us what needs to be present and prominent on the desktop version of a website as well.
Besides mobile, another massive movement in the web community is an emphasis on UX Design and testing. UX stands for User experiences and is closely related to UI or User Interface design. I once heard it explained that “UI is the design of the button, and UX is how the user feels when they press the button.” UX testing seeks to test people that may be using your website, asking specific questions about how easy it is to navigate around the website, and if everything is clear and easy to use.
Web Design Audiobook
Overall web and graphic design is essentially a function of marketing.
Good design should always be taking into consideration the goal they would have the user/customer ultimately accomplish. If you’re creating a website it’s important to have strong ‘calls to action.’ This can be a big, in your face button for to get the use to take the action you want. It can be really obvious on the front page, or after a content post, or wherever it’s most appropriate.
Some common goals for actions you want the user to take might be contacting you for a consultation, purchasing a product from your store, or reading another article after they’ve read one, or sharing your content with their friends via social networking. Twitter links, Facebook links, the established ones are perhaps the most important. If another one is relevant to your website a great place to give them an easy link to share is after an article the visitor reads.
These strong calls to action should not be an after thought for the design of a website, only considered once you have the nuts and bolts in place. These calls to action are intrinsic to every piece of design that will go into your site.
Part 2: There are some interesting options these days for creating a website yourself.
You can get very cheap websites from HostGator, GoDaddy, Wix, Weebly, and Webs.
HostGator and GoDaddy are web hosting companies that allow you to create a website cheaply, and perhaps poorly. Wix, Weebly, and Webs do this as well, and their templates may be a little better, but your options are somewhat limited. The two premiere options, in my opinion, are Squarespace, and WordPress. I’ll give you the pros and cons of these two services, the types of people that should look into each of them, and some helpful hints for getting going with them.
- Squarespace is pretty easy to use. Their most popular option is 16 dollars a month, and the website templates that they give you are really nice. I generally suggest Squarespace for people if they are looking to build the website themselves, and don’t mind spending a little bit of money. The backend is pretty slick and intuitive. One major con is scalability. To have someone edit the website any deeper than visually, they would have to train in Squarespace’s somewhat proprietary backend coding system, which is different than the standard.
Many websites use PHP and SQL databases for permanent storage, and to load the websites dynamically.
Which brings me to WordPress…
I’ll be quite honest; I’m partial to WordPress because I primarily make websites in WordPress. Websites that use WordPress make up approximately 20% of the internet right now, so it’s quite clear that a lot of people have had good experiences and continue making websites in WordPress.
I suggest using GoDaddy’s and any other hosting companies one click install of WordPress on your domain, or uploading an instance of WordPress from WordPress.org to your hosting. If you make a website on WordPress.com, you have a limited capacity to edit that website, and you can’t use ‘plugins,’ which I’ll talk more about, which can easily and efficiently expand the functionality of your website.
Now if you’re trying to make a website yourself on WordPress, you can get into it pretty quickly with a bit of Google searching on the basics of making a WordPress website with the help of what is called a “Theme.”
Once you have WordPress installed on your website you can go to ‘appearances’ and click to find or upload a theme. There are tons of themes on themeforest.com. Many of the well-built ones are around 40-50 dollars, a one-time fee. If you are going to use a theme, it is good to find one that has ‘sample content’ so you can upload the sample content to the site, so it shows how it’s supposed to look.
Unless you have a good chunk of time on your hands, people find the limitations to what they can accomplish with a WordPress.com site on their own. If you want to go this route, it is good to be able to know SOME HTML and CSS, so that you can adjust things a bit visually. If you are willing to learn this, it makes both Squarespace and WordPress much more viable options.
Some plugins can improve the functionality of your WordPress site right off the bat. I usually install and connect “Jetpack” which will give you a quick way to edit your CSS code in the appearances option on the sidebar, and give you an easy way to include a contact form. One of my absolute favorites is called Yoast SEO, that’s Y-O-A-S-T, and SEO as in search engine optimization. This plugin helps reinforce some things I will talk about later in this audiobook. You set your ‘keywords’ for a particular post or page, and it helps remind you to use those ‘keywords’ in that post or page. Keywords being the words you target or guess people are typing into their search engine to find a certain topic. For instance, if I have some homemade pickled radishes that I am trying to sell, I’d create a web page that has “homemade pickled radishes for sale,” in the page URL, in the page title, in the subheads, and mixed into the content. That way Google or Bing (just kidding no one uses Bing,) has as many clues as possible what the web page is about and can serve it up to people looking for pickled radishes. Yoast helps remind you of all the places you should be including the key phrase. Other honorable mentions include Google Analytics, Google Analytics Dashboard, Akismet, which helps minimize spam comments on your site. Facebook comments, which replaces the WordPress Comments with ones where the site user can sign in and act as their Facebook profile, Simple Responsive images, and WP Google Fonts, which gives you easy access to using Google’s nice reservoir of fonts in an easy code-free way.
Thank you for checking out this web design audiobook!
Part 3: Principles to remember for creating a website for your organization or business:
Whenever I’m making a website for an organization or business, I think long and hard about what makes it unique and different from competing businesses or organizations. A lot of people don’t really know what makes them different from the competition. To be honest, that’s why they need someone to come in and clarify that and share it with their audience. This is the big clincher; this is what needs to be front and center on the front of the website. The main message of the site should speak directly to the customer or user of the site. Our modern brains are seriously so oversaturated with information and marketing messages; we just tune it out, unless it’s speaking to me, Capital M-E, The customer. Unless you’re talking to me and directly about how your product or service can benefit me, I’m scanning and moving on.
Use a photo or illustration directly upfront that someone who couldn’t read should be able to understand what your product and service are about. The point being if someone is just scanning your website, it should be clear without any shadow of a doubt what they are looking at.
Tell a story. Marketing experts continually advise telling the story of the brand, or of how someone interacts with the brand. Tell a story that connects to people that would truly benefit from your product or service. Tell the story of the brand if it’s compelling. Think Trojan horse. Wrap your product or service in a compelling story, and it’s more likely to have traits that are along the lines of a VIRAL IDEA. Jonah Berger in his book Contagious said, “People don’t just share information, they tell stories. But just like the epic tale of the Trojan Horse, stories are vessels that carry things such as morals and lessons. Information travels under the guise of what seems like idle chatter. So we need to build our own Trojan horses, embedding our products and ideas in stories that people want to tell. But we need to do more than just tell a great story. We need to make virality valuable. We need to make our message so integral to the narrative that people can’t tell the story without it.”
That’s the marketing side. If your website tells a story, the story of your brand, the story of your employees, of your customer, it’s going to speak to people. If you can tell it in a way that emotionally engages them, then you’ll truly connect with the right people, the people that will truly benefit from your product or service. And that’s worth working towards.
I have a favorite book about the new direction of the internet, and how to make websites, so they are going to be as effective as possible. It’s called ‘Convert! Designing Web Sites to Increase Traffic and Conversion”
It suggests creating a website on a ‘Content Management System” (such as Squarespace or WordPress) if possible so that you can continue to update it on a regular basis. Updating often makes your site seem more relevant to search engines such as Google. Updating often creates fresh content that is related to the product or service you offer. Updating often creates more opportunities for people to find your site, by making more pages you can optimize for Search Engine visibility.
Some quick tips for making sure your website is as visible as possible on search engines.
You can look on Google’s AdWords platform for search terms that people related to your business that people frequently use, but for phrases that not as many websites are using. For instance, you may have a hair loss product, but instead of creating a page around the search term “hair loss product” where you’re competing against 100,000 other websites, you could choose “My hairs falling out, natural fix.” The latter has less competition, but a significant amount of people searching for it.
Make a page or a post on your website that is all about that phrase. Sprinkle your keywords, and synonyms of them, into the pages paragraph text. Bold your phrase at least once per page and always use it in the first and last paragraph. When it comes to photos, name the photo with dashes between the words and use keywords related to the page because Google can read those in that format as well.
Please share this web design audiobook!
I call this section ‘UI, UX, and WTF’ to do about it.
*Sigh.. Well.. in UI or User Interaction Design the basic concept is that things should be easy to navigate, buttons should look clickable or tappable, and things should be designed so they give good responses to the website user. There are reasons why bigger firms can charge a significant amount of money and big brands don’t bat an eye, and are thankful. Good User Interaction design is why Apple’s Iphone has a cultural cult of followers that scoff at an Android phone. Whatever your own emotional response is to this, the designers of iphones laid things out clearly, generally they require no explanation on how to use the basic functions of the phone, and that is good interaction design.
- UX or User Experience Design – This is really the practical application of the User Interface design, testing how people actually interact with the site.
You can try to test the site on some people that are in the general demographic of people who would be using the site, and you can come up with some major tasks that you generally want for a user of the site to be able to do easily. Some primary questions to ask would be:
- Can they get to the contact page easily?
- Are they confused about the main navigation?
3.If you have a shopping cart is the purchasing experience easy to navigate?
- Are all your messages to the user friendly and conversational rather than formal and cold?
- What pieces do they go to first? Can you spend more time making sure those elements and pages are the best they can possibly be?
A more intensive process may make sense if it’s absolutely critical for the sites layout, calls to action, and User Experience to be effective.
UX Design has generally been the jurisdiction of UX Experts, often cloistered off over in a separate space from designers, testing and then giving feedback , sometimes through a time and resource intensive process that could cost a client $50,000 to $80,000 dollars at the bottom end. I am not negating this, they came up with some great stuff.. but in a recent development, there has been movement to integrate these methods and processes into the creation of the website more directly. To bake the magic right in the cake.
In the book Lean UX by Jeff Gothelf, Gothelf describes Lean UX as being inspired by Lean Startup and Agile development theories; it’s the practice of bringing the true nature of your work to light faster, with less emphasis on deliverable and a greater focus on the actual experience being designed. For web design this process means creating prototypes of the website somewhat quickly based on very intentional initial process focused around the prime demographic’s user profiles, what their main goals will be, what the businesses goals are. The process of Lean UX tests this prototype on user’s and uses customer feedback to evolve it much faster than any former UX process.
This process is designed to keep a designer or design team away from perfecting a design only to find out it fails to meet the customer and/or business needs, thereby wasting 3 months of the designer or design teams life. With this type of prototyping it’s “Speed first. Aesthetics second” as Jason Fried of 37Signals.com has said. And then iterate… and re-iterate based on feedback. So it’s not just pretty .. junk.
For Lean UX based designers this process may mean, fewer deliverables, fewer billable hours, less money in theory. But… It means the project can be delivered faster, a happy more empowered client (because you have tested with real users and designed based on what they need in an objective way,) and perhaps.. a repeat customer.
So Lean UX, in a nutshell:
The site can be created in a prototype stage, or a less buttoned up version.
These prototypes can be tested on people that are close to your prime demographic. Video and written documentation of the process, while having them navigate the site, asking them to accomplish certain tasks a customer might want to do.
Insights are gathered and used to create a higher fidelity prototype, moving towards a more buttoned up product, test again.
Happy to share with you this web design audiobook!
Google Analytics is your friend. (There are other analytics services, Google is a premiere one and one of the primary one’s I’ve used so I will focus on that. ) The principles described hear will apply to the others generally as well in some regard.
Now.. go to google analytics, sign in, and look at your traffic. One great way to gauge room for improvement is looking at “Behavior” on the Google Analytics Dashboard.
Google offers this resource free of charge and it can be a major help and figuring out who’s coming to your website… from where, what devices their on, and where they’re leaving your site. See where people are primarily going to, and make those pages more excellent, and get a better understanding why people come to your website.
When you see a disproportionate amount of people leaving after visiting a certain page, unless it was an article or the like, and it would make sense for them to leave after viewing it , you can patch up the hole, by trying a different design or different copy until the page performs more effectively.
Get people to link to your site. Perhaps you can get people in related industries to link to your website, maybe in exchange for a link on your site. This is good because people can find you on their site. But many times, more importantly, because Search Engines use these links in other places to factor in trust of your site. If they are legitimate sites linking to you, it increases the chance that your site is legitimate, and googles algorithms feel more comfortable serving your site up as relevant content to people searching for a related phrase.
Part four: Your options if you decide invest money in the process.
What the heck am I paying for when I’m paying for web design services? Sometimes I think people feel a bit like they are paying for a mechanic when they are purchasing a website, or website maintenance. This audiobook is intended to clarify the process a bit, curating relevant information one might be looking to find before either making a website themselves, or paying for web design services.
If you decide you’d rather outsource this job, then take it on as another project on your plate, you are generally paying a designer or a design team, because just as any trade takes time to master, or get good at, web design does too. Coding and building websites sometimes just makes more sense to someone who’s already spent years getting over the learning curve. This way you don’t have to spend your time learning yet another skillset.
Generally if your purchasing these kinds of services your paying for them to implement all of your photos, making sure they are optimized for the web. Your ideally paying for someone who is practiced in the art of laying out a website in a an effective and visually appealing manner. No template can do this for you, it does take practice.. Review the designers you are considering’s previous work.
When it’s really a worthwhile investment is when you are paying for a designer or design team who’s visual eye is adept at making things both look right and work right with the functionality of the code. I strongly, strongly suggest having a designer create your website on a Content Management System such as WordPress, Squarespace, or Drupal so that you, or someone on your team can make updates. Also a designer or design team can, if it’s part of the scope of the project, help craft effective messages on the website and help communicate effectively with your customers. (This might be outside of the realm of what many design teams consider their jurisdiction, so make sure to ask up front whether the job you are hiring them to do includes this kind of work.)
Consider using a freelancer. Many college students will do work for free, or cheap. Though many times you get what you pay for. Small Business owners or sole practitioners would be a step up.. I currently run a small LLC doing this kind of work, and obviously is the reason I got the idea to do this audiobook, so I may be biased. My strengths as a web designer are my distinct visual sense, paired with my ability to implement it in a way that’s functional and effective, and my experience rolling out these techniques I’ve been describing to you in an efficient way. Because I’m a freelancer I can do all of this with relatively lower overhead. For those reasons, finding a solid freelancer might be the best option for many people, but obviously there are limitations to using this option. If you have a larger business or a big e-commerce store you are trying to set up, a team of designers, or a design firm might be more appropriate of a strategy.
Perhaps you could find a designer who works for a company, but does freelance on the side.
For these services there is a broad range of amounts that are appropriate.. If you are working with a college student I’ve seen people pay anywhere from 5-600 dollars to $8,000 if the person was very sharp, and depending on the scope of the project. If you are working with anyone outside of a college student looking to build a portfolio, I would be very wary of anyone charging anything less that 1000 dollars. (or even if the are in school.) It is just generally a good amount of time and effort building an effective website and I’d be really curious as to why they don’t value their time at more than that. The bottom end of a quality website, a smaller one, would probably be around $3,000 through a freelancer. But many times this may be a website simply built on a pre-made template with very little customization, so ask the designer or design team, what they would be building the website on and if they are using a template, and how much of the website will be a custom solution for your business or organization.
Thank you for reading this, and/or listening to this web design audiobook!
A completely custom website made with a Content Management System should be around $5000 dollars and up in my experience. Depending on the skill and value of the designer, and the scope of the project, this may generally range up to $20,000 or so.
Much more than this and generally we’re getting into the scope of web design company of more than one person or a marketing firm.
These companies, can really be worth it. Some of the things you are paying for:
Overhead: obviously, more mouths to feed, building costs , insurance, etc.
Process: If you are looking for a more involved process of design involving more team members, this environment provides this.
A good firm has an established process to insure that your website meets standards that they have set up through much experience. Make sure you have their attention and focus for the time they are working on your site
Many of the people that will be listening to this audiobook will be no doubt from the Twin Cities in Minnesota and surrounding areas. Some top Web Design firms in Minneapolis.
The Nerdery. A bigger firm with the backbone of hundreds of employees. A Twenty thousand dollar site is probably at the lower end of what these guys do, but they develop in .Net, Drupal, WordPress and basically anything you’d need.
Two bit more corporate feeling web design firms I’ve done a bit of research on are August Ash, Firstscribe, and Spydertrap. There sites are pretty buttoned up and standard, but this might be appropriate for many people.
There’s Mankato Web Design, Rocket 55, Plaudit, Creative Arc, MVP, and Wizzy Wig.
One WordPress specific Design team is Westwerk out of Northeast Minneapolis, and they are generally friendly and do excellent work with completely custom WordPress sites.
Here are some Marketing firms in Minneapolis who do a broader array of work and also offer web design through them.
Hunt Adkins: This is a smaller marketing firm that produces some stellar web design within the context of broader marketing messages. Truly excellent taste and many years of experience.
We have Olson here, and if you live around Minneapolis, you may know they do excellent work. Getting into the bigger business, pricier side here, but they also offer full web design services within the context of their marketing work. They do redesigns and their branding sense is phenomenal.
I’ve gotten to visit both of the firms and that is part of why I feel apt to mention them amongst a sea of firms. I’ve also had the privilege to visit Colle + Mcvoy and they do excellent work as well generally more focused on the marketing side of things with a couple fingers in the web design side. Other big firms are Fallon, Carmichael Lynch, Periscope, and Space150. Most Marketing firms offer web design through them these days, with the broader benefit of having access to a team of people making sure your marketing messages are on point and effective. The trick is making sure it’s an investment in the future of your organization or business, and that investment is worth it. I believe it often can be.
Thank you for listening to this audiobook. I am a digital designer and web presence marketer out of Minneapolis, Minnesota, and I truly want to be useful to you. Feel free to contact me if you need anything. If you are in the Twin Cities, in Minnesota, or surrounding areas, I’d love to sit down with you and see if I can help you make your presence on the web better, help create an excellent website that looks good on mobile, and that you can update yourself. I also offer UX Testing and documentation for projects where your customer’s user experience is absolutely critical for your sales or the way your brand is perceived.
Thank you for listening (or reading,) and I hope this has been very helpful!
Remember keep checking out my website for new monthly videos that help you with your web marketing, and articles about trends in marketing and design.