New Design for Green Apple Website

Today we relaunched the greenapple.org website. The site was in dire need of a facelift – it wasn’t responsive, it had an odd user experience, and the CMS made it difficult for editors to make updates.

Here is what the homepage previously looked like:

Green Apple old screenshot

And here’s what it looked like after I overhauled the design:

Green Apple

Our content specialists simplified the website’s content, and I worked on giving the overall look and feel a more modern look. I selected images for the new site, created icons, and coded it so that editors can easily swap out banner images. The website also uses SASS to make it easier for me to make global changes to colors, padding, and so on and so forth.

It’s always fun getting to rework a website, and compare and contrast the changes made in any given update.

New Design for PEER

Today we relaunched the PEER website. The site’s content was simplified, which meant that fewer pages were needed. I used this as an opportunity to simplify and clean-up the existing look and feel. When it comes to web layout and design, I always lean towards minimalist tendencies. Minimalist designs don’t distract from the content, but complement it.

The PEER website homepage previously looked like this:

PEER website

And the new website homepage now looks like this:

PEER website

You can see that the main navigation was simplified and a larger, bolder image is being used for the main banner. The main navigation was also adjusted to take up less real estate on the header. The fonts were also tweaked to create a more modern look.

The process of updating the website included finding strong images and finding ways to code the layout so that it would shift smoothly when viewed on different devices. It also included creating additional views in Drupal to manage the updated Resources section, and a different format for sharing published articles.

The previous version of the site was something I designed a couple of years ago. It’s amazing how quickly your style can change and improve over time.

New Design for GBCI.org

This week we recently launched a new design for GBCI.org. I used Flexbox a little bit with the layout, and tried to find better images that could create more of an impact for the viewer. I also adjusted the icons and tried to style the site in such a way where CMS editors can make changes to background images without having to touch the CSS.

Here’s a look at the new homepage:

Here’s actually what the previous homepage looked like. I designed this one a couple of years ago:

Before I started working at USGBC, the GBCI website looked like this:

GRESB Website

Project Details:

gresb.com
GRESB was in need of a new marketing website redesign. I began the process by putting together a rough draft of a site by customizing a build of Drupal. After going through a series of edits, I also worked on adding in JavaScript functionality for carousels and collapse/expand panels. The new site was launched at the beginning of this month.

Programs Used:

  • Drupal (CMS)
  • JavaScript
  • Photoshop
  • Illustrator

GRESB Website

Center for Green Schools Website

Project Details:

centerforgreenschools.org
The Center for Green Schools website underwent an complete redesign. After the content was finalized, I worked on creating the overall new design and layout for the website. I created icons for navigation and to break up text-heavy pages. I manipulated photos and compiled the new site CSS.

Programs Used:

  • Photoshop
  • Illustrator
  • Drupal (CMS)

Center for Green Schools Website

EDGE Website

Project Details:

edge.gbci.org
EDGE started out as a simple site created on Drupal. I worked on styling the overall website as well as selecting banner images for different pages and creating icons to add more interest to text-heavy pages. I also added JavaScript functionality to make different sections more interactive.

Programs Used:

  • Photoshop
  • Illustrator
  • Drupal (CMS)

EDGE Website

PEER Website

Project Details:

peer.gbci.org
PEER was in need of an full website redesign. I began the process by creating wireframes for the user experience. Next, I developed and designed the website in Drupal. Images were Photoshopped and added to the necessary pages. I also designed icons in Illustrator to use on a couple of the pages. CSS and Javascript were used to make the website more interactive as well as responsive.

Programs Used:

  • Photoshop
  • Illustrator
  • Drupal (CMS)

PEER Website

Redesigning USGBC.org’s Homepage

Earlier this year, I worked on reworking USGBC.org’s homepage. The main navigation was also reworked and was launched in conjunction with the homepage redesign project.

Previously, the homepage looked like this:

USGBC's website

As you can see, the logo and search box appeared right below the main navigation on every page. Thus the header took up quite a bit of real estate. The homepage itself had a carousel with banner images that were swapped out every few months.

I worked on redesigning the header so that the logo, search box, and navigational links all existed on the same line. For the homepage, instead of using a carousel, I worked on adding a video background with a text overlay and a call-to-action button. Here’s the final look:

USGBC's website

Overall, it was very exciting to refresh the look and feel of the website by making a few enhancements to the homepage, as well as the overall website layout.