Blog Category: Typography4

Semester Reflection

By Erika Goering,

 UX

User Experience is a class I was really excited about when the semester began. And I think that enthusiasm is what made me realize how much I actually love this kind of stuff. Tailoring design to suit the needs of real people is something I’ve always been intrigued by, and I feel very fortunate to have learned so much about it.

Research was really the main thing covered in this class. The big lesson I took away from it was understanding. Not just regurgitating quantitative information, but applying it on a qualitative and conceptual level. Understanding is the key to creating good work. And that applies to any subject. It’s not just design. It’s life.

I feel like I’ve unlocked some of the secrets of design; like I’ve been given some exclusive tools for being amazing. I’m part of an elite club of designers who take actual people into consideration, and not just “getting the job done.”

User Experience has actually made me re-think my future as a designer. I came into this program with the idea that I’d end up working in for a small, local company, doing glorified desktop publishing for random clients. But now, my standards have changed, and I’m starting to take a real interest in catering to niche markets and subcultures. These unique groups of people need someone to speak for them and to them, and I want to become that someone.

 

IA

I’ve decided that information architecture is yet another direction I could possibly take in my life (and definitely enjoy!). I love the idea of building usable information out of raw data and content. Sculpting something practical out of something mundane is like magic. The geek in me loves to create order and hierarchy, and I love making it accessible and digestible too.

Between UX and IA, I think I’ve developed quite a design arsenal this semester. I’m getting dangerous.

 

T4

Typography 4 taught me how to manage a project on my own. This was my first real self-directed class, and I learned more about myself than I did about typography. I think typography was just a medium for that. The experimentation process also taught me about how a project can evolve dramatically over time and become something really refined and engaging. And it taught me to keep pushing things, even when I think I’ve pushed enough. There’s always more to do, and there’s always something better to achieve.

 

Overall

This semester has been the most nurturing, inspiring, and stimulating semester I’ve ever had. I’ve learned more about myself and who I want to be in these three classes than I have in my entire college career.

  Filed under: Information Architecture, KCAI, Learning, Typography4, User Experience
  Comments: Comments Off on Semester Reflection

Twitter Type Experiment: Almost Ready for the Real World!

By Erika Goering,

I’ve reached some milestones in the past couple of weeks:

  • Auto-reload works! And it even fixes itself when the network connection bugs out! (I used a heavily modified chunk of code from WPMayor.com, in case you were curious.)
  • Auto-reloading broke the animations, so I created a solution for when that happens. In addition to reloading the tweets PHP file, I’m also reloading the animations javascript file too (at a much shorter interval to avoid any huge lapses in animation).
    • All of these things have resulted in a smaller main page, so loading time is a bit better now too.
  • An error message now comes up when there isn’t a response from Twitter.com, instead of a blank page. It explains why the tweets aren’t loading, and tells the user not to get trigger-happy with the refresh button (because there’s a limit to how many times they can refresh every hour). This message automatically goes away and is replaced by the type animation when the connection is restored.
  • Automatic reloading is now limited to 120 times an hour (to comply with Twitter’s request limit, while still allowing the user to hit the refresh button up to 30 times if they get anxious). Unless they go nuts and hit the refresh button more than that, it should automatically reload every 30 seconds with no problem.

Here’s the new and improved version of my twitter experiment: http://erikagoering.com/t4-near-final/

And here’s what the error message looks like (it’s been removed in the live version for now because there’s a caching error with my server):

I still need to format a few more keywords and clean up some code, but the experiment itself is done and functional. Hooray!

  Filed under: KCAI, Learning, Typography4
  Comments: Comments Off on Twitter Type Experiment: Almost Ready for the Real World!

Twitter Process

By Erika Goering,

I’ve spent some time refining every aspect of my Twitter experiment.

I’ve refined the aesthetics and readability by increasing the contrast between the background and the tweets. I’ve added a subtle drop shadow to the “inactive” and “flyout” words, while the “impressions” now have an embossed effect.

One of the more recent tweets has more keywords, and therefore has more flyouts. This caused some legibility issues because the flyouts were pretty opaque. Once the flying keywords get close enough to the user, they tend to block everything behind them. Kind of a problem if you want to actually read something.

…So I made the keywords become more transluscent when they get closer to the user. This not only helps with usability, but it also gives emphasis to one keyword at a time, to help with hierarchy and provide some rhythm and structure.

In the way of technical things, I came across a problem where multiple-word phrases (like “that’s what she said” and “ellen lupton”) were breaking to multiple lines when they flew in closer. I fixed that, so now those phrases are staying on one line while they’re moving around.

I’m working on getting the tweets (not the whole page!) to auto-refresh when there’s a new tweet. I know this involves my page saying hello to Twitter’s XML file to see if there’s something new, and then refreshing if that’s indeed the case. I just don’t quite know how to do that yet. But I’m working on it. I tried to get a crude reload button (I know, I know. Not automatic.) working yesterday, but this happened:

I’ve learned that this is because of the same-origin policy. But I’m pretty confident that I can find a workaround somewhere and apply that to my page. So that will hopefully be resolved very soon.

Next steps:

I plan to continue the ongoing process of adding/formatting  keywords to my CSS/PHP files. (For example, Ellen Lupton wasn’t even a keyword until this past weekend, and I made her glittery because she’s awesome and we love her.) My method of adding keywords just sort of happens when I spot a word that I’ve seen a few times before. Nothing too “designery,” but I do what I can.

I will try to fix the same-origin policy thing.  I need those tweets to reload.

So that’s where I stand right now. I’m gonna keep on moving forward, and awesomeness will ensue.

  Filed under: KCAI, Learning, Typography4
  Comments: Comments Off on Twitter Process

Twitter Type: CSS3 Sources

By Erika Goering,

One of the main things I’m doing with CSS is masking images into the keyword text and using Google Web Fonts instead of the now deceased @font-face.

• Images in Text Demo

• Google Web Fonts

 

Here’s what I’ve done so far with the two things.

The glittery “love” text is actually animated! The glitter sparkles! Hooray! I’m pretty excited about what CSS3 can do. At the moment, I’m still working on keyword styles. I’ll be tackling full-on tweet animations soon.

  Filed under: KCAI, Learning, Typography4
  Comments: Comments Off on Twitter Type: CSS3 Sources

Twitter Type: PHP Sources and Process

By Erika Goering,

Here’s all of the sources I’ve used to get some basic code for all the stuff I’m doing. I haven’t used any of this code verbatim, because what I’m doing is very specific. But I’ve managed to make it all work together, which I think is pretty darn cool.

• Parsing XML with PHP
• Highlighting Keywords
• The Holy Grail: Making these two things work together! Making a Function’s Output a Variable for Another Function (what kind of sorcery is this?!)

Here’s what my PHP code looks like right now (I’m always adding more keywords when they come to me, but it should be pretty much finished):

 

The next thing I do will be figuring out jQuery animations and some CSS3 styling. That’s gonna be the fun part.

  Filed under: KCAI, Learning, Typography4
  Comments: Comments Off on Twitter Type: PHP Sources and Process

Typography Experiment: Back to Basics

By Erika Goering,

So, I’ve abandoned Flash and ActionScript for something more versatile. HTML5, PHP, jQuery, and CSS3.

Since I’m not terribly comfortable with any of these things, it’s pretty perfect as a learning experience. And as an experiment, I have no real expectations of how it “should” end up, because I have no real grasp on what I can do with it yet. As far as I know, anything is possible and anything can happen. So that’s what I’m shooting for. Endless possibilities.

I’m also totally open to future applications of this technology. What if I project this onto a large touch-responsive surface? What if there’s an element of augmented reality? What about a mobile app? Everything’s wide open. And incredibly exciting.

As far as actual production goes, the hardest part these past couple of days has been making an RSS feed’s output work with keyword highlighting. I followed many differing tutorials, pulled things from each of them, and modified them to the best of my ability, and I finally got it to work on a basic level last night. I have the feed working, and keyword highlighting is working for the most part (partial or compound words like sleep vs asleep are still causing me some technical problems, but I’m sure I can get that figured out in the next week).

The next steps are to create keyword-specific styles (like, say, Josh is purple with a rubik’s cube pattern or animation, or Patrick is all-caps and condensed). This is the easy part. It’s pure CSS. Maybe some Javascript. Not a huge deal. The fun part will be conducting a survey among my classmates to determine exactly what everyone’s names should look like. They’ll choose for themselves and for everyone else. Whatever consensus we come to will be what ultimately styles the type.

The hard part will be animating everything. That’s where jQuery comes in. I have never touched the stuff before. So this is an adventure for me. I have no clue what I’m doing, and it’s pretty liberating to have that kind of uncertainty and freedom. I know that I want tweets to move depending on their keywords, so that’s a place to start for now.

  Filed under: KCAI, Learning, Typography4
  Comments: Comments Off on Typography Experiment: Back to Basics