Samantha Warren, ON THE TOPIC OF Tips and Tricks White space (or negative space) used with typography enhances its legibility and makes it more inviting for the user to interact with it, so why not use more? A common mistake for many designers and developers is to fill the page with as much stuff as they can. If you walked into a room and everyone was talking at the same time, wouldn't it be difficult to pick who you wanted to talk to first? Less is more. The cleaner your body copy, the better it will make it for users to comprehend what they are reading.

Continue reading "Typography Tuesday: Let it Breathe"

Leave a comment ( 2 )

Mindy Wagner, ON THE TOPIC OF Tips and Tricks Up until about a week ago, Bridge was merely an annoyance... an application that fired itself up every now and then when I clicked the wrong button in Photoshop or Illustrator. I knew it came with Adobe Creative Suite 3, but beyond that I didn't know much. I've been successfully ignoring it for quite a while because as a web designer I didn't think I had much use for it. As it turns out, I was wrong.

Continue reading "How I’m Using Adobe Bridge"

Leave a comment ( 6 )

Mindy Wagner, ON THE TOPIC OF General and Tips and Tricks

I’ve been a devoted WordPress user for the past four years. I had invested quite a bit of time into learning MovableType when a developer friend suggested I try WordPress instead. The minute I saw its templating system, which is both flexible and easy for a designer like me to grasp, I was sold. It proved to be remarkably "hackable" and at Syracuse University (my previous employer), we frequently used it as a web content management system for clients with simple needs. It worked well enough, and I was content to stick with a single software package—until now.

Before coming to Viget, I never had the opportunity to build a site using ExpressionEngine. At colleges and universities, it’s common to use open-source software, partly because of budget constraints but also because the idea of collaboration and knowledge sharing is so synonymous with academia. So when I was tasked with implementing a client site in EE, the geeky side of me was thrilled while my designer side was nervously wondering if it would require more programmer smarts then I have.

After a quick overview, I dove right in, Googling anything that didn’t make sense. There is plenty of good documentation and a great support forum, so finding answers to my questions was easy. I have good news for all you designers out there: no crazy, black-belt coding skills required. It only took a few days to learn the basics and get my first EE site up and running flawlessly.  There were a few things I struggled with, though—for example, mental roadblocks that probably wouldn’t have been as confusing had I not been entrenched in the WordPress ways of doing things—so for other WordPress users thinking of switching, here are a few tips:

1. Get over the term "weblog."  To me, a weblog meant a big—well—blog, with all sorts of page types and info and categories and whatnot attached to it. In EE, a weblog is a container used to store information and organize your data. I used a separate weblog for nearly every page in the small site, which seemed counterintuitive at first. It makes more sense when you start creating custom fields and assigning them to each weblog. Basic lesson: Don’t be afraid to make lots of weblogs for a single site. You can change your preferences to call it something else (like "section"), but the template tags will still call them weblogs, so I found it easier to just adjust my thinking. (Note: Rumor has it this term is being dropped in the upgrade to 2.0, so in a few months you won’t have to worry about this!)


2. Start thinking in smaller chunks. In ExpressionEngine, it’s much easier to break your pages up into structured pieces of content (title, thumbnail image, summary, body content, etc) using custom fields. You can create custom fields in WordPress, but it ain’t easy and it often feels like you’re doing backflips to cobble together complex pages. In EE, you can make as many custom fields (bundled into "field groups") as you want. You then assign the field group to a weblog, and voila! Lovely structured data. The level of control you have is amazing, and it doesn’t require extra downloads or add-ons. Which leads me to #3...


3. Say goodbye to crappy plugins. If you want to do anything fancy with WordPress, it requires a plugin. Which is no big deal; downloading and installing one takes all of a minute or two. BUT, you have to sort through a lot of garbage to find a plugin that works and is not in perpetual "beta." Because WordPress is open source, programmers everywhere are writing their own plugins for it. Some of them are awesome. Lots of them aren’t. EE has much more out-of-the-box functionality. The only plugin I installed was for a mail form, and it worked great without any tinkering. The add-ons in the ExpressionEngine library have been tested and accepted by its creators, so you can expect them to work.


4. Finalize your design before moving it into the system. My original xHTML/CSS templates and the templates I ended up with in WordPress usually weren’t all that different, so modifying them outside of the editor and then copying/pasting them in wasn’t a big deal. In EE, my original templates got chopped up into small chunks right off the bat. This made big design changes overly confusing. Next time around I’ll spend more time working out design details before I move the display templates into EE.


5. Expect to spend a while finding things in the control panel. It seems unnecessarily convoluted. It took me a while to find things and memorize the patterns. Create a weblog, then create a field group with custom fields, then assign that field group to a weblog, then make a post in the weblog.... yikes. It felt like a lot of steps. I know it’s partially because you have such fine grain control over things, but I’m sure the interface could be simplified so everything wasn’t five clicks away. Saving graces: you can use the back button, and you can open multiple tabs to work on things. I often keep my stylesheet template in one tab and another template (like a page template) in a separate tab so I don’t have to navigate back and forth quite so much. It appears the upcoming ExpressionEngine 2.0 upgrade will be a huge improvement, so I can muddle through until then.


6. Say goodbye to PHP tag soup. My EE templates look so pretty and streamlined compared to my WordPress templates!  With so many built-in functions, there’s just a lot less code to look at. All I have to say is, HOORAY. I’m obsessive compulsive by nature, so a few lines of clean code makes me much less anxious.

Shifting my thinking (and learning a CMS new system) was well worth the effort. I have found EE to be much more powerful than WordPress, and not nearly as hacky. I’m looking forward to working with it more in the future. There seems to be no end to its functionality, so it’ll keep me busy for a while.

A few sites I found especially helpful:

• Veerle’s EE Posts
• How to make a "cheat sheet" listing your various element names
• The official Expression Engine wiki
• Boyink!’s "Building an ExpressionEngine Site" series
• Doug’s posts on Building Viget.com in EE - Part 1 and Part 2

Leave a comment ( 26 )

Samantha Warren, ON THE TOPIC OF Tips and Tricks

For those who have survived a traditional education in typography, the limitations of the web can be a very scary place (there was a time when I was even scared... very very scared). On more than a handful of occasions, I have been asked by people designing for the web why making text an image is a bad thing, and here are my answers:

Reasons why you should never make body-copy an image online:

• The information is not selectable for those who may want to copy and paste it.
• The text is not resize-able, making it very difficult for those who prefer larger type to scale it up to read.
• It is not accessible by a screen-reader for those who are visually impaired.
• It doesn't allow content to be; indexed by search engines.

Continue reading "Typography Tuesday: Why Type Shouldn’t Be Images"

Leave a comment ( 7 )

Doug Avery, ON THE TOPIC OF Tips and Tricks

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"

Leave a comment ( 10 )

Tom Osborne, ON THE TOPIC OF Favorites and Tips and Tricks

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:

1. Plan and promote in advance of the event. What do you hope to accomplish? When and where should this take place?
2. Gather at the designated time and place.
3. Act upon on what you set out to do.
4. 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"

Leave a comment ( 7 )

Keith Muth, ON THE TOPIC OF Tips and Tricks

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}

Leave a comment ( 4 )