If I had to do it over I would have minored in Computer Science. CS grads code the websites we frequent, program the software we download and design the apps we utilize on our phones, tablets and web browsers; none of which I can do. As a Finance and Entrepreneurship major I never developed the programming skills to turn my Silicon Valley dreams into reality, but that hasn’t stopped me from building 2 successful websites (and I’m not talking about blogger people). For those of us who associate Java with our morning kick and Ruby with a precious gemstone, there are a few resources I’ve discovered to turn our worldwide dreams into reality.
Map It
After choosing a name and registering your domain on a web host like GoDaddy.com, the first step is to plan the structure of your site. It’s best to start by creating a diagram of all the pages contained within. Most sites start with a Home Page, but then what? Using a square to represent each page, draw lines connecting the Home page to the Products, Company, Contact Us and Blog pages to show how sections of the site link together. This will form the foundation for your web development.
I’ve always drawn Site Maps first by hand, and then transferred any rudimentary renderings to Microsoft PowerPoint or Visio (for the more advanced). However you chose to show it, the goal here is to provide a single page that will serve as the guide for your wire frames.
Frame It
Once you’ve showed the relation between pages, it’s important to mock the pages themselves. How will users navigate? What fields will populate the Contact Us Form? And, most importantly, how will the content be displayed to keep users engaged and coming back? On each web page, it’s your job to select the fields, text boxes, functional and navigational elements that will bring the content to life. Content is still King after all.
For peggsit.com, I mocked the first version of my homepage on a napkin (cliché I know). I didn’t know if then, but what I was really doing was creating a wire frame. A wire frame is like a blue print for your website. You can use different shapes to represent the types of content and their location on each page. I use Balsamiq to digitally design all elements of my pages, including top tool bar, bottom navigation, image and text box placements. Balsamiq even works for iPhone rendering. The only thing missing are the colors and themes to make your site stand out in the crowd. That’s where a designer comes in.
Design It
It’s now time for the fun part; designing your website! A lot of people are surprised to learn that programmers and designers are rarely one in the same. Whereas building a site involves the layout and delivery of content, designing is all about the colors, shapes and sizes that bring it to life. The simplicity of Google’s homepage is just one example of design elements shaping an entire brand. Walking into any design meeting you should already have an idea of the colors, graphics, font styles, sizes and all other display elements that will represent you and your site.
For my logo and web design I used 99designs.com. In less than 30 minutes I posted my project description and received more than 100 submissions: each designer receptive to my feedback and willing to work with me until their interpretation was just right. The best part? I got to name my price with a 100% money back guarantee if I failed to find a design. I happy to report that not only did I find a designer for my logo and web pages, but I have since returned to 99designs for peggsit business cards and t-shirts.
Build It
The most exciting part is actually building your website, but it is also the most challenging. Because you and I do not code, we must trust that work to others. What programming language do I need? What is the going rate for a web developer? And, eventually, why is my site delayed and over-budget? These questions have no easy answers. When it came time to build my site I relied on my network of MeetUp.com groups and the more technical minds to advise each step of the development phase.
When it comes to building your website, your best bet is to always find a co-founder. This may require freeing up some equity but having someone as invested in the success of your venture as you will produce dividends down the road. If you choose to go the Freelance route, I have used sites like Solvate and oDesk. My personal favorite is Elance due to its reach, Name Your Price approach and filtering controls. There are plenty of other options including partnering with a web development company and even outsourcing overseas. Regardless of what avenue you pursue remember to weigh the benefits and costs of each option. There are no short cuts. If it appears too good to be true than it most definitely is.
My AP English teacher taught me to Show rather than Tell. Every step of web development requires that you communicate your vision clearly and effectively. There will always be a difference between what you intend and other’s interpretation so do your most upfront to provide your team with the resources necessary to turn your dreams into reality.
Author: Michael Peggs, CEO & Founder, peggsit.com
