Improving the Web Design Process Through Style Tiles


As a veteran (translation, old man) of the web design business, I can confidently say that one of the most stressful points in any project is when new design concepts are revealed to stakeholders. Back in the old days, web design projects would begin with a kickoff meeting that would focus on gathering design direction from your stakeholders. They would show you some websites they liked and didn’t like. And then the designer would go off and bury her or himself in Photoshop for weeks until the big reveal — all with very little stakeholder interaction. (Note, content was rarely, if ever discussed at these kickoffs, another issue with the old school web design process).

After basically being invisible to our stakeholders for weeks, we would reconnect at the largest and most anticipated meeting of the project to reveal our webpage concepts. While the feedback might be positive (thanks mainly to our talented designers), the list of changes was usually long. Often times, the stakeholders would want to mix the elements between concepts, taking the header from Option A, the footer from Option C, and the typography from Option B to create Option Hell No. Hopefully, this does not describe your current web design process. But if it does, don’t fret. You can change it.

Several years ago, designer (and all-around great person) Samantha Warren created a new web design deliverable, style tiles. Style tiles are intended to show stakeholders specific elements of a web design before any webpage mockups are designed. These elements are typically fonts, colors, and certain interface elements. The purpose is to get feedback sooner, crucially before spending long hours creating a pixel perfect website or application. As Samantha puts it …

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.

An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

Teachstone Style Tile

Style tile for teachstone.com

We started using style tiles at the beginning of 2015 and it has significantly improved our web design process. Here’s how:

  • Style tiles help form a common visual language with our clients, which is then used throughout the rest of the project.
  • Because they are less time intensive than full website mockups, style tiles enable designers to share their ideas with stakeholders fast.
  • Style tiles can be modified quickly based on stakeholder feedback.
  • Style tiles set clear expectations and eliminate surprises, minimizing the risks and decreasing time associated with the webpage mockup reveal.
  • Last, but not least, style tiles are easy for stakeholders to understand and process.

Tera Think style tile

Style tile for terathink.com

Adding style tiles to your web design process is not entirely without its complications. Here are a few tips we’ve learned along the way:

  1. Style tiles should not be used to define page layout. Leave that to wireframes.
  2. Once a style tile has been approved, it should lead to only one webpage design concept. One of the goals of style tiles is to decrease time spent on webpage mockups. With an approved style tile (coupled ideally with a wireframe), you should be able to put together one solid home page design concept that contains very little surprises.
  3. Stakeholders might like what they see so much that they want to see more. Remember, stakeholders are used to webpage mockups. Remind them that those will be coming, but the scope of style tiles is limited to specific elements.

Style tile for Stop Texts Stop Wrecks

Style tile for stoptextsstopwrecks.org

Once you and your client are fully up to speed with what a style tile offers a project, these issues are easy to avoid, especially when you combine style tiles with other UX deliverables, including wireframes and webpage mockups.

Once this happens, style tiles will help you decrease time, minimize confusion, and clearly set expectations with your stakeholders during the web design process.


Originally published at Storyware.

It’s Tom Tom Week!

It’s the week of Thomas Jefferson’s birthday, which means the Tom Tom Founders Festival is back. Tom Tom is a week-long celebration and collision of music, art, innovation, and food in Charlottesville, Virginia, which is just a few miles from where Jefferson was born in Shadwell, Virginia.

Enough about history though. We are excited about the future, specifically the immediate future. Today is the first day of Tom Tom, and the festival continues through Sunday, April 16th.

There is so much that goes on at Tom Tom: it’s like SXSW before it jumped the shark. In order to get a full picture of everything that’s going on, spend some time on their website in the next day or two. Shameless plug: Storyware designed and built it. In the meantime, here are our can’t miss events:

Future Forum, Wed 4/12 (6–8pm), The Paramount Theater


For anyone passionate about the Future of Charlottesville — its economy, culture, and community — this forum is for you. The region’s most visionary leaders share what they see for the future of the city and how to encourage creativity and entrepreneurship for the decades to come.

RSVP on Facebook


Modern Web Design Using Sketch and InVision, Th 4/13 (4–5 pm), Studio IX


Learn tips and tricks to save time and create better designs with Sketch and InVision. Page Wood and Todd Wickersty from Storyware will walk you through the modern web design process, starting with content and ending with clickable prototypes.

This is a workshop aimed at UI designers or graphic designers who want to work more on the web and mobile.

More Info + Tickets


Founders Summit, 4/13–15, The Paramount Theater


Hear from over fifty inspiring speakers at Innovations in Energy, Innovations in Democracy, all day at the Founders Summit and the keynote workshops.

Use our exclusive code STRYWRE to take $80 off tickets.


Design + Branding Luncheon, Fr 4/14 (12–1:45pm), Commonwealth Restaurant & Skybar


Craig Dubitsky, founder of eos Lip Balm and Hello Products, was such a great speaker at last year’s Tom Tom that he had to be brought back. Join Craig, graphic novelist, Roye Okupe, and Storyware co-founder, Todd Wickersty, over lunch at the Commonwealth Restaurant & Skybar. We will be chatting about the art of delighting (not disrupting) an industry from the friendliest founders and firm believers of beauty in the mundane.

More Info + Tickets


Tech Mixer, Fr 4/14 (5–8pm), Lee Park


Have a beer with Storyware at the Tech Mixer in Lee Park. It’s the perfect way to start your Tom Tom weekend. Meet up with our entire team at our tent, and did I mention beer?

More Info


Originally published at Storyware.

storyware:

acac Fitness and Wellness Centers are both beautiful and outstanding facilities. They are not what you picture when you think of “the gym” and that’s exactly what acac founder Phil Wendel set out to do. acac caters to all ages with a plethora of activities and programs at multiple locations in Charlottesville, Virginia, Richmond, Virginia, and West Chester, Pennsylvania. 

From summer camps to swim lessons to physical therapy to racquet sports to group exercise classes, our challenge was to present this massive amount of information in an intuitive manner on all devices.

Read our story.

acac – An Exercise in UX & Responsive Design

It’s great to finally see our largest project from 2014 out in the wild and being used by so many people. 

storyware:

Behold: Radiant the newest premium Tumblr theme created by Storyware.

Radiant is a beautiful high-resolution, responsive theme that works just as nicely for text-heavy blogs as it does to showcase stunning images in a seamless single column design.

In addition to looking great, Radiant features:

  • A big, beautiful header image.
  • Tons of customization options for colors, fonts, and image display.
  • Integration with Instagram and Twitter to keep your fans up to date through all your platforms.
  • Sticky Post to highlight your top content.
  • Sharing via Facebook, Twitter, Pinterest, and Google+.
  • Quick and easy Like and Reblog buttons on each post.

Radiant is on tap in the Tumblr Theme Garden for $49. 

Like our other themes, Radiant includes free support. Need help? Just email help@storyware.us.

Try on Radiant now!

Announcing Radiant

I’m using it on my blog now.

Learn By Example

I’m not a conference junkie, but I make sure to hit one, maybe two, a year. Brooklyn Beta has been my choice of conferences the last two years. Fictive Kin runs the conference and does a tremendous job. It is the best conference I’ve attended.

Last year I volunteered my time for Charlottesville’s Tom Tom Founders festival by contributing to the programming (securing speakers, not writing code). Tom Tom and Brooklyn Beta are totally different events, but there is one big overarching similarity. Brooklyn Beta celebrates making/working on something that you love. That’s why many people become entrepreneurs. Tom Tom’s innovation track focuses on founders, start-ups and entrepreneurship. Two weeks ago, Tom Tom launched Founding Cville, a program that recognizes founders from our community.

Brooklyn Beta was such a good conference because: 1. It was extremely well run. I mentioned that already, I know. Hats off to Chris and Cameron and the entire team behind it. 2. It was not too expensive. The price was $299. 3. It had an atmosphere of intrigue and surprise. There is very little promotion leading up to the event. The website is always very simple. You also have no idea who is speaking until they take the stage. 4. It celebrated Brooklyn through its vendors and sponsors. 5. We, the attendees, were always the focus. Instead of head shots and bios of the speakers, the website displayed all of the attendees’ Twitter bios. The conference provided long breaks for us to socialize and meet new people. We had two hours for lunch, an hour in the late afternoon for beer, whiskey, and rainbow sprinkles, and the first talk didn’t even start until 11 giving us plenty of time to walk around, drink some coffee, and see who was there.

I think the innovation portion of Tom Tom can take a few cues from Brooklyn Beta. Obviously celebrating local has always been in the forefront. The fall block party last month was a great example. That could spill over to the innovation track with a local food truck serving lunch and a local beer sponsor providing afternoon beverages. Give the attendees an atmosphere to engage with one another instead of making it all about the speakers and the topics.

Even though Charlottesville is a great place to visit, the fact remains that it will always be much more difficult to get here than Brooklyn or Austin or Portland. Thus it’s going to be harder to pull in people from outside our region to attend. So let’s focus on getting a few out-of-towers as the speakers to entertain and enlighten the local (and regional) design and tech community here as attendees. The best chance to put fannies in seats is by targeting local design and tech professionals In Charlottesville, Harrisonburg, Waynesboro, Richmond, Culpeper, Lynchburg, Roanoke, and DC.

Finally I think the innovation track should provide talks that are focused on stories of creating, building, and founding something that someone was driven to do. The brand name doesn’t matter. What matters is their story. Find the best stories to inspire the crowd, mix in Mudhouse coffee, The Bavarian Chef for lunch, background music courtesy of WNRN, Wild Wolf on tap, and that crowd will keep coming back to celebrate entrepreneurship in Charlottesville on Thomas Jefferson’s birthday.

via https://dayone.me/U2Tzf1