logo

Mead.Design

Bttrfly Productions

Design Process

The image in this section shows the design process for this site, which includes a design for the front page of the site, as well as a design for an internal page template.

I did this in Photoshop using the excellent artboards feature. You can see that I have design the look of the site for multiple screen sizes from large to small at the same time. This is used as a guide during the production process.

bttrfy02

HTML and CSS Production

The next step in the process is to convert the design into HTML and CSS. To help with this process, I used the excellent Skeleton CSS Boilerplate, which provides a number of useful classes built in, including a responsive grid, that can aide in building responsive websites. The Skeleton CSS Boilerplate is similar to other popular boilerplates, such as Twitter Bootstrap, but I like this one better for teaching because it is simpler and students can get started with it faster.

I created template pages for both the front page of the site, as well as an internal page. The finished front page can be found here:
http://mead.design/bttrfly-html

The internal page template can be seen here:
http://mead.design/bttrfly-html/page.html

bttrfly03

WordPress Theme Building

The main challenge of this project, was to design a unique and interesting looking site, and then convert it into a WordPress theme so that the resulting site could run on top of WordPress, but not look like just any old generic theme.

You can see the completed theme, running in WordPress here, and although there is plenty of additional work to be done, and content to be added, all the pages function, the blog functions, and the front page displays the most recent blog posts.

The demonstration also included a segment on the proper way to include jQuery scripts in your WordPress theme, and this is shown through the navigation, and the site looks and works well for mobile users.

Featured Projects

  1. ZAP Creative

    Responsive Design, HTML, CSS, JS, PHP and WordPress

  2. Animal Shelter

    Responsive Design, HTML, CSS, JS, PHP and MySQL

  3. Experimental JavaScript

    Responsive Design, HTML, CSS, and JavaScript

  4. KITTENS FOR SALE!

    HTML, CSS & JavaScript focusing on jQuery plugins

  5. Syllabus Generator

    PHP & MySQL Web Application

  6. CodeSnap Web Application

    PHP & MySQL web application

More Projects

  1. 4.23 Microsite

    Experimental JavaScript Microsite

  2. Audio Space

    HTML, CSS & jQuery

  3. Bttrfly Productions

    HTML, CSS, JS, & WordPress

  4. Desktop Repainter

    HTML, CSS & JS

  5. Bluephant Dental

    HTML, CSS, & JS

  6. Zen Music Festival

    HTML & CSS

About William Mead…

William Mead Photo

This site shows some of my front-end design and development work and shows how I use these projects to teach students about those same topics.

Find me on these networks

Professional Qualities

  • Enthusiastic about teaching, learning, managing projects and building products for the web.
  • Deeply creative and always playful. Frequently engrossed in solving complex puzzles.
  • Thoroughly engaged in the design and web development industries.
  • A visual learner with an analytical mind.
  • Introspective and always striving for improvement.

Skills

I am particularly good at bending CSS to do my bidding, and I really enjoy creating custom interactivity with JavaScript. I am always excited about new problems that need to be tackled.

Contact Me…

I look forward to hearing from you. Please contact me using the form or directly by email or phone.

bill@mead.design
530-219-8998

Your Name (required)

Your Email (required)

Subject

Your Message

Anti Spambot Question