Successful Website Design





Self Made in Hawaii’s online presence has grown organically through the circulation of information on YouTube, Facebook, Twitter, iTunes and WordPress. To continue growing, this local TV show required a website that consolidated the available content and leveraged existing visitor traffic and online interest.

Jess Craven, the driving force behind Self Made in Hawaii, formulated a list of requirements and approached Bump Networks with a website concept. Craven requested a platform that supported the distribution of his video segments, promoted his iPhone app and sponsors, made the sharing of information easy, incorporated social media, and provided information about how to participate in the show. We took this information and set out to create a clean and simple home page design that incorporated all the requested components.

Home Page Mock-up 1

We received three emails full of media files, ideas, links to sample websites and a sketch on a piece of legal paper. We dug in and crafted our first “quick-and-dirty” homepage layout.

Sketches are great for outlining general placement of navigation and overall page components. We recommend tackling the homepage first before moving on to interior pages.

Success Tip: Before creating a polished look and feel, kick back-and-forth a wire frame that strictly outlines the placement of content. The wire frame should focus on making sure the most important information is easy to find. During this process, figure out what each page component does. Discuss where the content comes from, how its formatted, and how often will it be updated. Consider the usability of these features and the programming needed to make these features come alive. Along the way, make changes and updates to the design.

Home Page Mock-up 2

We quickly learned that the design needed to be simplified and adjusted to avoid overly complex programming. We updated the wire frame accordingly and came up with our first polished mock up.

Success Tip: Make sure to update page design with real content so it’s easier to make design and layout decisions.

We are moving in the right direction. However, the site coloring doesn’t reflect the brand and some of the page elements are buried. We decide to try new colors, move components around to better emphasize sponsors, and switch to a horizontal nav bar.

Home Page Mock-up 3

At this point, we’ve got a solid base but need to fine tune the design. A background image is needed because the mock up is a little flat.

Success Tip: Take the time to evaluate and revise the mock up from a marketing perspective. Self Made has a strong following on Facebook, so we cut the Twitter feed in half and added a Facebook likebox. We also added the Vimeo and iTunes podcast icons. The user had to scroll to see the iPhone app widget so we moved it up. We also choose to expand the sponsors’ widget so more logos could be seen at once.

Approved Home Page Design

The final version of the home page evolved from a conversation about user and business needs, content, technical implementation, brand identity, and marketing and business goals. The homepage becomes a blue print and the same design style and process is applied to interior pages. Utilizing this design approach helps insure that the resulting website accomplishes the proposed goals.

To learn more about why we selected the site features we did, check out Bump Networks’ blog post on

This entry was posted in Success Tips. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>