RWDTXST: A New Toolbox: Secrets from Happy Cog

By Christopher

In their A New Toolbox: Secrets from Happy Cog presentation at Texas State University, presenters Kevin Sharon, Design Director at Happy Cog, and Sophie Shepherd, Designer at Happy Cog, reveal Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way.

  • When kicking off a new web site project, talk to stake holders and the people at the front desk. They know where the weaknesses are in the company’s forward facing presence because they hear them every day from the customers calling in with questions.
  • Talk with client contact or liaison before kickoff meeting to get a feel for project and political landscape. This approach avoids walking into traps and reduces the chances of messing up the start of project.
  • Use survey tool like Ethnio to get site design feedback and generate leads for user testing later on.
  • Design involves a Character, Conflict, and a Resolution. The Character is the site users illustrated in a user profile. The Conflict is the problem with site or business. And the Resolution is the design solution you work with the client for the Character.
  • Give client 30 celebrity mugshots with goal to pick which ones fit business’s brand. Then use Style Tiles based on each celebrity.
  • Learn clients’ internal language and help them learn your design language.
  • No more wireframes. Build prototypes instead, but call them “HTML Wireframes” to avoid confusion that is how the site will look.
  • Tools to make quick HTML wireframes: Codepen for elemental pieces, grid systems, and roll your own for more customization
  • If you can’t click through it, it’s not a prototype. Prototypes are for user testing.
  • A sign of a good designer is that they do a lot of paper sketching as this is the quickest way to get the best idea.
  • Turn HTML wireframes into design modules.
  • Don’t just brush up an approved wireframe with type and be done. Go the extra step and design within that space.
  • Keynote resizes grouped elements in a way that Photoshop can’t, which makes it ideal for creating responsive design modules or element collages.
  • Involve developers’ input into the design process as they make a lot of decisions in the building responsive web sites.
  • Selling a design continues after you get the project. You have to get clients engaged, so don’t show design comps or other elements of the design process like you are showing an apartment.
  • Always have a reason for your design and each part of your process. Finding your reasons start with research.
  • Practice your writing skills to improve client communication as everyone on a team gets a direct channel to the client.
  • Realize that a good writer is someone who can organize their thoughts.
  • Add a small touch of humor when writing to clients. For example, tell them in passing on a deliverible, it’s National Margarita Day today. (Only works on February 22nd.)
  • Two things a designer has to get used is taking public criticism and realizing that clients will change a design after it’s handed over.
  • It’s not Responsive Web Design, it’s web design.
  • Every client needs to have a project manager to work with an agency. Projects that didn’t have a client liasion haven’t gone well.
  • Even if the client liaison or project manager is part-time, temporary employee for the client, it benefits the project as you need someone to filter email messages, be mindful of political landscape, work on deliveribles, etc.
  • Take sketches of HTML collages, scan them, and use them to compose different layouts that are then giving to client/design review
  • Use tool like GatherContent to, well, gather client content.
  • When working with clients on a project, expect: requirements, content, and feedback.

SXSW: Designing User Interfaces in Keynote

By Christopher

In their Designing User Interfaces in Keynote Workshop, presenters Joel Beukelman, Mobile User Experience Designer at Netflix, and Ted Boda,
Lead UI Designer at Netflix, demonstrate how to use Apple’s Keynote application to wireframe, create high fidelity designs, mockup interactions, create visual specs, simulate animations, and present all from one tool.

  • Use Keynote to wireframe, rapid prototype, create visual specs, use animations, and prototype hyperlink interactions.
  • Designers don’t make designs in a vacuum. Once you are done making those prototypes, you have to present and document it.
  • There are a lot of applications that help with all these activities, but Keynote does most of them.
  • When working in a collaboraitive spaces with many designers with Photoshop, designers are set up in layers and groups and how things are set up. This file structure complicates and slows communication between other designers and stakeholders.
  • Keynote provides DIY organization. Set up an initial set of slides, one each for the Project Name, the Project Summary, the Site, the Project Map, the Features.
  • Then flesh out different design sections for each Feature, give its own Feature Section. If there are several options or iterations, give each Option Name or Number.
  • Reference materials such as comps, visual spec, aniamtion, reference graphics and icons, etc oxycontin high. can be placed on their own unique slides—hidden at the end of the slide deck, but referenced as many times as you need.
  • Photoshop and Illustrator still have their place, but regulated to digital image creation.
  • Use Photoshop for preparing images.
  • Use Illustrator to create icons and other similar resources.
  • Shapes and text from Keynote, merging assets from Photoshop and Illustrator.
  • Once you have a slide showcasing a feature or design—and you need to make modifications, duplicate it and then make changes.
  • At Apple, they would produce a lot options and then whittle it down to the best solution.
  • At Netflix, they do about four options and then do user testing to determine the best solution.
  • In Photoshop, you can spend all sorts of time making a high-fidelity design, whereas you can build a design in third of time, tell that story to stakeholders, lock it down, and then go to Photoshop.

Facebook to Introduce Hashtags

By Christopher

According to the Wall Street Journal:

Facebook is working on incorporating the hashtag, one of Twitter’s most iconic markers, into its service by using the symbol as a way to group conversations, said people familiar with the matter. It is unclear how far along Facebook’s work on the hashtag is and the feature isn’t likely to be introduced imminently, these people said.

Why does Facebook need hashtags? One answer can be found in these statistics:

  • 38% of Superbowl 2013 commercials included a Twitter hashtag. 
  • Only 7% of Superbowl 2013 commercials mentioned their Facebook link, which is a decrease of 4% from Superbowl 2012.

Why also do this? The kids aren’t on Facebook and Facebook needs to get the kids back into the picture. 

An improved hashtag search not only allows brands to reach more people, but opens up Facebook users to find other users outside of their circle of friends and family.

In short, Facebook becomes more interesting to more people by being more open.

SXSW: The Economy of the GIF

By Christopher

In their Economy of GIF panel at SXSW 2013, Mark Portillo (Self-employed) Jimmy Repeat (MTV) Ferndano Alfonso III (Daily Dot) and Lindsey Weber (Writer) talked about this artistic side of GIFs and how it has opened up new avenues for artists and with it the potential to earn a living.

  • SXSW Panel Twitter Hashtag is GIFecon
  • Most people in the crowd pronounce GIF with a hard G. They seem to be okay being wrong.
  • Tools that they use to create GIFs: GIFshop, Photoshop, Flash, After Effects, Cinegram, IShowU, Slingbox
  • Life GIFs is the art of quickly created animated GIFs from live video.
  • Rubbable GIFs allow for control of the playback of an animated GIF.
  • Jimmy Repeat: We don’t make just GIFs, but repeating animations
  • Mark Portillo: DJ takes existing music and makes something new. Doesn’t mean the musician is better than the DJ. Like those that make GIF animations.
  • MP: GIFs exploded when Tumblr came out with thie “GIF Feature”.
  • Lindsey Weber: “Reaction GIF” is popular to put in these types of GIFs. You can search by emotion.
  • Ferndano Alfonso III: Can you make a living making this GIF animations?
  • JR: We don’t just do GIFs. We are designers. If we only did GIFs, it would be a painting in border colors. As a designer you have to wear multiple hats. From being the director, shooting your own videos, doing the After Effects.
  • LW: As a freelance writer, people who hire you you have to do many things. “Can you make a GIF?” And I know what they mean.
  • JR: GIFs add another level of attractiveness for your eyeballs.
  • LW: Where is the Stockphoto GIF store?
  • JR: GIF is the moving artform. There’s going to be LEDs everywhere. The repeating image is always going to be there. And with people finding more and more uses for them.
  • MP: It’s always going to be around. Like a pair a Converse. Always a classic.
  • LW: It’s hit it’s peak now. Vine is Twitter’s answer to GIF popularity, but it’s jarring to have audio with it.
  • JR: This room is packed. People love making GIFs, so the marketers are going to be there.
  • LW: The fate of Tumblr and GIF are intertwined.
  • LW: Live GIFfing of events gets around rights issues for videos because it’s less policed.