Website Design & Coding

As a designer that can hand-code HTML, CSS, and jQuery I am able to simplify the finally delivery. From breaking down of assets to creating the base HTML, CSS, jQuery files to be handed to the developers for integration on the production site. I have experience using framworks such as HTML5boilerplate, zurb foundations, and bootstrap to name a few. I help to bridge the gap between designers and developers whether it is my work or my fellow designer’s work.

ChristianMingle responsive mock

ChristianMingle’s landing and splash pages had not been updated for several years and was not responsive. Our goal was to modernize the look of the front-end and put our success stories front-and-center to show potential subscribers that our site actually works.

Using these mocks the front-end developers coded our splash page and I coded our landing pages for our marketing efforts (which were on a different system). I also helped the front-end developers to refine their CSS, better transition elements on the responsive side, and QA the work they did.

Responsibilities: Mocks, QA, Refining Dev CSS | Application: Photoshop

ChristianMingle Landingpage

faith.com responsive code update

faith.com was not a responsive site which caused issues with our usability and advertising efforts, namely overlays and banners. Not having the developer resources available to code a responsive verison, they asked me to handle it.

Using Zurb Foundations, I updated the front-end code to be responsive – unfortunately, we did not have the back-end resources to create the templates from the final code and push it to production.

Responsibilities: HTML, CSS, Sprites | Applications: Sublime Text, Photoshop | Framework: Zurb Foundations

spark02

ChristianMingle Prelaunch Campaign

We wanted to excite our customers about the newly re-designed ChristianMingle. To do this, we created a prelaunch campaign to get them excited about the new improvements. This was designed to entice new and old customers to sign-up, or resign-up, so they could experience the new changes.

In addition to the banners, emails, and overlays promoting this change we created a responsive website to promote the new features and look. I coded this and placed it on production working with systems to ensure the promotion URL worked and the site was up and running correctly.

Responsibilities: Design, HTML, CSS | Applications: Photoshop, Illustrator, Sublime Text | Framework: Bootstrap

JDate Redesign

With the redesign of JDate, we also needed to redesign our static pages, such as the logout page, maintenance page, and 404 page. I redesigned and coded these for us using a combination of original illustrations and stock illustrations.

Responsibilities: Design, HTML, CSS, Illustration | Applications: Photoshop, Illustrator, Sublime Text

PuppySpot Responsive Website

PuppySpot has some great developers, however they needed assistance with the front-end development because they needed this done quickly and correctly. Since there was a time crunch and the mocks were being finished and approved they were immediately sent to me. Then, as I received the mocks, I coded the pages refactoring when needed to create and handed them off to the backend devs so they could do their work.

Responsibilities: HTML, CSS, COMPASS (SCSS) | Application: Sublime Text, Github

Volunteer Center Website

Working with another front-end dev who focused on the CSS and a backend dev who setup the functionality to third party APIs, I focused on the structure of the HTML and connecting the header with the Facebook API to pull elements from our volunteers that signed up to let us access their information and then display it in a wall. The wall worked by pulling the profile photos from Facebook and then associating their Facebook IDs to their quotes which would appear when a user clicked on a profile image.

Responsibilities: HTML, PHP, jQuery | Application: Sublime Text

UCLA Vounteer Center Website