How To: Make The Viget Inspire Author Thumbnails
Since Viget Inspire blog launched, I’ve received a lot of questions about the little user thumbnails we made for the Viget designers. Is it just a Photoshop filter we slap on carelessly? Are they painstakingly drawn by hand and watercolored over a period of several hours? The answer is (unfortunately), neither as cool as hand-drawing or as easy as a filter, but we’ve got it down to a pretty streamlined process at this point.
Like the background “how to” post from last month, this tutorial has a lot of of textures and hues, manipulated and blended in the layers palette.
Continue reading "How To: Make The Viget Inspire Author Thumbnails"
Building Viget.com In EE (Part 2)
In my last EE post, I covered some ExpressionEngine tricks we used for managing multiple sites, removing the /comments URL segment, and setting up a simple “Preview” function.
This time, we’re going to use URL segments to create some dynamic user profiles, sort a portfolio page, and make a flexible upcoming event list.
How to Create Design Concepts in Rapid Fashion
Sometimes you need to get a bunch of ideas in a short amount of time. Its not always easy for one person alone (though easier for some than others). Collaboration is key whether it be collectively or individually within a working group of people. Team design is one of the benefits of working in an agency or inhouse studio.
In borrowing from an idea that originally began in partnership with some of my former colleagues, the design team at Viget recently embarked on our first Design Flash Mob (DFM). You may have heard the term 'flash mob' to describe wacky collaborative events such as massive pillow fights where a large group of people gather in a single place, fight each other with pillows and leave with a pile of feathers on the ground as a residual reference to the event. The basic steps of these events are as follows:
- Plan and promote in advance of the event. What do you hope to accomplish? When and where should this take place?
- Gather at the designated time and place.
- Act upon on what you set out to do.
- Disperse and reflect on the madness.
In the spirit of design synergy we can take these steps and use them to collaborate quickly on things like logo designs, t-shirt ideas or rethinking user experience problems. Plan to do something about a week out. Think ahead about what you might want to create. When the time comes you'll be ready to jump in and start designing in a rapid but refined way. Take a morning or afternoon to hold the event. At the end, take time to talk about it and share different perspectives on working under pressure.
Another important aspect of a design flash mob is that it should not be treated as a competition. Even if one design is to be chosen it should be a democratic effort including those who played a part in the event. Benefiting the greater good should be the goal. In effect, the whole is greater than the sum of the parts.
One great place to start with a DFM is to have several people participate in designing desktop wallpapers. They're simple to design in a short period of time and have no production costs associated with them. This is where we started on our first Viget DFM. The assignment was simple. Take an afternoon (roughly 4 hours) to assemble one or more desktop wallpapers within the given time and include the Viget brand no matter how big or how small. Everything else was left up to the designer's discretion. Planning ahead was ok but no one was allowed to begin until the start of the event. Additionally, you didn't have to be a designer to participate. Our design team consists of UX designers, visual designers and production specialists with a wide range of talents and skills. How you work within the guidelines is all that matters.
Continue reading "How to Create Design Concepts in Rapid Fashion"
Displaying Related Categories in ExpressionEngine
While working with ExpressionEngine on a client project, Doug Avery and I ran across a problem. We had a weblog full of articles, and we wanted to show a list of related articles on single entry pages. The key was using EE's related_categories_mode parameter, which pulls back entries based on categories in the entry.
The problem was that you can't nest weblog tags...so, the related categories tag had to sit outside of the articles weblog entries, and we needed a way to tell EE to only display the related articles at the bottom of full article pages.
This is easy enough if you just want to output them as standalone tags (for example, a group of repeating links), but gets tricky if you want to add a header, or place them as LIs inside a UL. Any markup outside the related_categories_mode weblog tag remains even if no articles are returned, meaning empty UL's and headers were showing up beneath every entry on the blog's index page.
We knew we wanted the UL and H3 to appear inside the tag, but in EE, everything inside a weblog tag repeats with each entry. With the H3 placed inside the tag, our full article pages were showing one header and one UL for each link which looks totally ridiculous.
The solution (which I largely credit to Doug) is to use a few simple IF statements to figure out when an article is the first/last in a list, and add then the necessary markup:
{exp:weblog:entries related_categories_mode="on"}
{if count == "1"}
<h3>Related Articles</h3>
<ul class="relatedArticles">
{/if}
<li>
<a href="{title_permalink="articles/"}">{title}</a>
</li>
{if count == total_results}
</ul>
{/if}
{/exp:weblog:entries}
Typography Tuesday: Hierarchy
Unlike print, the web is interactive; establishing a visual hierarchy through typography is essential in guiding the user to the information they are seeking online. Visual Hierarchy is the arrangement of elements in a gradual series in order of importance, enticing users to interact with a web site through visual cues. Typography online is less an element and more an interface, where characteristics such as size, weight, style, color, and location help the user to navigate the site through emphasis.
Typography Tuesday: Legibility
What is Typography Tuesday?
It is no secret that I love Typography. Typography is the cornerstone of design. In situations that don’t afforded the luxury of other graphical elements such as photography or illustration, typography can carry the design. Strip away all the bells and whistles of the web and you are left with type; make that type look fantastic under aggressive circumstances and THAT is bad-ass.
Back in February, I had the pleasure of speaking about web typography at DC Design Talks. I learned a lot of great things while developing the presentation, and I’ve tried to simplify some of those ideas to share with you each Tuesday until I run out. (Which could, theoretically, be never.)
Why Must The Shoemaker’s Children Go Without Shoes?
In a day and age when anyone can have a web site (or a blog), many designers just don’t take very simple steps to get their own brand online. A series of conversations I have had with fellow designers—and this AIGA article (which focuses on traditional marketing rather than online marketing)—have led me to ask, "Why don’t more designers market themselves online? Why don’t more have any sort of online presence?"
My college education included a heavy dose of "self promotion" projects; then, I got a second education in online word-of- mouth marketing while working at a PR firm. Over time, I have explored this avenue less for myself and more as a test bed. I’ve found that my site is the perfect way to be able to relate to clients trying to get off of the ground. Why? Because I can honestly say what worked—and what didn’t—for me, both personally and professionally.
When I tell a client, "I totally feel ya," I mean it. It makes understanding the client’s position on a project a whole lot easier.
Continue reading "Why Must The Shoemaker’s Children Go Without Shoes?"
Recent Comments
The capcha code was Ill and so is your work. ill....very good
- Haya on 'Creating Unique Shapes Using Actionscript'.
- Erik Olson on 'Creating Unique Shapes Using Actionscript'.
- Rainbow on 'Resizing rounded rectangles in Photoshop'.
Subscribe to Comments RSS