USGBC STUDIO Website

Project Details:

studio.usgbc.org
This was a collaboration with one of the designers on my team. I worked on developing the user experience and framework. The other designer worked on fine-tuning and editing the overall look.  I also worked on customizing a WordPress theme so that our non-coder team members would be able to make updates to the website.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • WordPress

Studio USGBC

Studio USGBC

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

Marketo Landing Pages

Project Details:

USGBC uses Marketo to collect user submitted information for targeted marketing. Although Marketo makes digital marketing easier, the platform isn’t mobile-friendly. The drag-and-drop designer makes it easier for non-coders to create landing pages, however it makes it difficult to create responsive and easily adjusted pages.

I worked on editing the CSS and found a workaround for targeting the long and obscure classes that Marketo’s designer automatically generates. I then created templates that our creative team could use to make responsive and mobile-friendly landing pages.

Programs Used:

  • Marketo

Marketo Landing Page

Marketo Landing Page

marketo-landing-page-1-mobile

Marketo Landing Page

Megan Coyle: Collage Artist Portfolio

Project Details:

mcoyle.com
I created this website for my studio collage work. I designed the logo myself and took pictures of the artwork. Aside from designing the site, I have managed and maintained it since 2007.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • Illustrator
  • InDesign
  • WordPress (CMS)

Megan Coyle Collage Artist 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

New Video Background for USGBC

Every now and then I get design-related projects with my work at USGBC. The other day I worked on cutting together videos of buildings for a new video background on USGBC’s main website. I added a consistent filter so the videos would look somewhat similar. I haven’t worked too much with video before, so it was interesting putting together something with iMovie. It’s inspired me to make a few videos for my studio art-related work sometime in the future.

USGBC building

USGBC building

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

Yoda Speak

I can’t believe it’s been nearly three weeks since I completed the WDI course. In an effort to make sure I’m staying sharp with my coding skills, I’m going to try to complete coding challenges every week and create a new app every month. Will I succeed with living up to those goals? I sure hope so!

I am also combing through my previous class assignments from WDI to try to find ways to refactor my code or polish existing work into more functional applications. So recently I decided to revisit a Yoda exercise we did. Using vanilla JavaScript, I created an application that utilizes the Yoda Mashape API for translating text into Yoda speak.

You can view the live app here and see the Github repo over here.

Yoda Speak

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.

WDI Day Fifty-Seven: Project Week 4, Part 5

Using Rails and JavaScript for my project has proved to be a good move. Instead of struggling with the technology and building out an application, I have been able to focus on building out my app.

Today was a pretty successful day – I created icons for all of the different sections of the site. I also found a fix for the weird offset issue I was running into. I also added the ability for users to change the difficulty level of the puzzles they created. Overall, things are slowly falling into place, and I’ve successfully launched all changes to the deployed app on Heroku.

puzzle-me-pictures-screenshot