Viget Inspire

Let me start by saying that I am not a developer. Sure, I can write some pretty solid HTML and CSS, but beyond that I defer to our great team of developers. So when I first heard about Sass, the right side of my brain freaked out. While the idea of Syntactially Awesome Stylesheets sounds pretty cool, I was afraid that Sass was going to make writing CSS more like programming Ruby, PHP, or Javascript. If you've been scared away from using Sass for the same reason, I'm here to tell you that nothing could be farther from the truth. Sass actually gives us some really powerful ways of writing CSS more efficiently.

If you're looking for a tutorial on getting started with Sass, this isn't it. You can find everything that you need to get rolling on the official Sass tutorial. This post is also less technical and more about my experience, some lessons learned, and a few tips from an actual project. I'll be referring exclusively to Sass 3, the latest syntax that is also known as SCSS. This new syntax uses semicolons and brackets to specify blocks of code, so any standard CSS file is already a valid Sass file. (You're feeling better already, aren't you?)

Continue reading "Sass: A Designer’s Perspective"

Leave a comment ( 15 )

With another Design Share event in the can we thought we'd share a taste of the evening's amazing talks for those who couldn't make it. Our format mostly stayed the same featuring 4 short-format talks (roughly 10 minutes each) ending in a panel-style round-up with all the speakers at the end. This time around we saw and heard about how design can lead the charge for grassroots campaigns, how design wishes can become scary (but awesome) realities, what it's like to start designing for the iPad and similar devices, and how to rise above negative feedback to extend a rebranding effort.

The Talks

• From Mood Boards to Manhattan: A Love Story by Katie O'Brien, Fleishman Hillard
• Running with a PUMA by Owen Shifflett, Viget Labs
• Designing for the iPad: Approaching Application Design by Sarah Samsel, Washington Post
• Brand Experience: A Syfy Story by Stefan Poulos, Pappas Group

To see an archive of these talks plus talks from our previous events go to DesignShare.org and follow @designshare on Twitter for updates.

Special thanks to our intern Joseph Le who designed the title sequence and produced the video from this event.

Leave a comment

When I came into web design fresh off the print world, I wanted to make innovative and crazy looking websites that broke a lot of rules to create unique experiences for users. However, I forgot all about the importance of user-friendly navigation, functionality, usability, and practicality. On a daily basis, I am constantly faced with the dilemma of designing for the web and print media. It's an ongoing challenge for a noob like me to bring creative concepts and aesthetics from both worlds together in harmony.

From a transitioning designer's point of view, I've noticed that a lot of web designers are constraining themselves by sticking with the same old and boring web templates that look reminiscent of their competitors. Web designers are starting to lose the traditional aspects and foundational elements of design that makes a design visually engaging. This includes strong hierarchy of information, great typography, a solid grid system, color theory, and captivating artwork.

We need to bring back innovation and pioneer new techniques to break the aesthetic norm in web design while still maintaining user-friendly usability. If you don't want your website to be another can in the assembly line, then perhaps you should look at some print-inspired websites that retain a lot of traditional design for inspiration.

Continue reading "Taking Traditional Design Concepts & Print Design Aesthetics to the Web: Advantages & Disadvantages"

Leave a comment ( 3 )

Last week, the W3C released an updated version of its HTML5 differences from HTML4 document. This is the second iteration of the text this year and the seventh overall since first being drafted in January, 2008.

The document is a tremendous resource to front-end web developers as it outlines only those items relevant to authors. If you've ever tried to parse a W3C spec (and lived to tell about it), then you know they are geared toward browser makers and not run-of-the-mill web developers (The Rest of Us™).

I just finished reading over the latest version of the "differences" document and thought it'd be helpful to jot down some thoughts on things I hadn't seen before when reading up on HTML5. For brevity's sake, we'll just cover the changes to markup. There's a truckload of new APIs that I'm hoping to cover in the near-ish future.

Continue reading "Recapping the W3C’s “HTML5 differences from HTML4” document"

Leave a comment ( 8 )

If you’ve ever been in a situation where you need to make modifications to a page or a site’s HTML, CSS or JavaScript but don’t have direct access to the source code, it can be pretty frustrating. Whether you're working on client’s live site or if you’re helping someone remotely, you have to somehow make the contents of the site editable locally.

There are tons of tools out there to automate the process of crawling a site and downloading all the necessary files. There are Unix command line tools like wget that have plenty of tutorials for downloading websites, and graphical interfaces like Net Vampire for Windows and SiteSucker for Mac OS X. But if you want a faster method with fewer files to download, the HTML spec has you covered.

Continue reading "A Little Debugging Magic with HTML’s Base Tag"

Leave a comment ( 7 )

Yep, it's me again. The pro-process designer who wants you to use smart objects and break those awful Photoshop habits. Are you noticing a theme yet? I love efficiency. And organizing. And most of all, organizing efficiently. So I've got yet another process-tweaking post for you, and this time it's epicly long and comes with free PSD templates. FREE PSD TEMPLATES, people. And I didn't just write that for the search traffic. They really exist.

This time I'm breaking down my techniques for designing large sites and sharing tools for efficient comp production. I'll walk you through my process, and then you can add your ideas to the mix.

Continue reading "Design For Efficiency: Photoshop Techniques & Templates"

Leave a comment ( 32 )

Renaissance: A rebirth or revival; an awakening; a fresh take

Woot... JS libraries, font embedding, CSS3, HTML5, and a heck of a lot of cool stuff is on the table. Designers are laying down some amazing designs, and the strongest stuff seems to have to do with better typography, more custom illustration work, super-elegant interactions and transitions, stronger foundations in user experience, and a return to design fundamentals.

It's awesome. There's huge potential. I'm overwhelmed...

Yep, you talk to a group of designers, and chances are good that a number of us feel we aren't exactly "waking up" with the movement. Somewhere along the way we've stagnated. We're checking out the yellow brick road, ready to dash down it, knowing we've got heart and will, but we feel stiff and rusty. What might have happened?

Continue reading "The Juices and The Flows Have Been Diminished"

Leave a comment ( 4 )