The website design process

It seems that everyone these days needs a website, right? If your kid is selling lemonade in front of the house, LipLickinLemonade.com better be up and running, too. And in these days of website templates, it's even more important to have your website stand out from those other lemonade stands.

Steps to create your website:

STEP 1: CONTENT DOCUMENT, vision, SITEMAP & wireframes

The content document. Creating a content document is an all-important first step to start getting this website thing underway. A simple Word or Google Doc gets all the information on "paper" and helps to get everything organized. I'll look at your document and determine the best way to translate your content into an easy-to-follow website, including determining what functionality will be best on each page to make the content easy — and fun! — to consume (mmm, yummy content)

The vision & plan. We will create a development plan of how to best structure your website for ease of use and understanding. Part of this is developing a sitemap that shows the page hierarchy, then each page gets a quick and simple sketch (a wireframe) so we can start to get a sense of what kind of content will go on each page and how it will roughly be laid out. This will also help solidify your website's goals and purpose for being here.

STEP 2: style document, colors & design direction

Style document. After getting to know your website's purpose and focus, I integrate that vision into whatever existing brand you have to create a sample style document that shows typefaces, colors and sample photos that could fit the theme and feel of the content and purpose. 

Setting the mood. This step helps to lay the foundation of the overall look and feel of the website before we even get to the design phase proper. Think of this phase as setting the "mood/atmosphere" in which the website itself with live. This process is a lot like creating a space in your home: When visitors walk into this space, what is it that you want them to feel? How can we create the kind of environment that facilitates that?

STEP 3: homepage & interior template design

Homepage. Now that we have site structure, content, photos, style and purpose of the site, that allows me to dive into creating a detailed static homepage design in Photoshop. 

(This is the phase that clients really get into because the vision that was just content and black & white line art becomes more real. Our shared vision in our heads gets ushered into reality, splashed on the screen!)

Interior page template. Once we finalize the homepage design and layout, that gives us a foundation in our overall look & feel. I use these visual principles to lay out our sample interior page (to be used as a template for most of the interior pages of the site). When you are absolutely in love/giddy with the homepage and interior page template, we move onto the next step.

STEP 4: bringing design to life & MAKING IT RESPONSIVE

Making your website interactive. With a beautiful homepage and interior template, we move into bringing the static image to life in the interactive web! I take the static Photoshop mockups and translate those into a language that the web can understand (HTML5/CSS3). I also add interactivity to buttons, hyperlinks, navigation items and any other elements that want to come to life. A big part of this is browser testing: I stress-test the pages in all of the browsers (Explorer, Firefox, Safari, etc.) to make sure all relevant browsers are translating the pages to look right.

Fitting it to all the screens. Once the homepage and interior page template are signed off on as interactive pages, I make them responsive. This means I design alternate layouts that work for all the varying screen sizes your website will be viewed through. With the proliferation of so many screen sizes, from panoramic wide flatscreens to laptops to tablets all the way down to phones, your website needs to "fit" whatever screen it's being viewed through. (And over 50% — and growing — of web traffic is being viewed on mobile.)

STEP 5: CREATING ALL PAGES OF YOUR WEBSITE

Fillin' it all out. Now that we have a design and layout in place that works great across all browsers and screen sizes, I bring in all the content from our beloved content document (remember that thing?) and bring it to life in its new website home. After all the content is added, I go through another round of rigorous testing to make sure all the pages still work well with the content in all browsers and on all screen sizes.

You can edit anything! Keep in mind that unlike a print project that doesn't allow you any editing second chances once it's off to the printer, your website's content is way more lenient. Of course it's important to make sure your content is top-notch when we publish the website live, but know that your content can evolve as you, your business and your overall message evolves. 

P.S. You will have full control over all the content on the site (you get a robust CMS with your website hosting package), so if you find errors or want to change any of the content at any time, you just log in and edit your heart away.

STEP 6: FINALIZING, TESTING, optimizing, launching

Full-on Test-o-rama. Now that the website is almost ready for primetime (can't you just feel the excitement building?), you get to do your own stress-testing (of the website, not you silly). This includes going through it yourself, but also can mean sending it out to friends and relatives to test on their own screens and browsers and report back if they see anything amiss. 

Optimize & finalize. Then after everything is completely signed off on, I go back through with my fine-toothed website comb and optimize all the images to be as small as they can be without losing quality (which saves your pages load time). I also go through all the pages and assign images alt tags as well as SEO title and description tags to help Google understand what your site is all about. I also install analytics so that you'll be able to see visitor data to your site to make data-driven decisions about your marketing. The final step is moving your site from my testing server to your live hosting account; then we launch your website live on your website's domain name. 

I got news for you: Now, your website is officially born.

Look, it's my website design portfolio!

Inner Essence website design
Inner Essence website design
Mary Justus web design
Mary Justus web design
Brian H Murray web design
Brian H Murray web design
Moving the Internal Matrix landing page
Moving the Internal Matrix landing page
UNC School of Nursing collab tool
UNC School of Nursing collab tool
TechUpRoc web design
TechUpRoc web design
M Andrew salon web design
M Andrew salon web design
Success Day sales page design
Success Day sales page design
Buzz Seminar sales page design
Buzz Seminar sales page design
Aiden Art website
Aiden Art website
Kore marketing emails
Kore marketing emails
Slowflow website
Slowflow website