[web_design] OregonLive Redesign: Say Hello To My Prelo-Slab Friend

2847.In case you've somehow, during the past day, not dialled-up OregonLive, the The Oregonian-ish website run by Advance Publications, The Big O's parent, you're in for a surprise, boy-o.

If you've sworn off OLive (as some I know have), here's what you're missing:

A cleaner, leaner design. A big, meaty guts-column of real-time-updated stories, theme selectable by a drop-down (Top Stories/News/Sports/Entertainment/Opinion). A buff-colored, spacious header that extrudes into the page as you scroll down.

Departments? They got'em:

Each one of those blue buttons open a dialog that allows you to select criteria, you click a search-button, and it's off to the races. This is all below the "fold" in the right-side column. Below this, you'll find a most read/most commented block, and at the footer, direct links to direct sections.

One of the biggest complaints about OLive over the years it's existed is its clutteredness. It was not the most useful of interfaces, and unless you knew what you were looking for, you could indeed get lost while looking for what you were (or weren't finding). The most irritating thing to me was the center, where sports stories were thrown together in a mixed-hierarchy goulash. While the sections were laid out across the top, it was a matter of guessing to see to it that you picked the right one to drill down into.

This is, indeed a better design. Although the menus that would explode into the screen when you merely moused over the section titles along the top were a little tough to get use to … well, all interfaces have a learning curve. This one's mercifully short. I already, after just a few minutes, know where I want to go to get what I want to know. The clean, clear, and organized look of the site is a refreshing change from the gallimaufry chaos of the original OLive.

The most striking feature of the redesign, and the one that leaps right out (and almost grabs you by the throat), is that heavy, authoritative font. It's called Prelo-slab, you can find some here, and boy is it an aggressive look in the application. It almost dares you not to click it. Actually, in the ways it's being used, it comes off as a little too heavy; I note, at the vendors page, there's maybe another weight I'd use for those headlines.

But you know what? I like the redesign.

Although, biggest flaw? For a few minutes I thought I'd stumbled into some big ol' Reddit.

[web_design] 5 Ways To Create User-Friendly Menus

2829.(via Designer Daily) You can have a great, fun, visually quirky and engaging website but there's no using it if your visitors can't get around logically.

The value of this article at Designer Daily isn't so much the observation that a hierarchy and a structure can deliver the most use to the visitor – that should be taken as read by everyone on the Intartubez who uses a website pretty much, well, ever:

http://www.designer-daily.com/5-examples-of-user-friendly-navigation-menus-25936

Some of the most fun (seriously) I ever had was designing navigation using CSS. That was my CSS epiphany. If you can do that with CSS, then, my man and woman, you can do anything.

[net_liff] Google Chrome, Now With Built-In Tab Synching

2816.The new Google Chrome, Chrome 19, is in the stable channel, and what got my attention was that they have apparently brought tab synching to the browser. This is supposed to mean that no matter where you are, on what computer, whenever you use Chrome you have the same tabs on any session on any computer you use. Your browser follows you everywhere.

This'll probably have two reactions depending on how you see Google; for those who aren't down with the seemingly-ever-increasing amount of information Google collects on you to make your online experience as unified as possible, there will be a search on how to turn that off; to those who don't mind or don't care … and judging by how well Google still seems to be perceived or how popular Chrome seems to be, that's an ass-ton of us … it'll be a boon.

And here's TechCrunch's article: http://techcrunch.com/2012/05/15/chrome-19-launches-now-features-built-in-tab-syncing/

[web_design] Jim Greenfield For Congress, Now Lorem Ipsum Free!

2691.For a few posts I poked fun at Oregon 1st Congressional District Republican contender Jim Greenfield for apparently posting a website that consisted of a template and significant contributions from a Mr. Lorem Ipsum … that is, remarkable areas of placeholder text.

In fairness I am happy point out now that he has a proper campaign website with not a trace of placeholder text thereon, and its address is actually http://jimgreenfieldforcongress.com. H/T to his campaign manager, Richard P. Burke for pointing this out.

[web_design] The Sort Of Website You'd Expect From The Country That Gave Us Existentialism

2687.When I was a kid, there was this toy. It was in the form of a sort of crank, which was attached to a wooden block with two channels in a cross. Two sliders were in each of the cross-channels, and the handle of the crank was attached to both, and the leverage was such that, as you rotated the crank handle, one slider would be pulled in its channel, then, as the limit of that would be reached, the other one would be pulled through its channel … over and over and over … never quite touching but coming very close, and if you did it long enough it would make you this sort of crazy, that you'd vary the cadence of the thing, trying to make the two sliders meet, which was, of course, impossible.

Sort of my introduction to existentialism, I guess.

Anyway, somehow I stumbled on this German site, Nirgendwo is irgendwo, http://www.nirgendwo.de/. Go ahead and go there, and come right back. I'll wait.

Back? Good. Did you see what they did there?

First you see a black screen with the words as such:

This, if you'd not yet figured it out, means nowhere is somewhere. Mousing around the screen you find no links except for over the words, and when you click it, you get this:

Or, somewhere is nowhere. And when you click on that, you just go back to the other one. And that's all there is, there is nothing more. Has the online experience been better encompassed ever? It's like this bizarre German version of the taijitu. 

But that isn't all. If you missed it before, go back now and click the links, but this time look at the address bar.

Did you see it this time?

Not satisfied with just this sere experience, the designer didn't stop at making this one site with two pages, no sir. He/She actually put the two statements on two seperate webpages. The second phrase is at a site called http://irgendwo.de. This is truly awesome. 

Web design is complete with this website. Screw Web 2.0, or even 3.0, this transcends that. We can close up the internet and all go home now.

[web_design] Presumably He Has A Significant Greeking Constituency*

2680.Jim Greenfield, hopeful Oregon 1st Congressional District Republican candidate to succeed David Wu, still, at this date, has significant lorem ipsum (or, placeholder text) issues with his significantly-uninspired website, http://greenfieldforcongress.com. 


I've detailed his problems here. They still exist as enumerated thereon. I suppose it's possible that the candidate's site is a prank. If it isn't, I'm asking myself - as a voter, now, and this speaks to branding as I've said before - does he really care all that much?

If you want a look at a site about someone who actually cares about getting elected, check out Brad Avakian's. Not a ton of song'n'dance, no fireworks, just effective layout and sensible design and communication. And no placeholder text.

Just sayin'.

* "Greeking" is also designer-speak for random placeholder text, as in the old saw it's all Greek to me, and awkwardly-written designer-political jokes.

[web_design] Jim Greenfield, OR-1 Candidate, Is Very Proud of His Lorem Ipsum

2671.Via T.A.Barnhart on Google+, I find this bit of silliness courtesy of a member of one of the silliest groups of people in Oregon … Republican Congressional also-rans. In this case, it's one of the flock of candidates vying for the seat that was vacated by 8-term Congressman David Wu.

As of today, at this time, this is Mr Greenfield's website (http://www.greenfieldforcongress.com/)

It's really kind of template-y, nothing bad but nothing especially good or creative. The antique phone is a good touch. We're using different phones now, but it's an artistic point, I suppose, though I expected a little more from a candidate who's running "an active special primary race". It's got to be more active than his website is right now. But - what! Lower left and lower right there … there's some interesting text down there.

We all want to know what any candidate of any stripe has done, and Mr Greenfield has done us a solid by telling us. Looking at the third item on that list really impressed me. I'm not disposed to vote Republiclan, but anyone who successfully esqesed dolorliquam congue fermenumn impresses me. That's no mean achievement! But that next-to-last one is a deal-breaker for me … I don't think it's good for America to promote adipsicing allquetulla. That, to me, is a lifestyle choice, and people shouldn't be discouraged from making it, but don't think my taxes should support it!

Of course, you can say whatever your experience is, your achievements can be the proof in the pudding. In this case, Mr. Greenfield's greatest achievements were using three paragraphs of lorem ipsum text and a stock filler photo of two attractive women. As a trained graphic designer, I myself am a great advocate of lorem ipsum text, so at least, even if Greenfield is a Republican, there's one thing we all can agree with.

Although I will say this about me: I've used more at one go than he did, so in that case, I'm moar qualified to be a US Congressman than he is. I also know more dialects of lorem ipsum than he does, so if you want a man who speaks the true gibberish of the people, then I am that man.

Seriously, however,  I'm sure than Jim Greenfield is more serious about his run than this website suggests it is. At least I hope he is. This speaks not only to effective web design (the template-y design of the site and the failure to do something about something so fundamental as filler text in the template suggests a design process that's at best, sloppy, and probably non-existent in reality) but speaks to branding.

Everytime a candidate speaks they're expanding their brand, what they stand for. And, aside from some standard old-wine-in-new-skin (and the skin ain't even that new, actually) about free markets and the national budget, there isn't much of anything compelling to recommend him over, say, someone who has an actual chance of winning the special election.

Although it would have been more impressive if he'd just put up a simple "coming soon" page with a donation link. Or, failing that, not letting this bowser go live at all. Or maybe not letting his web designer knock off early and go home.

The screenshots above were current as of the writing of this missive. It may have changed by the time you look at it. At least I damn skippy hope it did.

[bloggage] Do You Want Your Blog to Look Like Google+?

2643.Well, here's a template for you then.

[web_design] Did The Lakers Get Swept? Simple Website - Effective CSS Lesson

2620.I don't know if Brad Benites was out to teach web design, but he did.

Brad Benites is a resident of Arizona who's also a DMavs fan. In other words, he's also thrilled that the Mavericks ate the Lakers lunch, but whereas my joy is based on schadenfreude and despair, his is based on his team actually winning the series, an alternative I hope the Blazers explore in future seasons.

Proving it's impossible to predict what will go viral (believe me, I wish I knew that magic bullet (Magic and Bullet being two other NBA squads entirely)) He asked the question "Did the Mavericks Sweep The Lakers" with the website http://didthelakersgetswept.com/.

Go ahead and click the link. Even dialup users can do this one.

Are you back? Good. Since web design intrigues, I ordered up a source view, and wasn't surprised to find out that it included very little: What you see is what you got, except for the visitor tracking javascript. However … the simplicity of the design provided a straight-ahead look at some thoroughly modern web design. Here's what it was:

Of course, first, there was some header information. It's what you might expect. Then, came this bit of text:

<style type="text/css">

.yes {
    font-family:Arial, sans-serif;
    color:black;
    font-size:7.0em;
    text-align:center;
    padding-top:200px;
}

This is just basic CSS. Since it's in the file itself, it's inline CSS. Specifies font family, color, font size in ems, aligns in the center, and gives 200 pixels top and bottom padding. Good old box-model CSS.

The body (skipping the javascript) looks like this:

</head>
<body>
<div class="yes">Yes.</div>
</body>
</html>

The logic used makes it obvious to even the beginner here.

The first block, which defines the display of the characters, is a class selector. What identifies that, of course, is the period in front of the work "yes". Class selectors, of course, can be used wherever, on single things, large groups of things. The other thing is the ID selector, which is used to style only one element at a time. Each has their strengths. And this could have been styled with either an ID or a class selector, but class seems to be the right way to go here; the most simple approach, as demonstrated by the fact that all you have to do is insert the attribute in the div tag, and the job is done.

This is why CSS is so powerful. All you have to do is change one attribute in the selector definition, and the body text changes automatically. The box model makes positioning the text oh, so very easy - and so browser agnostic, you don't need to care (at least with this application) whether you're going to use Firefox, Opera, Safari, or Chrome to view it.

Moreover, a small task like this is ideal for inline CSS, which is typically eschewed in favor of external CSS. That's not to say that external CSS couldn't be used here: that selector could go into a file of its own, say yes.css,  and be attached to the file with the tag

<link rel="stylesheet" type="text/css" href="yes.css" />

It would be rather too much design for this little gem, but it would be utterly valid.

In the meantime … the Lakers are out! Swept by the Mavs! Go Mavs!

[logo_design] Google Chrome Logo … With A Bit Less Chrome

2613.I just now noticed this … I should keep up on Google Chrome browser news, especially since I love the logo quite a bit. Clever little thing.

When I started up Chrome today, just to go get a look at somthing in it, I noticed it had become, well, flat …

… and I knew it used to look a bit more pictorial:

 

Or as Steve Rura, designer, explains it:

Since Chrome is all about making your web experience as easy and clutter-free as possible, we refreshed the Chrome icon to better represent these sentiments. A simpler icon embodies the Chrome spirit — to make the web quicker, lighter, and easier for all.

Which, if you're going to evolve a logo design, is a good way to move - in concert with the animating idea, or at least as close as you can execute it. After being a bit surprised by the evolution, I found myself warming to it right away. So, for me, it's a good move.

Read all about it and look at some of the user explorations that inspired the move here: http://chrome.blogspot.com/2011/03/fresh-take-on-icon.html

[logo_design] That Peculiar Lightness of Logos for 2011

2612.So saith GD USA's Logolounge: the fashion trend for logos seems to be light, airy, and transcendant:

For the 2011 report, our ninth, color is still prevalent, but tinted down. Where black has been used as the strong neutral, now brown or gray is in place. Blues and greens are softer, and pinks are starting to appear.

Other degrees of lightness: Shapes are airier, lifting off the page. Designs are rising out of their 2D resting places and suggesting that they would really like to go places. In some logos, line weights are slimmer. There’s plenty of transparency, too, as if light is now able to flow right through.

The transcendancey comes from what's turning out to be a logo's new remit: it did what it does before, but now it does it in places that Paul Rand never would have guessed. You'll find a logo as a favicon, animated, in print and in electronic form … but not just one form, many of them – animated, backgrounded, what have you. As digital design tools evolve, more effects and functions, once the domain of fairly abstruse professionals, now come to the fingertips of your friendly neighborhood desktop designer.

They can be used for evil, yes, we understand that. With great power comes great responsibility. Also, large power bills.

Read the Logolounge's report here … http://www.gdusa.com/issue_2011/april/logolounge.php … and go right to the graphic that illustrates what they see as the 2011 trends here … http://www.gdusa.com/issue_2011/april/logolounge/index.php … each image has a link to a definition and examples.

H/T to Jeff Fisher.

[web_design] Quickly ID Web Page Fonts with WhatFont Bookmarklet

2596.There are quite a few ways of figuring out what font a web page is doing but Chengyin Liu may have just come up with the quickest, most intuitive.

Utilities like Firebug are nifty but they assault you with information … way too much unless you're a real web-design pro. Or maybe you are but you want a real quick read. Here's how you go about it.

1. Navigate to this page: http://chengyinliu.com/whatfont.html

2. Mouseover the gray button that reads WhatFont, click and drag to your bookmarks bar, and drop it. It will lodge there under with the label "WhatFont".

Additionally, you can click on the button to try it out without installing it.

3. To use the bookmarklet, click on it and mouse over the text. You'll see something just like this:

The font (as defined in the page's font specification) appears in a gray box just like above.

4. To turn it off, click on the "Exit WhatFont" block that has appeared in the upper-right-hand corner of the browser window:

… and it will go away.

It's just a clever, quick, and simple way to do it.

 

[net_liff] Back to Firefox 3.6 (For Now)

2590.While I like Firefox 4 muchly, I'll be going back to Firefox 3.6 for now. As soon as the PDF plugin maker makes that plugin okay for FF4, I'll be upgrading. Also the DIVX plugin won't work with it … for now.

If you don't depend on those plugins or your workflow doesn't demand that they be there, I say go ahead and upgrade. But it's nice to be able to view PDFs in the browser, which is the biggest flaw in an otherwise fabulous browser.

[net] Available Just Now: Firefox 4

2588.Firefox 4 is due to be released later today, they say, but it's available on Mozilla's FTP servers now, reports SitePoint's Craig Beckler.

Go to: ftp://releases.mozilla.org/pub/mozilla.org/firefox/releases/4.0/, and choose your system, then navigate to en-US for the USA! USA! USA! version.

And good luck.

[teh funnay] The Last Advertising Agency On Earth

2582.Something I stumbled on. Be warned that this is essentially a promotional video, and some of the conclusions it asks you to draw may seem a bit glib, but it's well done, and the droll humor is worth wasting a few minutes of your time to see.

It's a brave new world. Or something.

[design] Creating A Shiny Button That Looks Like Another Shiny Button

2582.One thing a designer is called upon to do occaisionally is not to create something original (or wholly original) but to create something that fits in with a design look that already exists.

Latterly, a suggestion was made to me that a page that contained a Paypal donation button needed another button, and this button would deliver a congruent message if it were made to resemble the Paypal button. Here's the button in a bit of context:

 

In a subsequent section of the webpage, it would read "Thank You Gifts" and that button would lead to a page that has a listing of PBS-style thank-you premiums.

The task presents itself in a series of trivial stages. Thus:

1. Identify the shape.

This button is a recangle with rounded corners. Importing this into Photoshop I make a rounded-corner rectangle path approximately the same shape as the button, which is being kept on a hidden layer for color and shape reference. After doing this, I increased the image size to 300 px wide so I could see things just a little better.

The path is probably hardly visible around the outside of that, but it's there, trust me.

One of my favorite things Photoshop does is allows you to make selections out of paths. When I first learned PS, I used Quick Mask, but when I figured out I could do this with paths, I've not looked back. In the Paths palette, I saved the Work Path and drug it to the "make selection" button on the bottom of that palette and made the selection. Using the eyedropper tool, I sampled the orange-yellow color where it was at its most intense, and filled the selection on a new layer.

2. Create The Button's Foundation.

Here's what it looked like after I did that:

It's hard to see, but the background is transparent. From here on out, it's a rather simple process of building layers. The translucent effect is a trompe l'oeil, as what it really boils down to is layering two gradients over the yellow-orange background. Going to PS's gradient tool, I created a gradient and called it "White, Transparent" (a good idea at this point would be to probably make a "Foreground, Transparent" gradient which would then be whatever I needed it when I needed it but I was in auguring mode at this point and was very result driven, so I crafted a tool toward the specific end. And, of course, PS already has one anyway as a default preset.

But, how to fill in the gradients? That's next.

3. Adding Visual Depth With Gradients

The path that I created to make the main shape will be useful for the gradient areas as well, but I will be changing them. Narrowing them to bring them within the shape and squashing them created two new paths - one for the upper gradient, and one for the lower gradient that is just a bit more squashed than the upper. This will create the effect of light coming down from above.

Gradient one:

Gradient two:

And there's the translucent effect. It's the color plus the white-to-transparent gradient. And it was very simple to do.

The only thing that was required was to place the text.

4. Placing the Text

I'm not sure what font they used in the original button, but It looks like a Helvetica Neue would be close enough and do the trick. So, I sampled the color from the text in the original button and got to it. It too was pretty simple.

Bold obliqued Helvetica Neue bold. Looks pretty close. But we need to take it back down to a proper size (that's 110 px wide) …

I am always amazed at the way you can trick the eye into seeing smoothness by reducing the roughness to a level you can't resolve it at:

But does it work on the page?

Yes, I think it does! Mission accomplished!

[tech] Adobe Does HTML5 End Run Around Apple - With A Wallaby

2575.Now it looks like you may be able to view Flash on your iOS device.

Oh, not as such, of course.

Enter that amazing new thing, HTML5 - HTML that people are actually doing animation and video games in. The new little beast from Adobe - codenamed Wallaby - will take your Flash file and break it down into HTML5, CSS, JavaScript - Dreamweaver-licious components, all with a simple dragon-drop, so it is said.

PC Magazine has an article about it here: http://www.pcmag.com/article2/0,2817,2381620,00.asp

… and Adobe Labs' download page for Wallaby is here: http://labs.adobe.com/technologies/wallaby/

It's in prerelease, so you'll probably find out some stuffs in it.

 

[type] Comic Sans - For When You Want To Strike Back At The LeBronzilla

2470.

Well ... how 'bout them Cavs?

By now even people who hide in caves know, LeBron James, in an epic orgy of self-indulgent media attention that will go down in the annals of bad taste, pretty much deserted his Cleveland fans to run to Miami. Where you stand on this pretty much depends on where you sit, but from my POV, the self-indulgence grew so very huge that the ghost of Andy Warhol materialized to say "Hey, dial it back, fella. Over the top there".

But of all the multiple ring media circus, designed to make even the most self-aggrandizing political pundit look absolutely buttoned down, the most absurd event of the whole cascade didn't really directly involve LeBronzilla at all. It involved one Dan Gilbert, majority owner of the Cavs.

Now, before I go forward with this I want to unequivocally state that I feel the Cavs' pain. I respect what they're going through. I remember the Clyde Drexler Blazer squads of the 90s, when the only thing standing between the 'Zers and a much-deserved 2nd championship was the MJ-led Chicago Bulls. It's heartbreaking to have your dream squashed by someone who doesn't respect you at all.

Now Mr. Gilbert felt it time to epistle eloquently, and timely the decision it was, too. Though, we must ask ourselves, of all the fonts he could have used to compose his missive, why did he have to choose Comic Sans?

Yes, you heard it right. RoseConnare's Baby. Here's a sample:

Read the entire missive here: http://www.nba.com/cavaliers/news/gilbert_letter_100708.html.

This is why those of us who bitch about Comic Sans being every where, bitch about Comic Sans being everywhere. Type carries mood and attitude, and the mood and attitude conveyed here pretty much approximate how you'd feel if the famous "Coffee's for closers" speech Alec Baldwin's character in Glengarry Glen Ross were delivered by the character after inhaling helium.

Doesn't quite have the same punch. I feel like I'm trying to suppress laughter at someone's funeral or summat.

That on the table, I completely sympathize with Dan Gilbert, and my heart's out to the Cleveland fans. Being a Blazer fan, I know heartbreak.

But, being a very powerful and wealthy man, doesn't Mr Gilbert have assistants to prevent him from doing things like this?

The next time you ask yourself why all those type geeks get so excercised at Comic Sans ... think on this.

And understand.

Technorati Tags: LeBron James, Comic Sans, LeBronzilla, RoseConnare's Baby, Cleveland Cavaliers

Powered by ScribeFire.

[type] Font Squirrel ... Truly Free Good-Quality Commerically-Licensed Fonts At Last?

2456.

Today's find is a site called Font Squirrel. Font Squirrel's logo proclaims that it provides 100% free fonts for commercial use, which is a boon for anyone who avails themselves of "free" fonts only to find them actually being shareware or "free for personal use only".

Wanting more license info, I downloaded a font called "Sansation", which looks like this:

It's kind of nifty, no? Looks like a refined Eras Bold.

Anyway, the designer, as all good designers should do, included a license. And here's Bernd Montag's license readme, in full and in toto:

This font is freeware for personal and commercial use.
Feel free to distribute this font.
You are permitted to but this font on CDs, websites,... with the following restrictions:

    -Editing is only allowed for personal use,
     don't distribute an edited version of this font!
    -Do not rename this font!
    -Do not sell this font!
    -Do not handle it as your own work!
    -Do not pass the font without this textfile!

I hope you enjoy this font.
If you have further questions, please contact me.
_________________________________________________

berndmontag@klausmontag.de
Bernd Montag © 2008 - All Rights Reserved

In short: use it however you want. Don't rip him off with your own mildly-edited or renamed version. Don't pass it off as something you did. Don't ever charge anyone for it.

Man, it can't be simpler than that, cannit? That's just one of them, of course; no matter what promises anyone makes you, be sure to read your font license! Protect yourself and the kind soul who designs your letterforms. That said, Font Squirrel looks like it connects you with the goods - and helps you put together @font-face kits, for remote web embedding via the CSS @font-face atrribute.

Font Squirrel can be found here: http://fontsquirrel.com. Lotta good looking fonts there.

Technorati Tags: type, typography, free fonts, web squirrel, free commercially licensed fonts

Powered by ScribeFire.

[web design] CSS Button Maker - Create CSS 3 Web Page Buttons With Live Preview!

2430.

CSS 3 is making a lot of things possible that I didn't think would ever be possible via mere Cascading Style Sheets, and this demo (from CSSTricks) shows how you can style buttons, complete with hover effects (which is something I do know a little about and used just recently), rounded corners, gradients, and everything.

Finally & nifty web buttons without having to have a graphics utilty (not that I'm suggesting anyone give up thier Photoshop, of course).

The sliders allow you alter the vertical and horizontal size and the corner radius. The various color bars bring up a familiar-looking color picker that allows you to determine the color of the element, each controlling the gradients, hover colors, active colors, &c. the little drop-down allows you choose between three web-standard fonts.

And here's the best thing about it: not only is that a live preview, you click the button - and get the CSS you need to implement it.

The CSS3 Button Maker is available here: http://css-tricks.com/examples/ButtonMaker/#, or click upon the pic above. Happy button-making!

Thanks to Smashing Magazine for pointing me this direction.

Technorati Tags: CSS, CSS3, Web Design, Web 2.0

Powered by ScribeFire.