Web Design: Our Process to Building Successful Websites
By Troy Kadavy |Jul 18, 2016
Define Your Website’s Purpose from the Word Go!
Website design and development, when you look at it from a whole, can be overwhelming; it doesn’t matter if it’s your first site or if your redeveloping your 5th. At 92 West, we start with defining your website’s core purpose which fall into 1 of 3 categories:
- Marketing: Every page, graphic and piece of content is crafted to increase traffic and convert visitors. This style of website is developed with the specific purpose of supporting your business and marketing goals. At 92 West we incorporate a CMS (ExpressionEngine or WordPress) with the core functions devoted to easy content management, client acquisition and search engine optimization. We also integrate your e-mail marketing and connect the your social media accounts for direct posting.
- E-Commerce: 92 West has built hundreds of e-commerce websites for companies in the Omaha Metro area and beyond. E-commerce efforts address specific business goals with the primary focus being on maximizing conversion rates. If you have a need for either a custom solution or something out-of-the-box, we can help with the product catalog, shopping cart and checkout process, search engine optimization, seo semantic code, customer account creation, content management and of course security.
- Establish Credentials: New businesses especially need to create a web presence that establishes them as the experts that they are while also focusing on converting visitors to customers. This includes focusing on user-centered design, integration with existing sales tools (like Sales Force, Constant Contact etc.) and creating a site that puts our client in the driver seat for the next curve in the road.
Once you have established the purpose of the site you need to hammer down your pages, what you expect them to do, how you want them to do it and when you want this to happen.
Next step is the site-map; truly the foundation of the site.
Phase 1: Site-Map
A site-map is exactly what it sounds like. It’s a hierarchy of pages that give you the base of the site. From this base you built the structure.
Think of it like this… the site-map is like pouring the foundation of your building or home. Once you have it set-up and begin the process of setting up the walls it’ll be harder to add in or subtract out information. So, do your site justice and spend time figuring out what you want the site to say, how it relates to your goals and how this is the best experience for your customer.
Once you have that finalized the foundation we move onto design and function.
Phase 2: Responsive Web Design & Business Goals
More often than not, people start with the desktop experience first and then worry about mobile second. This is a fail… Start with the mobile layouts first and then expand them to what the desktop version will look like. It’ll save you time and certainly “development dollars”.
Form and Function + Creative & Marketing
Each section of the site can have a different look or elements / functions integrated to make that web page a positive experience for the end user (potential client). Keep this in mind when selecting which design elements to implement on your home, about us, informational pages, services pages, gallery / portfolio pages, search / search results, blog, testimonials, contact us and landing pages.
Common Design Elements to Incorporate:
- Meta Data (Unique Title, Description and Social Images for Each Page)
- Primary Navigation
- Mobile Navigation
- Background Images / Video
- Icon Fonts (Font Awesome for Instance)
- Accordion (Used for FAQ or Q&A)
- Image / Video Slider (We like the JQuery / WordPress version of Revolution Slider)
- Animations (Dictated by JQuery or CSS)
- Gallery (Grid or Masonry) or Portfolio
- Online Chat (Helps with Sales)
- Testimonials (Use them as a design element throughout the site rather than a page. No one visits the testimonial / review section… build trust by making them an integral part of the site.
For the best results, look at your industry leaders and what they incorporate. It doesn’t mean that what they have is the right decision for you, but it certainly gives you a place to start from. Early in the process, speak with your developer and your designer to make sure that your business goals for the site are known. They’ll be able to lead you in a direction that perhaps you wouldn’t have known about otherwise.
Be Bold, But Focused
Above all else… Each page should have 1 focus and 1 focus only. Everyone is clamoring for attention. Ensure that every element is deliberate and enhances the website as it relates to your business goals. The site is a tool that can wield wonderful results if implemented correctly.
Phase 3: Software & Hosting
Prior to developing the site you’ll want to have a home to build your code. If you have hosting… Great! Call them and talk about their platform and the pros and cons of what you are trying to do with them. Perhaps everything is awesome and you’ll be fine. However, some providers may have issues with what you are trying to accomplish. It’s best to vet them before setting up shop. Problems with the server can delay the project and increase costs.
At 92 West we have our own dedicated servers and set them up with our development in mind. For $20.00 a month it’s a great piece of mind to be able to call when trouble arises. It’s our equipment… we want it them performing at their best as well as we have our own sites on them.
Phase 4: Web Development: Creating Function to Match the Purpose
Concept to Functional Code
Taking a concept from PSD to a working model of HTML / PHP / JQuery / CSS… well you get the picture… takes an experienced web developer or a team of developers. Be sure to vet the people you are hiring. Ask for prior work. Testimonials and points of contact to verify.
Code to Working within the CMS
We love integrating into content management systems. Particularly, we love ExpressionEngine, WordPress and Magento. Each have their purpose and different approaches (details for another post I think). If you have a preference, make sure your developer knows this in advance. Again, you should see the inner workings of their examples as well. A CMS should be easy to update. If it’s not… then the developer hasn’t done their job.
So where to start? At 92 West we’ll create all the common elements first (Header, Footer…. Anything that will make it’s way across the entire site). Then we move onto individual sections. If a section has multiple dependencies (Like your blog or home page for instance), we build those parts first as the site will be pulling content from those sections and it’ll make it easier for our team to test.
Once all your sections have been built. Test. Test. Test. Test on multiple platforms with multiple browsers. Devils in the details and sometimes your design doesn’t play well with others. Review. Update. Move Forward.
Phase 5: Website Content
So now that the site is built, we need the content. For this we’ll rely on the site-map and build a folder structure that we will put the .doc, .jpg, .png, .gif, and .pdf files. Each page has a folder. Make it tidy and check off each page as the content has been completed. If you stay organized while putting the content together your design / development team will be able to delivery the working site faster.
Phase 6: Testing
Test. Test. Test. Test everything you can. We love using BrowserStack for our testing purposes, but if you have a few Windows machines, a Mac, Windows Phone, Android Phones, iPhone, iPad and a Tablet handy…. just use a paid service. For $50.00 or less you’ll save yourself hours of time and it’s automated.
Phase 7: Training
At 92 West, we offer 2 to 3 hours of in person training and also do video tutorials for each website we have completed. If your developer hasn’t included this into their proposal… make them. No one wants to have to make a phone call at 2AM because frank forgot how to login. Plus, we believe that you should be able to control your content. If you need help. We will certainly lend a hand.
Phase 8: Recap & Continued Growth
Once it’s done it’s time to rejoice, have a drink and look at the process as a whole. What could you do better. What could your developer and design team to differently. Take notes. Improve for next time.
Recap: Well, I hope this helps you along your way as this has been our process for many years. Each time we learn something new and adapt it to our process, but the framework has stayed the same; trustworthy and proven.
If you need help with your next web project please contact us at https://www.92west.com/contact or give us a call at 402.620.2633 anytime!
92 West | Branding, Digital Marketing, Web Design and SEO