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

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.

WDI Day Four: Portfolio Website Lab

Today was our first lab day. We started off with a lesson in Git, and then off we went to work on building a site for our portfolio. I’ll admit, I’m at a bit of an advantage when it comes to working with layout. Since I’ve had extensive experience in web design, I happily tackle styling whenever it comes up. I managed to style the basics for my overall portfolio site during the day, and started thinking about how I’d like to rollout JavaScript as a later functionality.

Things to add later:

  • Tabbed browsing for portfolio sections (web, application, and illustration)
  • Sorting filters
  • Transitions for the anchor links
  • Additional scrolling animations
  • Making the site mobile-friendly

Overall, I felt like I accomplished a fair amount, however I’m more excited about starting JavaScript tomorrow since today was yet another review day for me.