As a User Experience Engineer and Designer, Front-end Developer, and Drupal Themer, Andrea provides the foundation for our team to put the user's needs first and ensures that great design will create this experience. She also brings extensive experience creating effective and useful sites for the multilingual web. Andrea previously worked for Meedan, where she designed and authored community websites for English-speaking and Arabic-speaking users.

www.twitter.com/andreaburton

www.github.com/abelb

drupal.org/user/489442

Last day to submit for User Experience Track at DrupalCon Portland 2013

2 min read

For the first time ever, DrupalCon is featuring a User Experience Track. We will have 13 sessions discussing User Experience Methods, tools and philosophies.

Today, Friday February 15th, is the last day to submit sessions for DrupalCon. Get your sessions in!

UX Track Featured Speakers

We already have 3 Featured speakers planned for the track:

Here is our focus for the User Experience track.

The User Experience process is key to the success of the development of websites and web applications. From user research, interviews and analytics, we learn what the user actually wants and needs; not what we assume they want. At this year's DrupalCon we present a new User Experience track to show our community's dedication to user needs.

Main Themes

  • Explaining what user experience is and why it’s important
  • UX for mobile and tablet, Responsive UX
  • Speeding up the design process using UX tools and techniques
  • UX for multilingual sites - especially RTL
  • Content Strategy

Audience

  • UX professionals - Drupal
  • UX professionals outside of Drupal
  • Backend devs that are interested in UX
  • Frontend devs interested in UX

, ,

Building Drupal Style Tiles using Foundation and SCSS

5 min read

This past weekend, Pacific Northwest Drupal Summit in Seattle, WA, was buzzing with talk of Foundation, an amazing responsive web framework built with HTML5 and SCSS.

I led a session on Building Drupal Style Tiles using Foundation and SCSS and provided sample code for attendees to download and install to create their own style tiles.

Original video is available on YouTube.

What are Style Tiles?

Style Tiles are not a new concept in design. Graphic and interior designers often use Mood Boards or similar deliverables to develop aesthetics before beginning design. Everyone can now style tile-ize whatever they want - Just sign up for Pinterest and start pinning and you too can create a palette for your new living room or create a palette of cute baby animals. (Why I really love Pinterest)

Style Tiles for the web were made popular by Samantha Warren of Twitter. She has developed the site styletil.es which discusses the value that style tiles have in the design process and provides a Photoshop template download so you can create your own tiles. She has written a great article on A List Apart discussing the style tile process.

I have used Photoshop style tiles in multiple projects and have found them to be an invaluable step in the design process. By creating style tiles, a designer is able to flesh out multiple palettes, typography choices and design patterns without having to take all the time it takes to design an entire homepage. I especially love creating the different patterns and only giving the user a "sneak-peek" of these patterns. Once the client chooses the option with which they want to move forward, the style tile process makes it easy to duplicate the Photoshop layer patterns and begin the homepage design.

One thing I have removed from my style tiles is the descriptive adjectives. I have found that they are distracting to the clients and that often, the clients focus more on the words than the design.

Creating Style Tiles Using HTML5 and SCSS

This summer while sitting on an airplane and designing a style tile in Photoshop, I thought to myself:

"Wouldn't it be cool if I had a style tile built in HTML that I can just plug colors and other stylistic elements into SCSS variables and create an interactive style tile?"

And…

"Wouldn't it be cool if I could build style tiles that use Drupal HTML code that I can style and then reuse code and mixins in my site's theme? "

And...

"Wouldn't it be cool if those style tiles were responsive so that the client could get a feel for how elements change in different devices?"

At the same time, I had just discovered Zurb's Foundation web framework and was totally swooning over it. I still am.

I immediately closed Photoshop, downloaded Foundation and started coding.

What is Foundation?

So what is Foundation? Foundation is, and I quote Zurb on this (and totally agree), "The most advanced responsive front-end framework in the world."

Foundation is written in HTML5 and SCSS to provide a responsive open-source code set that developers can download and use for prototyping or site building.

Foundation comes with a huge list of features. Some features are:

  • 12-column typographic grid designed to work on almost any sized device screen
  • Typography based on a golden ratio modular scale
  • Multiple button styles, patterns and sizes plus hover and active states
  • Custom form styles with validation states and checkbox/radio styles
  • Multiple navigation styles with drop down support and configurable for responsiveness
  • Responsive image or content slider
  • Modal Dialog

Whoa. So great!

Building the Style Tiles in Foundation

Download Style Tile Code

I use Foundation to create the two-column responsive layout. I have created two different directories. One is called base, the other is called example. Each style tile shows and defines the style for the following elements: typography, swatches, link styles, button styles, tabbed navigation, tags, pager and status/warning/error messages. I have included app.scss and settings.scss and modifed specific settings in settings.scss to define colors and fonts.

I created tile.scss to provide the layout and the swatch mixin for the style tile. I have also included an empty overrides.scss for any new styles.

Base Style Tile

The base style tile shows Foundation in action using its default colors and styles.

In the example style tile, I have removed the Foundation classes on HTML elements and I added styles to the overrides.scss. These styles and mixins are intended to be the code that a front-end developer can use in their Drupal theme.

How can these style tiles be used?

During the presentation at Pacific Northwest Drupal Summit, the group and I discussed the different potential usages of this code. Straightforward, these style tiles can replace Photoshop based style tiles. While the designer may still do a bit of work in Photoshop, the presentation of the style tile will be in HTML.

We thought that this could be a tool to help facilitate communication between designers and front-end developers to help clarify how the design is carried out into interaction. This tool could also serve as a client deliverable to show how fonts will render, allow the designer to showcase different webfonts and demonstrate how specific elements will change with user interaction.

Potentially, as a Drupal-specific project, we can access the Styleguide module through hook_styleguide() and hook_styleguide_alter() to modify the Style guide output so that it contains style tile elements such as color swatches.

I would love to hear any other ideas people have. Please download, fork and add bugs or questions to the github queue if you have any issues.

, , , , ,