Viget Inspire

In this post I'm going to show you how to display your FeedStitch feed on your site using a few simple lines of jQuery. FeedStitch is a site we made to allow users to aggregate feeds quickly and easily, and then offer various output options for the feeds users create. When FeedStitich first launched Mark Cornick wrote about parsing FeedStitch’s JSON feed with plain old JavaScript. As he pointed out, his example was just one way to do it and is less bulky than including the entire jQuery library, but it is a little more complex for people not accustomed to writing straight JavaScript. The designers here at Viget use the jQuery framework for most of our JavaScript needs so we usually have the library loading into most of our sites anyway. One of the great features in jQuery is that it can easily parse JSON feeds using the $.getJSON() function. This is something I have touched on before in my previous post about pulling your Flickr feed.

For this example, I made a FeedStitch feed with all the Viget blogs aggregated into single feed. If you go to a FeedStitch feed, you can grab the JSON feed at the very bottom of the page (next to the RSS feed icon). When looking at the raw JSON feed you'll probably see a mess of all kinds of variables and text, but here is what the beginning of the FeedStitch JSON feed looks like if we format it nicely:

Continue reading "Displaying Your FeedStitch JSON Feed Using jQuery"

Leave a comment ( 4 )

Like Mindy before me, I pledged I would speed up my workflow this year using keyboard shortcuts. Web design is an interface-intensive profession: we use 3+ programs at once and navigate between dozens of folders on an average project. When designing a comp, I use over 50 distinct commands in Photoshop alone (not counting the web browsing, email, and Illustrator commands). This is is a huge amount of time spent moving the mouse, which could be easily reduced by a couple shortcuts.

The trouble with shortcuts? There's just too many of them. It's hard to find a place to start tackling a list of key commands, and once you begin learning, it's harder still to commit those shortcuts to memory.

One Day At A Time

But together we shall overcome: Download the printable Viget shortcut calendar for March, and learn (really, truly learn) a new shortcut every day. Programs covered: Photoshop, OS X/Windows, Illustrator, Textmate, CSSedit, and the shell.

Every day, try to learn at least one shortcut from the day's list using the exercises shown. If you already know a day's shortcut when it comes up, don't just skip that day! Think about a common task that you use the mouse for, find the shortcut for it using Google, and complete the same exercises with it.

Daily Exercises

The following exercises are really good ways to get commands committed to memory:

1. Do the shortcut 20 times in a row. Seriously, just do it 20 times really fast.
2. Mix it in with two other tasks. For example, select-[shortcut]-move an object. Do this five times.
3. Start using it regularly. If you forget and complete the task normally, undo and use the shortcut.

Download the printable calendar (PDF)

Continue reading "Mrch Is Shrtct Mnth: Learning Web Design Shortcuts"

Leave a comment ( 15 )

Have you already read Part 1 of this two-part series?  If not, check it out, then read the last 4 tips below.

3. Always deinterlace

If you've bought a TV recently, you may have heard the terms 1080i or 480p. These numbers aren't there to make the cable girl look like she knows what she's doing -- these numbers actually mean something. The numbers (1080, 480, etc.) are the dimensions of the picture you are watching. If you are looking at a 1080i picture, then the screen size or aspect ratio is 1920 pixels wide by 1080 high (1920x1080).

The letter "i" stands for interlaced, which is the format all video on TV is broadcast. Interlacing is simply the interlacing of two frames together. You begin with frame 1. Your TV only fills in the rows for every other row (1, 3, 5, etc.) with frame 1's video. In the even lines (2, 4, 6, etc), the TV uses the lines of video from frame 2. The reason for interlacing goes back to the early days of TV. Before the LED monitors, all video was displayed on CRT (Cathode Ray Tube) monitors. The way these CRT's work is they shoot a beam across the top of the screen. The opposite side reflects it back and the beam zig-zags all the way down the screen until you have your picture. Once its done with one frame, it starts at the top and does it all over again for the next frame. If you are looking at 1080 screen, you would have 1080 lines stacked on top of each other. Well, in the old days, this caused a problem. By the time the beam was at the bottom of the screen, the lines at the very top were starting to fade, so when the beam started again at the top, the line was refreshed with a new bright beam. When this is done at a high rate, the picture would flicker. The reason this works is that it now takes half the time complete one cycle through a frame, which is quick enough so the first line does not fade, thereby removing the annoying flickering. So why is this a problem now?

HD televisions and LED monitors are what are called progressive scan display. The technology of these has advanced to the point where there is a danger of that fading that happens on CRT monitors. Progressive scan displays do not interlace the frames of video but simply display the entire frame concurrently. This becomes a problem when interlaced video is displayed on a progressive display. You can see from the image below that when an interlaced video is viewed in a progressive display that the 2 frames are actually visible. This is especially true with high motion frames like the one below.

That long explanation leads into the most important thing to look out for when encoding video for the web: since the vast majority of video is interlaced, you ALWAYS need to deinterlace your video when encoding or you will get what you see above. All major video encoders have this ability but they won't do it by default.

Continue reading "6 Things To Know About Video For The Web - Part 2"

Leave a comment ( 10 )

Video on the web is showing up in more and more places all the time. It's also easier to capture and with mobile decices, web cams and hand held cams. What we can see from this is that it's something that is here to stay. For those of us responsible for putting it up on the web (and even those who aren't!), there is a lot we need to know about what goes into creating and distributing video.

This post is meant to be a broad look at how far video has come and where it is today.  it provides some helpful tips about distributing video on the web.

Since blog posts that have numbers in their titles get more attention, I broke up video into six sections.

Continue reading "6 Things To Know About Video For The Web - Part 1"

Leave a comment ( 16 )

Update, February 3rd: Early sketches and an inspiration board added to the end of the post.

LAYOUT. My old nemesis. Comp after comp is the same story: sketch the layout, try it in Photoshop, change it, change it, change it, and change it back until something sticks. It's the tyranny of choice - there are just too many possible layouts and never a good way to narrow the options down.

Even after deciding on a basic structure and beginning it in Photoshop, things never feel right. Is the header too tall? Is there too much space below that list? It's easy to pour hours into decisions like these and forget other, more critical areas of the design.

After a few recent collisions with layout, I decided to pick up Geometry of Design and Elements of Graphic Design, and spend some time refocusing on layout construction. I got through Geometry of Design in one evening, and AWESOMELY, I was able to apply it to my work the next day.

Continue reading "Book Review/Giveaway: The Geometry of Design"

Leave a comment ( 74 )

A good logo has a lot of challenges to meet: it should fit into a tiny space, say something unique, and finish on schedule and under budget (despite there being no solid "finished" point). Logos are built from scratch, need to be incredibly flexible, and they have to please a lot of people who have strong (and often opposing) opinions. Looking at all these requirements, we begin to see why logo projects can go awry. Good ideas get scrapped, projects stretch on for months, and even when things go well, the design might just get thrown out a year later. How can we avoid these pitfalls?

The community abounds with good critiques, process studies, and examples, but I'm interested in the critical first step: before jumping into concepts, what do we need to know? How can a designer (or a project manager or salesperson) start the logo process and maximize chances for a great design and a happy client?

In answer, here are some questions I ask a client (or myself) when beginning logos. These questions can start pointing a design in the right direction without handcuffing the designer.

Note: Some of these "branding" questions, which are not to be confused with "logo design" questions...but often, the two get smushed together, so we need to be ready to handle both.

Continue reading "Ask The Right Questions: Logo Design"

Leave a comment ( 9 )

The web can be a daunting typographic place for both designers and developers. Current limitations with web typography can frustrate designers  who are accustomed to a wide range of typographic options, while many front-end developers find themselves facing a struggle when refining the details of type to be more legible during build-out. The web is a perfect example of designing under constraints, and while we are on the way to a web with less limitations, there are plenty of small things a designer can do to enhance typography now.

After writing several conceptual blog posts and giving similar presentations, I took foks' feedback and decided to put together a talk that demonstrated many of the vague concepts of web typography through step-by step examples.

To best illustrate my points, I chose a website that was in sore need of a "typographic" makeover. Knowing I needed to choose a site that was indisputably in need,  I scanned my memory and recalled one I came across last year while shopping for a Christmas gift for my sister. With the body-copy typeset in papyrus, this particular website offered a unique service of a printable spa gift certificate, (which was exactly what I needed being that we live in different locations).  But FINDING that printable gift certificate was difficult because of the site's illegible copy and undefined hierarchy.

In order to demonstrate the power of typography, I decided to redesign the site only using typography. Below are three excerpts from the redesign that demonstrate my three "pillars of web typography:" legibility, hierarchy, and expression.

Continue reading "My Typography Talk: Typography is the Foundation of Good Web Design"

Leave a comment ( 13 )