{"id":3828,"date":"2023-09-12T09:00:12","date_gmt":"2023-09-12T09:00:12","guid":{"rendered":"https:\/\/ajxmedia.com\/?p=3828"},"modified":"2023-09-22T05:21:32","modified_gmt":"2023-09-22T05:21:32","slug":"how-i-designed-my-business-website-in-10-simple-steps","status":"publish","type":"post","link":"https:\/\/ajxmedia.com\/index.php\/2023\/09\/12\/how-i-designed-my-business-website-in-10-simple-steps\/","title":{"rendered":"How I designed my business website in 10 simple steps"},"content":{"rendered":"\n<p>It was an exciting time. I decided to take my side hustle and turn it into my main hustle. I had years of experience under my belt, healthy relationships with several clients across different industries, and big aspirations for my new business.&nbsp; I was all set for the big time, right? Well, not quite. One of the first steps in getting the business up and running was building a great business website. And as a webmaster who has done this many times before, I knew the importance of having an engaging website that helps clients find what they\u2019re seeking.<\/p>\n\n\n\n<p>Armed with that understanding, I took a step back and asked myself what I needed to make this successful. There were already all these grand ideas in my head for what it should include, how it should look, and how to design the customer journey. I knew that wasn\u2019t enough and that I needed to take a more organized approach if I was to do this right. So, I put together a plan for developing my new business website and then began to execute.&nbsp;<\/p>\n\n\n\n<p>Here are the steps I took to make it happen. I\u2019ll try to keep this pretty high-level without going into all the nitty-gritty technical details.<\/p>\n\n\n\n<p><em>This post contains affiliate links. I may earn a small commission from purchases made through these links.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/website_computer.jpg\" alt=\"Desk with computer displaying business website \" class=\"wp-image-3777\" srcset=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/website_computer.jpg 900w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/website_computer-300x200.jpg 300w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/website_computer-768x512.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1) Identify goals<\/strong><\/h3>\n\n\n\n<p>The very first thing I did was identify the goals that the website needed to accomplish. As a new web design business, I knew I needed to establish some credibility. While my clients, close friends, and family knew what I did (to a certain extent), how would I build trust with the people just learning about me?&nbsp;<\/p>\n\n\n\n<p>Additionally, I needed to define the specific services that I would be able to provide. Coming from a marketing background, I had a pretty expansive skillset (if I do say so myself) but I didn\u2019t want to provide too many services and \u201cmuddy the waters\u201d, if you will. I really needed to zero in on what I wanted to do (and not do) to provide clarity to website visitors. Also, I wanted to start small before scaling up. So, it was important to frame that section of the site.<\/p>\n\n\n\n<p>Working with clients in the past, I also often heard complaints about other web designers. Often, they would work with designers that were difficult to reach or too busy to talk to them. Of course, this left to dissatisfaction with clients and many times they ended up leaving. So, it was important that I made it really easy to reach me through the website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/goals_notebook.jpg\" alt=\"Notebook with goals note on cover\" class=\"wp-image-3809\" srcset=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/goals_notebook.jpg 900w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/goals_notebook-300x200.jpg 300w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/goals_notebook-768x512.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2) Get domain and hosting<\/strong><\/h3>\n\n\n\n<p>Once I had some of the primary challenges and goals captured, I knew I needed to get my domain and hosting set up. Now, there\u2019s a lot that can be said about what companies to work with for each. I\u2019ve been with many companies over the years myself. So, I asked myself what my business would need, especially in the beginning stages. How much traffic am I expecting? How important is customer service? Do I have access to a hosting control panel?<\/p>\n\n\n\n<p>After some consideration, I decided to use&nbsp;<a href=\"https:\/\/shareasale.com\/r.cfm?b=518798&amp;u=2735468&amp;m=46483&amp;urllink=&amp;afftrack=\" target=\"_blank\" rel=\"noreferrer noopener\">NameCheap&nbsp;<\/a>for my domain and switched to <a href=\"https:\/\/www.siteground.com\/index.htm?afcode=681f8bc17d65cc34d692852a15d39f57\" target=\"_blank\" rel=\"noopener\">SiteGround<\/a> for my hosting. So far my experience with each has been very positive (and this is coming from someone that\u2019s used many companies).<\/p>\n\n\n\n<a target=\"_blank\" href=\"https:\/\/shareasale.com\/r.cfm?b=2105095&amp;u=2735468&amp;m=46483&amp;urllink=&amp;afftrack=\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/static.shareasale.com\/image\/46483\/2022_RelateSocial_Affiliatesprogram1_02.png\" border=\"0\" alt=\"Social Media Manager: grow your reach!\" class=\"affiliate_banner\" \/><\/a>\n\n\n\n<a href=\"https:\/\/siteground.com\/web-hosting.htm?afimagecode=8460bcf08c6cd6a7f837c5030b4d8331\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" border=\"0\" alt=\"Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.\" src=\"https:\/\/siteground.com\/static\/affiliate\/en\/NOPRICE\/general_EN_general-hosting-leaderboard-light.jpg\"><\/a>\n\n\n\n<h3 class=\"wp-block-heading\">3) Look for inspiration<\/h3>\n\n\n\n<p>After that part was locked up, I started looking for inspiration. I visited other websites, both in my industry and in other industries, to get ideas for how the site should look. I also considered unique functionalities that would be useful to add. I looked at different interfaces and made notes of what worked, what didn\u2019t work, and what I liked overall.<\/p>\n\n\n\n<p>What would make sense for my website? What would help users when they visited? Is there anything I\u2019ve done before that could be applied here? I considered these things and many more before designing anything.<\/p>\n\n\n\n<iframe class=\"giphy-embed\" src=\"https:\/\/giphy.com\/embed\/XNjxWQjaBG8us\" width=\"480\" height=\"270\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\n\n<a href=\"https:\/\/giphy.com\/gifs\/inspiration-XNjxWQjaBG8us\" target=\"_blank\" rel=\"noopener\">via GIPHY<\/a>\n\n\n\n<h3 class=\"wp-block-heading\">4) Choose platform and template<\/h3>\n\n\n\n<p>With some solidified ideas in my head now, I was ready to choose a platform and template for my business website. I already knew beforehand that I\u2019d be using <a href=\"https:\/\/wordpress.org\/\" data-type=\"link\" data-id=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress <\/a>for the website build. I\u2019ve built several other sites with WordPress, and I enjoy the flexibility and support that I get from the site. Additionally, did you know that <a href=\"https:\/\/wordpress.org\/40-percent-of-web\/#:~:text=%E2%8C%83-,WordPress%20Powers%2040%25%20of%20The%20Web,is%20even%20higher%20at%2051.8%25.\" target=\"_blank\" rel=\"noopener\">over 40% of all websites on the web are built with WordPress<\/a> now? With that in mind, I knew that there was a large community of developers and designers that could provide support and collaboration too.<\/p>\n\n\n\n<p>Afterwards, I chose a light template within WordPress where I could customize it how I wanted \u2013 I chose the WordPress 2020 theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"900\" height=\"486\" src=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/wordpress_logo.png\" alt=\" WordPress Logo\" class=\"wp-image-3808\" srcset=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/wordpress_logo.png 900w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/wordpress_logo-300x162.png 300w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/wordpress_logo-768x415.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5) Site map<\/h3>\n\n\n\n<p>This was a pretty easy step. Because the website was not going to be that big, the site map came together quickly. I created a list of pages that the website would contain, and where they would be in the overall navigation. The plan was always to keep it simple.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap_laptop.png\" alt=\"Sitemap example\" class=\"wp-image-3804\" srcset=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap_laptop.png 900w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap_laptop-300x200.png 300w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap_laptop-768x512.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">6) Wireframes<\/h3>\n\n\n\n<p>I was finally ready to get the thoughts in my head onto something tangible. I began to draw my website on paper (yes, paper) to lay out how the site should look. While there are other ways of doing this (ie through software), I\u2019ve found the analog approach works well for me. I used to design site maps through Photoshop, but I found that it was sometimes time-consuming to transfer design elements into CSS and HTML. The paper format works well for me.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap-1024x682.jpg\" alt=\"Wireframe image\" class=\"wp-image-3726\" srcset=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap-1024x682.jpg 1024w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap-300x200.jpg 300w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap-768x512.jpg 768w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap-1200x800.jpg 1200w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/sitemap.jpg 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">7) Begin design<\/h3>\n\n\n\n<p>Ok, now the fun part! Once I had a lot of the pre-work completed, I dove into WordPress and began designing the site. I already had a wireframe so I was able to create the sections fairly fast. I also had put together branding guidelines, so I was able to apply those as well. I did wrestle with certain decisions (for example, pictures to use), so that took me some time. There was also some new functionality I wanted to implement (for example, the phone number on the front page that changes its display for mobile), so I also spent time learning and experimenting too.<\/p>\n\n\n\n<p>Of course, another part that took time was writing all the copy. There were many pages to create content for, and I wanted to make sure everything was explained well. So, in addition to some of the visual elements, I also spent much of my time writing.<\/p>\n\n\n\n<iframe class=\"giphy-embed\" src=\"https:\/\/giphy.com\/embed\/MvovQGsMBY9H2\" width=\"480\" height=\"480\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\n\n<a href=\"https:\/\/giphy.com\/gifs\/MvovQGsMBY9H2\" target=\"_blank\" rel=\"noopener\">via GIPHY<\/a>\n\n\n\n<h3 class=\"wp-block-heading\">8) Optimize and review<\/h3>\n\n\n\n<p>After many revisions, and through gathering feedback, I felt comfortable with how the website looked and functioned. At this point (and especially after such a long road), temptation was creeping in to launch the website. But I knew there was still a few more things to do before we reached that point.<\/p>\n\n\n\n<p>I needed to optimize the site now so it performed well. The first thing I did was look at the photos on the site and make sure they were compressed and sized down. Large photos can slow down your site, so it\u2019s important that they\u2019re the right size. I also converted the icons throughout the site to an <a href=\"https:\/\/www.adobe.com\/creativecloud\/file-types\/image\/vector\/svg-file.html\" target=\"_blank\" rel=\"noopener\">SVG <\/a>file format, which 1) increased quality and 2) decreased file size. And lastly, I installed a plugin for <a href=\"https:\/\/wordpress.org\/plugins\/wp-super-cache\/\" target=\"_blank\" rel=\"noopener\">caching<\/a> to help with performance.<\/p>\n\n\n\n<iframe class=\"giphy-embed\" src=\"https:\/\/giphy.com\/embed\/0DYipdNqJ5n4GYATKL\" width=\"480\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\n\n<a href=\"https:\/\/giphy.com\/gifs\/BTTF-back-to-the-future-bttf-one-0DYipdNqJ5n4GYATKL\" target=\"_blank\" rel=\"noopener\">via GIPHY<\/a>\n\n\n\n<h3 class=\"wp-block-heading\">9) Publish my business site<\/h3>\n\n\n\n<p>Ok, the big day was here. After creating a plan for the website, designing and building it, and refining things to get it just right, we were ready to launch! I shared the website across my social media platforms, and directly with close friends and clients as well. It was an exhilarating, kind-of-nerve-wrecking, rewarding feeling. Perhaps it was because I had planned this site for years in my head? Or maybe it\u2019s because I knew how much work was put into it.<\/p>\n\n\n\n<iframe class=\"giphy-embed\" src=\"https:\/\/giphy.com\/embed\/jV65cP2S4mphrQfJkk\" width=\"480\" height=\"346\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\n\n<a href=\"https:\/\/giphy.com\/gifs\/usnationalarchives-jV65cP2S4mphrQfJkk\" target=\"_blank\" rel=\"noopener\">via GIPHY<\/a>\n\n\n\n<h3 class=\"wp-block-heading\">10) Continue to tweak and adjust<\/h3>\n\n\n\n<p>Once the <a href=\"https:\/\/ajxmedia.com\/\" data-type=\"page\" data-id=\"30\">website was live<\/a>, I knew it was important to continue making modifications where necessary. Whereas some people may think the work is done once it\u2019s live, that\u2019s not entirely true (actually it\u2019s not true at all). A website needs TLC so it continues to perform well, while also addressing the needs of your audience.<\/p>\n\n\n\n<p>After the website was launched, I received even more feedback from people about what they thought. From what they liked to what they didn\u2019t understand, it was all valuable information. Based on some of those helpful comments I received, I went back in and continued to tweak things. I didn\u2019t take all the advice \u2013 you have to be your own filter and apply the changes that make sense to you and your audience.<\/p>\n\n\n\n<p>Another thing I did was look at my <a href=\"https:\/\/marketingplatform.google.com\/about\/analytics\/\" target=\"_blank\" rel=\"noopener\">Google Analytics<\/a> after the first month to see how the website was performing. Where were people spending the most time? How long were they staying on the site? At what place did they decide to leave? Those insights were helpful as it allowed me to continue making smart adjustments.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/maintenance_graphic.png\" alt=\"Website maintenance graphic\" class=\"wp-image-3815\" srcset=\"https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/maintenance_graphic.png 900w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/maintenance_graphic-300x200.png 300w, https:\/\/ajxmedia.com\/wp-content\/uploads\/2021\/10\/maintenance_graphic-768x512.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>And there you have it. After many, many steps, these were the actions I took to design my business website. If there\u2019s one takeaway from this, it\u2019s the importance of planning. If you notice, I didn\u2019t start designing until way later in step 7. By developing a plan, you have a strong foundation upon which to build your website.&nbsp;<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>It was an exciting time. I decided to take my side hustle and turn it into my main hustle. I had years of experience under my belt, healthy relationships with several clients across different industries, and big aspirations for my new business.&nbsp; I was all set for the big time, right? Well, not quite. One [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3777,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[15],"tags":[17,24,18,16,20,21,22,19,23,25],"class_list":["post-3828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-business-website","tag-how-i-designed","tag-simple-steps","tag-web-design","tag-web-designer","tag-web-dev","tag-web-developer","tag-webdesign","tag-website-design","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/posts\/3828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/comments?post=3828"}],"version-history":[{"count":6,"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/posts\/3828\/revisions"}],"predecessor-version":[{"id":4062,"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/posts\/3828\/revisions\/4062"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/media\/3777"}],"wp:attachment":[{"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/media?parent=3828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/categories?post=3828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ajxmedia.com\/index.php\/wp-json\/wp\/v2\/tags?post=3828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}