Jewelry Making Professor – Web Design

The second project of the Jewelry Making Professor website was no less challenging than the first. While the first project dealt with the underlying structure and applications that power the website, this project dealt with the design and user interface.

The assignment was to create a design that could work with all of the areas of the Jewelry Making Professor website. This included an eCommerce section, a blog, and several call to action pages. Included within was the Video of the Week and a count down timer that display on the home page.

After refining the design, we settled no a basic layout. This design was then turned into a WordPress theme and an X-cart theme. Both needed to align perfectly and create the appearance of one continuous website. Take a look for yourself, check out the — X-cart portion and the Blog area here.

Advanced WordPress functionality

Most websites should not just have bunch of pages with unrelated content. Almost all websites need to have a set, group or list of data that makes up a collection. A collection can be things like News articles, Events, Testimonials, Blog articles, and image slideshows.

Why are we bringing this up in a WordPress related post?
Simple. WordPress provides a superior way to itemize your collection of data.

Although there are several ways to do this within WordPress, we typically use the built in category classification. This allows us to assign our types of items to these different categories. We then display these items in specific places within the website. Just look how we’ve displayed the most recent blog posts on the home page.

The site owner can control list based content within WordPress by simply adding it to a specific category. We use the custom field area to provide variables where information related to the item is stored. We can give these items custom attributes such as images, links, names, dates, and other textual information.

All of this is transparent to the site owner (end user) and we’ll provide training and a manual if necessary. Our goal is to create an easy to use interface that requires no training.

WordPress Development Process

There are a lot of references to WordPress within our website and portfolio page. If you are reading this then you probably know what WordPress is, or at least you have an idea of what it does.

ong>If you are unfamiliar with WordPress, here is a brief description:

WordPress is a flexible, intuitive website Content Management System. A Content Management System (CMS) allows the customer to control the website’s content without any programming knowledge. Typically this is done through a WYSIWYG interface. WordPress also provides the client intuitive control to add / remove pages and reorganize the menu. Clients also can also add images within the content. EJ Host also custom tailors WordPress’ content management on a per client basis. This gives the client the ability to update specific parts of the website.

Search for WordPress designers or developers and you will see thousands of results.

How does EJ Host stand out?

We stand out from our competition by developing our WordPress websites the same way we develop all websites, with XHTML and CSS . We start with analysis and research to formulate a design with you. We graduate these ideas and concepts to create a design. This design is then developed to a WordPress theme.

Our Competition

Most other “WordPress designers” have no idea how the inner workings of WordPress actually work, nor do they care. These designers either use WordPress theme templates or are using themes as a guideline to dictate their layout.

Our Competitive Edge

We only use WordPress as a Content Management System – all of our layouts are custom designed and then integrated into WordPress. We use CSS and XHTML to control the look of the site. The content is then filled in by WordPress. We have in depth WordPress knowledge which allows us to use WordPress functionality without having to settle on any out of the box design. So when we create your website, we can design it to any specification and then integrate it into WordPress.

Why do we use WordPress

There are many other pieces of software that perform many of the same functionality as WordPress such as Joomla, Sharepoint, Drupal, and PHP Nuke.

Why do we use WordPress?

  • WordPress is very intuitive for the client to use with a short learning curve
  • WordPress is an active and widely used product that is constantly updated, improved, and refined.
  • WordPress offers your revision history which allows the author to recover a prior version of any page or post within the website
  • WordPress has great Search Engine Optimization capabilities, including search friendly links and W3C compliant code
  • Modular design allows developer to include or exclude as much code as necessary
  • Ability to integrate other technologies such as AJAX, JQuery, Flash, Janrain and Ruby on Rails
  • Unbelievable amount of plugins available to extend functionality

Read about advanced WordPress functionality here

Questions? Feedback? Leave us a comment or spread the word via Social Bookmarking below

Wayward Roots

The Wayward Roots website project was a complete in house job that spanned the whole website development life cycle.

We established a hard budget with the client during the estimation and proposal process. To stay under budget while producing a high quality product, efficiency was even more important than usual. One of the main pieces that was removed was lack of design concepts and lack of revisions. We needed to get this one right the first time!
Read more about working within a hard budget here.

We felt confident using this method of development since we had excellent communication with the site owner. We understood his expectations and felt like we were on the same page with him. Conceptually, we shared his vision and understood that he needed the site done quickly.

Word count: 267
Last edited by jesse on April 20, 2011 at 2:20 pm

Excerpt

The Wayward Roots website was developed using a custom WordPress theme loosely based on the 2010 theme. This is our typical method of WordPress development, we start with a stripped down custom theme and build upon it.

We used our set of custom WordPress functions to handle some of the sidebar and SEO items on the site.

From there we setup Posts categories and custom fields to manage News, Music, and Home page images. This allows the site owner to easily manage these lists.

The last pieces were using JQuery cycle and PHPThumb to manage the home page images. PHPThumb takes the full sizer image and does a zoom crop + maximum resize to display the image within the home page’s frame.

We had a lot of fun doing this site and check out Wayward Roots music

WordPress Customization

Our out of the box EJHOST WordPress theme received customization for this project. Mainly for a much different layout & specific design details. Our favorite image resizing script, TimThumb was used throughout the site, allowing the site owner to upload any size images.

The project featured design from Cause Design and Geoff Matheson Design.

The Game Within

The Game Within website was a fun project to work on. We’ve done previous work for Christo Schutte, owner of The Game Within.

Our piece of the puzzle was solely website design and web development. There were also certain elements of graphic design that were required of us, but the design and concept was done by Rodd at Cause Design.

This project was a rapidly paced project which moved quickly. We met with Rodd and he supplied us with the entire design and concept in Photoshop. We then translated this design into a web based format. Geoff from Geoff Matheson Design helped with CSS and graphic work. His work was invaluable in getting the design tweaked just right.

For this project we used WordPress as our CMS. WordPress is a superior user friendly CMS and is designed for SEO and other internet web standards.

For all of our websites that use WordPress, we design the WordPress theme from the ground up. Our theme is loosely based on the best parts of the current recommended 2010 design. We start with a stripped down 2010 theme + some of our own default goodies. A customized theme and layout is then created from this default. This is where we then build our CSS and XHTML code. Since we have such an in depth knowledge of WordPress, we can use built in WordPress functions at times, and then either use our own custom written PHP functions or create our own. The combination allows us to create anything and everything possible, while giving the site owner complete control over their site.

Other features of this website are:
1. A JQuery Cycle based home page splash. JQuery Cycle is very cool because it allows you to use JavaScript with regular XHTML & CSS. It is incredibly flexible and really easy to use.

2. Lots of WordPress Post customization. We use WordPress Posts as custom taxonomies which power pieces of the site, like the Testimonials. The site owner can then add and edit these Posts and all of the information will appear in the correct sections of the website.

3. Recent Blog posts on the home page use PHPThumb to display thumbnails of larger images. PHPThumb is one of the coolest scripts we’ve found in awhile. It allows runtime thumbnails to be created & their file size adjusted proportionately. This means that the site owner can upload any image & our script can crop this image however we tell it to. Super Cool!!

4. TypeKit fonts used for the website’s font.

5. Social Media Optimization and collaboration. Each of the Blog posts on the website have their subject and URL automatically posted on The Game Within’s Twitter feed. Once the tweet is done, it is automatically posted on The Game Within FaceBook page and then finally automatically posted on Christo’s Linked In page.

So check out the website today!

CrossFit Rehoboth (CFR)

CrossFit Rehoboth was an interesting project. The project encompassed several different elements: website design / development, graphic design, logo design, content management system (WordPress), and custom web application development.

The website was built in several rolling phases. The client needed a website built immediately with the idea that it would grow as we progressed. So we picked WordPress to manage the content and so the client could blog. We bought the domain and launched the site 1 week prior to CFR opening to the public! So the site was setup in WordPress and let the client add all of the content. As the site took shape, we applied certain styles to the content and organized it.

Geoff Matheson was hired to build a brand and logo for CrossFit Rehoboth. He developed a great logo which was implemented within the website.

Over the course of the project lots of additional functionality was added to the CFR site, which in turn attracted lots and lots of visitors!! Currently the site gets an average of about 100 visitors a day and is growing each month. Go over and check it out yourself!

Woodin Associates

Earlier this year, Woodin Associates hired us to redo their website. To properly redo their website a total rebrand / logo redesign was needed. Geoff Matheson did all of the graphic work and did an incredible job transforming the Woodin brand, while maintaining a consistent look from their previous logo. Click to read more about this. Slide Show Pro was used to display the slideshow on the home page. Geoff developed all of the content including copy writing and photography. He also created several printed materials for Woodin, including business cards, stationary and envelopes. Examples of this can be seen on his site.

Woodin was designed using our favorite Content Management System, WordPress + custom programming. This gave us the effect we were looking for and were able to create a custom projects area where Woodin can display all of their current and past projects.

SO check it out and feel free to give us any constructive (or complimentary) feedback about the site!!