Shift8 Creative Graphic Design and Website Development

I haven't designed in a while. It's just been too crazy busy with programming web sites. I'm working on a project now where I get to design again! It's very exciting. I realize now I have a real good ability to see both sides of the fence here. I'm an educated graphic designer and took many years of typography classes (more than the required amount). So I know exactly what I'm doing with regard to setting type and I also happen to love it. Sadly, I settle for what the web has and it's limitations. I also know that if I go and create images for every single bit of text...I miss out on SEO and it's a real pain to update. 

So we suffer when it comes to the web. We all do. Of course there's various forms of dynamic text replacement, some using Flash, others PHP (with GD library), and then of course don't forget the new possibilities with CSS @font-face. FontSquirrel and Google are two really good places to get some free fonts that are more than your basic web fonts.

That's great and all, but... We're still limited. Being creative takes a lot of work manipulating CSS and HTML. However, it is possible. The problem is that it's pretty much single serving. You don't always know how many words are in a piece of copy so it's hard to create re-usable styles for things like titles, subtitles, and pullquotes. For example, look at the titles for my blog posts. Sometimes there's enough words in the title that it spans several lines. When you compare that against setting type for print... You realize that you can adjust things to make it fit on one line if so desired. On the web, we have to live with what we get for the most part.

I'm trying to fix that. I'm working on a jQuery plugin that allows you to create beautiful typographic lockups and have those be a re-usable set of rules. So you can apply the same style to, say, all your blog post titles, but with a bit of intelligence. Things like if there are this many words do this, or break the line at the 5th word, etc. Think of it like programming working with design in unison. It's beautiful. See (and see above)?

Now, the best part is that this lockup works with 4 or more words. It'll just keept wrapping if more lines are needed. Every word including and after "post" in this case will be the same size and everything. The only thing required to output the above is a span element wrapped around the title. So when it comes to something like creating a template for a CMS or blog, there's no extra work beyond applying a class.

How does it work? Well, in the above screenshot, both the date and the title have a span element wrapped around them with a specific class. The jQuery plugin then basically applies a set of "typographic rules" to the copy. Things like how many words per line, etc. The date is slightly different, that just gets broken out so that the day, month, year, all live in their own span element. It's much more straight-forward than the type lockups.

The JavaScript then breaks up the copy and replaces it with new HTML that has each line wrapped with a div and each word wrapped with a span element. Classes are also present with all this marking each individual word and line so they can be targeted exclusively with CSS. For example: l_1, l_2, etc. for lines and w_1, w_2, etc. for words. Each line and word also have an "l" and "w" class on them allowing for a broader set of CSS rules. Of course, each lockup can have its own class and id values applied to it so you can further target specific lockups to apply different styles.

Once you get your CSS defined and what I'll call the "sequencing" of words per line, you're set! You can then copy and paste the styles and JSON settings for the jQuery method call and share them across sites and such if you want. It's just a tiny bit of configuration there to create beautiful and re-usable typographic lockups.

I'll be working on this a bit more to polish it and add more settings. I also have an option to wrap everything in quotes if you want as well for things like pullquotes. You'd simply add a "q" class to the element you applied the method to or you'd pass to the method an option for quotes set as true. 

More to come soon!

Every web designer, developer, and just really anyone who does business should have one of these tablets, I swear.

Why? Well, normally I'd have to say tablets are not really that helpful. They are fun, I think everyone is crazed over them, but they don't offer any real productive value. Sorry, but it's true. You play Angry Birds on them is what you do. Then carry it to the office so you can try to justify it. I could see that if you don't have a smartphone, then a tablet is a great tool for productivity.

Not the HTC Flyer. This is a tablet that really is geared for business and its a great addition to a netbook, smartphone, or laptop because it's simply different than all of them. It's honestly one of the only tablets that has something unique about it. The pen.

While reading about this tablet I was concerned the pen wouldn't be precise enough. Well, it is. It can be quite fine tipped. It works just about as well as some other devices like a Palm Pilot or Windows device with stylus...Only, better. There's two levels of pressure sensitivity as well, so it's pretty good for sketching. Mind you, not as good as what Wacom tablets offer, but honestly pretty close.

Drawing on glass, a slick surface, isn't so bad...Though you do miss out on the tactile feel and it's not real natural. I assume you can put on a matte screen protector and you'd get some resistance that felt more natural.

So why for web designers? It should be obvious...You can note anything. So you can simply go to your web sites and mark them up. Conveying design changes, etc. are a dream come true when you can do that. You can sketch up fresh ideas for design as well to then share. 

Additionally, you can draw all over PDF documents. These can be saved down as flattened PDFs or layered PDFs that will open up back on a PC. You will need to get a file manager app in order to e-mail those saved PDFs out, but you can. It's nice to open those layered PDFs up on a PC to review what you annotated and then remove those markings if you wanted to.

Think about tools like Mockflow and how they export to PDF. Or any other design tool where you may have a site map or wireframe. Bring that PDF right into the Flyer, mark it up, and e-mail it right back out. Beautiful.

Further apply this to business and think about signing PDFs. You can sign off for things, contracts, approval, etc. Having a pen in a digital world means serious business. It helps bridge a gap.

Think about presentations too. You can be going through a slideshow and make markings with the pen to help annotate. Speaking of presentations...The notes app has a recorder. You can record a lecture or presentation so you can play it back later. While this recording is going on, you can take pen notes and those drawings are placed on the audio timeline of your recording. Another beautiful feature.

I can't wait until there's more pen apps out there because I could only imagine the number of apps that could help make my day to day job easier and more productive.

Simply put. Every web designer and graphic designer should have one of these tablets. If you do business in a creative field, this is a must. Even for other industries the pen is a nice tool.