logo

Mead.Design

Desktop Repainter

Designing with the Golden Ratio

Desktop Repainter is an App that can be purchased in the Mac App store, and it colors your desktop, slowly transitioning from one color to the next in a set created by the user. The app was created by a friend, and this site was not intended to serve as a real webpage for the app, but a way of teaching students about web design.

The concept of the page comes from this excellent video from a presentation given by Tim Brown at a conference in 2010. In his talk, he extols the virtues of using type as a foundational building block for relationships in design. He goes on to discuss ways of building relationships between different elements on the page based on these foundational type relationships.

This site was created as an example of his ideas, and is used with my intermediate web design students.

Using JavaScript to Enhance the Design

If you view the page on the web for a minute or two, you will notice that the paint stripes in the logo subtly change colors over time. I wrote some JavaScript to achieve this effect, which mirrors the use of the actual application, providing users with an additional clue about what to expect if they purchase the app. This is an example of how a design can be pushed further with a little ingenuity.

The script itself uses recursion to slowly shift the colors of the paint stripes between four different stopping points. If you use the inspector built into the browser and inspect those elements, you can actually see the script changing the style attribute in the HTML that shifts the colors.

dtrp03

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@meaddesign.net
530-219-8998

    Your Name (required)

    Your Email (required)

    Subject

    Your Message

    Anti Spambot Question