Colds. Remedies. Web Designs.
So I've had a nagging cold for two weeks now, and I'm one grumpy Crumpy. I might write up my persona as: thirty-three year old web designer, tired and a bit on the cynical side, coming to pharmacy site hoping to find a good cold/flu product via some effective design. I'm overly touchy (because of a 2-week cold) and I'm overly analytical (because I'm writing a blog post).
I recently visited 4 sites:
Here were my generally subjective evaluation questions:
- How do I respond to the overall visual approach (layout, colors, typography, hierarchy)?
- How appropriate does the home page feature area feel? Does it inform or annoy?
- Does the main product page make it easy to get a comparative overview of what's available?
- Are the tools for narrowing my remedy search effective, focused, and fast?
Using the Flickr API: We Don’t Need No Stinkin’ Badges
Earlier this week Flickr posted on their blog that the three billionth photo had been uploaded, so I thought this would be the perfect time to promote Flickr's services some more. A while back I wrote about pulling Flickr images using jQuery, but in that example we were using feeds provided by Flickr's services. Feeds are great because they don't require an API key, and with response formats like JSON, its become relatively easy to parse out the information coming in. The downside is that you can only work with the information within the feed you're pulling. Plus, that post was mostly about using jQuery and may have been a little much for most people who just want to simply pull images from Flickr. In this post, I'll show you how to easily use the Flickr API to display pictures on your site.
The Easy Way
Flickr offers a free badge creator because anyone with a Flickr account wants to show off pictures on their website. After answering some questions about how you want your badge to look, you get a tailored JavaScript include that you can just paste into your HTML and have pictures display on your page. This is really easy for anyone that just wants to show a couple photos on their blog, but doesn't feel like learning about the API (which as you'll see later is super easy). For example, here is what a personal badge (from Flickr user "vigetinspire") might look like:
Continue reading "Using the Flickr API: We Don’t Need No Stinkin’ Badges"
Overcoming Inspiration Overload
We've all heard of information overload, and most of us recognize that too much data overwhelms rather than educates. It kills our efficiency and distracts us from important tasks. With so much information at our fingertips, even small decisions become difficult. I can lose hours of time on Good Reads sifting through reviews trying to decide what book I should read next. It's fun and interesting, and my choice is well-informed, but I used to visit the library and choose something off the shelf in 5-10 minutes. Is the trade-off really worth it?
Lately I've been noticing a similar phenomenon while designing. The explosion of great CSS galleries and design blogs out there has made it impossible to feel "caught up". There are so many cool things out there to discover... and the possibility of missing something eats at me.
Under Pressure: Lessons Learned from 48 Hours of Design
The weekend before last, I participated in Rails Rumble: a 48-hour contest between small teams of Ruby on Rails developers worldwide. Viget had members in four of the teams, and everyone really delivered (you can read more about the others here). Our team (Patrick Reagan, Nicholas Schlueter, Rob Ares, and myself) built Qflip, an app that randomizes your next Netflix rental with the help of an anonymous community.
Working closely with 3 developers (photographic evidence) on a tight timeline was a unique experience, and it forced me to rethink a lot of my web design processes. While these lessons specifically apply to tight design projects, in some sense, every project is a tight design project: It never seems like you have enough time or resources to get the results you want.
So, here are a few thoughts I had on designing with developers, designing within constraints, and designing for maximum impact with minimum resources:
Continue reading "Under Pressure: Lessons Learned from 48 Hours of Design"
Superfamily Font Roundup: 40+ Serif and Sans Font Pairings
For some reason, it remains difficult to hunt down font families that have a serif and sans-serif combo. As far as I have found, none of the font sites allow you to search by this designation, yet it seems quite useful to utilize the hard work of typographers who, with great attention, have designed sets that work in this capacity. I'm not a huge student of typography, but I do understand that there's some grumbling about the use of these pairings, that using them produces less-than-ideal results or reflects a bit of laziness. I get it, and agree that some of the best combos are hand picked, but this post isn't about that. There are plenty of other font pairings that don't share a family, that work together because they contrast nicely, but again maybe a different post. This post is simply put together to identify what is available in the event that you're needing a quick sans/sans-serif harmonious combo or you're looking for wider variations within a single family style.
There isn't a clearly standardized name for serif/sans-serif paired families, but from what I can find, superfamily is the term most commonly used. You may also find references that use the terms suite, hyperfamily, type system, or family group. Following is a list compiled from other posts that I found and personal font searches. Please share superfamilies that you know of that didn't make the list, and I'll be glad to add them.
Continue reading "Superfamily Font Roundup: 40+ Serif and Sans Font Pairings"
Load Selections with Channels in Photoshop
I was working on a project the other day that took advantage of a technique very similar to the one used in the image above, and I realized that I haven’t seen any tutorials online that really explained this process, so I figured I would share it in the case that you’re ever interested in achieving a similar effect. It’s also a chance to go over exactly what channels and load selection can do for you as a designer working in Photoshop.
Channel controls aren’t just for color/plate separation. We can wield the power of channel selection to capture elements of an image—very similar to creating paths—and apply them to our design. This can come in handy when you want to do anything from knocking out a white background from a logo, to creating true monotone images right in a RGB PSD file. The uses are endless. Load Selection, on the other hand, is a slightly more hidden feature, though just as powerful as Channels. You might know Load Selection through the use of paths you’ve created in Photoshop or imported over from Illustrator. Loading a Selection in tandem with a Channel works pretty much the same way. With that said, on to the tutorial.
Continue reading "Load Selections with Channels in Photoshop"
Viget.com gets iPhone-ized
Throughout the year the team here at Viget embarks on numerous internal projects aimed to expand our expertise. With that thought in mind, we just recently designed an built an iPhone-specific site to accommodate the majority of our mobile users. The overall process was an enjoyable one. Here's a glimpse of how the project came together.
Recent Comments
Great review!!!
Very important information.
Thanks for sharing
- psd to xhtml on 'Switching Mindsets: From WordPress to ExpressionEngine'.
- Menachem on 'New Year, New Web Design Goals'.
- Simon Raybould - presentations training on 'An Age of Presentation: Styles, Trends, and Trendsetters'.
Subscribe to Comments RSS