I'm Joel. I and I eat, sleep, and dream front-end development and design. In fact, sometimes I code in my sleep (whether I like it or not). Then I wake up and eat Drupal for breakfast.
I have been developing/designing with CSS since it became mainstream. As CSS3 came to reality I was an early adopter and wrote many JS poly-fills for IE. Now that CSS Preprocessors have came into the mainstream I have used them to increase my productivity. I like LESS but I love SASS and Compass.
Working with many government clients over the years, I have developed deep experience in Accessibility 508/WCAG compliance. I also love that tedious stuff. I am always checking the contrast ratio of text, WAVE Web Accessibility Tool, and text equivalents when necessary. A website created with accessibility in mind will always be easier to view and use on touch devices. Principles like contrast ratios and larger touch targets go hand in hand.
When all these skills combine, they create high-fidelity prototypes that are fully functional static websites that the client can click through to see all the different page types. My high-fidelity prototypes are scalable and are ready for back-end developers to build on. I have experience making prototypes that get implemented in CommonSpot, Ektron, and Drupal. Although, for Drupal it is usually more efficient to go straight from comps to theming and skip the traditional HTML/CSS prototype phase.
As part of my initial meeting with the client I have a Creative Session. This requires and open mind and listening skills. This is how you learn the clients branding requirements, frustrations with the current site, and hopes and dreams for the new site. This helps discover general required features and page types. During this initial meeting I show them other sites and get their reactions.
I compile the results of this meeting (and sometimes surveys) into a comprehensive Creative Brief. All my creative briefs include results form the meeting, wireframes, review of Google Analytics data, and create user-personas. The amount of detail depends on each client situation. From this document I can sum up vague ideas of what the client envisions the into concrete digestible document. These documents can be sent the design to any designer and they will have all the background necessary to make comps.
Wire-frames & Low-Fidelity Prototypes
Solid tested wire-frames are the foundation of good design. I put wire-framing in two categories: interactive wire-frames and non-interactive wire-frames. For non-interactive low-fidelity wireframes, I have used paper and pencil, Balsomic, or Adobe Illustrator. For fully interactive low-fidelity wireframes, I use straight HTML5/CSS3 or Axure Usually these wire-frames will also include a wire-frame for narrow viewports (mobile devices).
Understanding the concepts and the trends in design is key in delivering relevant designs. Each new wave of design is a reaction to the previous status quo. Seeing and understanding why the trends occur is critical to make forward thinking design. In the last 3 years, we have seen the evolution of skeuomorphism to flat design (most obvious example is the Apple's change from iOS 6 to iOS 7). My Certified Usability Analyst training allows me to analyze the effect of these new trends as it relates to usability.
Responsive Web Design
Mobile-First helps UX/UI professional and clients focus on core content and functionality. Its important to understand that we live in a world of evolving touch devices, like phablets and laptop tablets combos. Making mobile-first sites you are future proofing you site against the next wave of devices. A side benefit of making good mobile first designs also helps with creating accessible designs.
Drupal Theming & Front-end Developer
I am actually a Drupal Themer. Not just somebody who finds a theme and changes colors. I can take any PhotoShop document or wireframe and turn it into a fully responsive design. I start with a basic theme like Zen with ZenGrids and create a proper sub-theme following Drupal best practices. Using api.drupal.org I can write my preprocess functions to make customizations if necessary.
Design & User Experience in Drupal
Having a background hybrid background in both development and Usability (Certified Usability Analyst) I can make practical UI/UX decisions that benefit both the end-user, the developer, and the client. For example, after gathering requirements from a client I can compare the features of an existing module against the features needed for a client. If they match it can be wire-framed to match the existing modules design pattern, saving both time and money for everyone.