A blog by the Brick Factory The Brick Factory

In Defense of the Single Page Website

Like all things that become popular and overused, there is a backlash  against the once revered single page, long-scrolling bootstrap template website.  It is safe to say that a good percentage of the design community is eager to bid it farewell.  While I am as bored as my counterparts with the army of single page sites that all look pretty much exactly the same, I’m not as quick to dismiss the entire concept as passé.

single page site layoutFrom a design point of view, the concern is the saturation of bootstrap style layouts for every agency, PR shop and freelancer needing an easy template.  A design can lose its impact if visitors have seen it a million times already.  Hero image, intro statement, services icons and links, news and blog, CTA and footer. Mix and match if you wanted but most take the template straight out of the box and call it a day. It is bought, used and copied because it works. A one-person shop can produce work as  polished as a a lot of decent-sized agencies.

The single-page layout can still work well, however, if you approach your single page website as a completely fresh design build. The fact that the page can be simple to lay out doesn’t mean it should be considered a template. If anything, with the abundance of single-page scrolling sites, designers need to give more care in creating original designs within this framework.

The reasons a long scroller still gets plenty of play here at the Brick Factory are:

Immediacy.  A single page scroll eliminates confusion as the user interface (UI) is immediately understandable.

Mobile. Obviously, a single, long page scales to mobile fairly easily.  I don’t have to spend time developing custom layouts for different phontes, tablets, widescreens, etc.  This cuts down design time and results in sites that work well on all devices.

Parallax Scrolling is still kind of cool. If you have professional photography, single page sites can still look remarkable.

Scroll-activated animations and transitions. These events can work within a variety of layouts, but we find they work best on a vertical scroll and can become a meaningful component of the narrative.

Maps, Graphics, etc. Integration of graphical elements presents less of a design challenge when you have the luxury of a blank canvas to work with.

Less distraction. For some sites we build, a singular narrative is preferred.  This is particularly true for focused sites that have one overall message to convey or call-to-action to complete. A long scrolling site is perfect because it allows for a distraction-free user experience.

Modules. If you design systems rather than pages (cough, like we do, cough), then a single, deep site works perfectly and can be reworked easily through rounds of internal and client edits.  Components can easily be moved around and reused.

In summary, although a bit labor-intensive on the front end, if designed with a creative approach one-page scrolling sites can still work.  A conscious effort to create a unique design that doesn’t look like every other site on the Internet just needs to be made.  If you do that, the single page site can provide a friendly, consistent experience for virtually all levels of user on just about any device.




Your Awful Fonts, Ranked

With so many articles griping about the bad font choices that new web designers use, it seemed appropriate to write one that didn’t end with an ode to your top seed, Comic Sans. Instead, I’ve completely disrupted that trend by placing it at number 3. Here are 10 fonts that hurt my feelings.

10. Myriad Pro


It’s that Adobe system font that shows up unannounced and unwelcome in the resume you’re secretly typing out between soul-eating budget meetings. Described by the people who designed it as having a warmth and readability, the truth is not so generous with the flowery jibber-jabber. The font looks every bit like a system font that you’d quickly replace with…


9. Calibri


The king of the system fonts for Mac and Microsoft designed by Dutch font hero Lucas de Groot! I’m typing in it (with it?) using Word currently and I’m struggling to feel the “warm and soft character” it is said to be graced with. If this font and Myriad Pro were in a police line-up, I couldn’t tell them apart. I might just point to one and say he did it though because these fonts are guilty of something.


8. Papyrus

Too soon.


8. Edwardian Script


I understand that you have an invitation to baby Colton’s 2nd birthday to design and he’s a unique personality and therefore the invitation needs to be unique as well, but no one can read this font at any size and that kid of yours just threw up and yes, looks like he’s eating it.


7. Optima


How a German named Hermann Zapf designed a font that was used in every shampoo label in the 1970s remains a great mystery to me. Of note…the font was inspired by a gravestone.


6. Impact


As a younger, naive designer I may have used Impact more than I should have. I also used bath salts more than I should have. That’s a joke, we didn’t know about bath salts back then. The point is both should be avoided unless used properly. Impact only for your bowling league flyer and bath salts for … baths.


5. Trajan


Trajan looks great on a coliseum but less grandiose on your wedding site. Reading through how you two met is fascinating enough without fighting through a font that doesn’t include lower case characters. Cruelly, Trajan comes with all Adobe products so get used to reading yourself into a migraine for years to come.


4. Any hand-written font


Do you really think in 2016 you’re fooling anyone with that phony signature? The hand-written font is also the go to for political direct mail pieces. Someone in a lazy design agency thinks a scrawled “we need your help now more than ever, TOM MCCORMICK!” is going to be the little personal push needed to get that five bucks out of me. Nice try, Huckabee.


3. Comic Sans


Like a case of Pabst Blue Ribbon in a roomful of thin, bearded millennials, Comic Sans has now reached cult status and is somehow now acceptable to some. Please join me in continuing to reject Comic Sans, Pabst and 19th century beards.


2. Webdings, Dingbats or whatever the hell


Consider that even your mother stopped using this weird icon font strategy before you ever scroll down the font menu this deep. Emojis make you mad, don’t they? Well, they should. These are less cute emojis for old people. On a side note, don’t use emojis.


1. Well, it’s Papyrus of course


The hated and overused font choice of overblown Hollywood darling, James Cameron, as well as the go-getter sitting in the cube next to you working on logo ideas for the local artisan fish co-op. The font was created in 1982 and sure looks every bit like it belongs on a Reagan era album cover. The bad news is that there are between 3 and 5 more Avatar movies in the pipeline and that weird branding is already in place.


NBCNEWS.com Succumbs to the Grid

When the Mashable site was redesigned into the now familiar grid layout, I wrote a blog post bellyaching about the infinite scroll, various usability issues and somehow Jakob Nielsen. I’m still not a big fan of the grid approach to website design because it’s not design, it’s the process of dumping content into boxes that descend like fish food over time to the bottom of the page and I find that solution lacking creativity. Mashable does the grid better than most because they follow basic principles of usability and the content is presented with as much care as possible given the constraints of the layout. There is actual white space between content blocks and the text is always readable in its low contrast, smart presentation. It may not be a web designer’s favorite arrangement but it works serviceably and I never rolled back my enthusiasm for the site content when they made this switch.

NBCNEWS.com has made incremental design improvements over the last few years but hasn’t committed to a redesign for as long as I can remember. A full redesign is in place now and it’s a hefty one.

The grid is in place and the usability is out the window. As much as none of us liked that last sentence, we are appreciating this new homepage even less. The good news is the infinite scroll that some users (Me. I’m talking about me.) disliked is not part of this redesign. Also not part of this redesign unfortunately is any white space between stories, ads or my gigantic personalized weather. The only break my eye gets is where the TODAY show promo is involved (tagline: Rise To Shine. Someone wrote that). The content and in particular the photography on the site is more often than not compelling but lost in a sea of cropped boxes, garish contrasts and text overlays. The site feels as though it belongs on a bigger canvas. With some room to spread out the content would get the presentation it deserved.


Where Mashable pays close attention to readability, contrast, fonts, eye-strain and the basics of the user experience NBCNEWS came up with this slap in the puss…


When a user clicks through to the article, things ease up of course, but in a lumbering, unfinished manner. The sub level pages look like a beta launch to me. The text is laid out in a lifeless manner. The call-outs are unpolished. The sidebar ads are sized/placed clumsily.


Navigation on NBCNEWS.com is plentiful. A click on the menu icon opens a nearly full screen of options which is weird but understandable given what they’re trying to accomplish here. The fact that the options look almost identical is a problem for me. Sections, Top Storylines, Featured News, local options are all treated the same and could use some variation.


I’m a firm believer in the iterative design process and I have no doubt that the team behind this redesign will be making adjustments as they go to improve usability. However, like I apparently did at our Christmas party last year, the grid layout is likely going to overstay its welcome if it hasn’t already and for web designers that’s not great news.


Yahoo! And the Art of Branding Gibberish

As I’ve mentioned more than once, designing logos is an awful way to spend your time. There’s no hiding. You’re out there in front of the client with your brilliant idea on a white sheet of paper as the marketing director and his recent and eager grads wait to ask probing and pointed questions about things they read concerning logo development last night.

I’ve always thought the best way to solve the logo question was to get an honest and trustworthy designer to provide a handful of strong concepts, let he or she present them without interruption and choose one. I’m in the minority with this approach and I know it. Creative types like to let other creative types do their jobs and be left alone. We also would take 6 months to design those logo ideas if you let us, so I understand why I’m in the minority on this. Even so, the more isn’t the merrier in these cases.

Yahoo CEO, Marissa Mayer unveiled the new Yahoo! logo yesterday with more explanation than I thought we might get. Or deserved. Or wanted, really. We also were treated to a really well produced quick video of the creative process, although I believe it’s just an after the fact marketing fluff piece. Cool though.


The new logo is an updated version of the old logo, not a redesign. It’s a good upgrade and needed I suppose after (Google tells me, let’s see…) 18 years. It is beveled though and that’s just weird. Marissa calls it chiseled, but it’s beveled to anyone who’s familiar with Photoshop, which is just about 100% of Yahoo! users. The font bevel is the hard-drinking wingman of the font drop shadow, but Yahoo! didn’t take the bait and double down, thankfully.

Like all modern logo reveals, Yahoo! and Marissa had the uncomfortable job of explaining what we were seeing, because logos are art and art requires some deep background before commoners like us can understand it.
Some highlights include:

  • “We didn’t want to have any straight lines in the logo.  Straight lines don’t exist in the human form”
  • “We preferred letters that had thicker and thinner strokes – conveying the subjective and editorial nature of some of what we do.”
  • “tilt the exclamation point by 9 degrees, just to add a bit of whimsy”

She nailed it. Nothing says whimsy like an exact 9 degree tilt.

So that’s a pretty impressive load of hogwash, and it’s only a small sample of her creative vision. She included this phony little gem as well; as if it was discovered in some darkened conference room on a whiteboard next to other great ideas like talk to Jerry about hygiene issues and casual Friday does not mean you don’t come in.
So congratulations to Marissa Mayer, her new logo and the weekends she spent with her logo team. According to her it was “a ton of fun weighing every minute detail”. Logo team members have not been heard from.

The Noble Pelicans

Pelicans are the inglorious flying garbage-trucks of the water-bird kingdom and as such are despised by man, fish and God. Violent, hateful missteps of nature, they fly with the grace of downed aircraft before zeroing in on their prey and skewering it with their beak/spears before stowing it to die slowly in their giant, obscene gullets. It’s a sight you don’t want your children to see. A quick search on YouTube reveals pelicans attacking or eating the following menu items:

  • dog
  • a baby
  • a tv weatherman
  • every fisherman it sees
  • a truck tire
  • the side of a building

So, when I read that the New Orleans Hornets changed their name to the Pelicans, I (rubbed my eyes with my fists, mouth open, then) assumed the branding would be a challenge. Of all the mascots in sports, this could be the toughest to transfer successfully into a logo. I remember that the Mighty Ducks’ logo was a goofy hybrid of Disney and those Friday the 13th movies.

That was somewhat close to what I expected here. A composite of a friendly (please), silly bird and a saxophone over a Mardi Gras theme. I’ve seen a number of talented designers submit their Pelican logo designs to various publications and although most are very professional and pretty well thought out, none are as successful as what was introduced yesterday as the official logo.


Tada! Finally, the real face of a pelican. Red eyes. Wings in full attack posture. Surely on his way to spearing a wayward puppy or slow-moving reporter (please go to YouTube).

The NBA seems to demand  that a basketball be in the main logo of every team and while that’s clearly insane, the design here incorporates it with little trouble. The font is right on the money, the fleur-de-lis is a cool touch up top and the palette seems close enough (I might have adjusted that red to a weirder Mardi Gras color). Graphic Designer Rodney Richardson took a graceless fiend of a mascot, an animal New Orleans is unlucky enough to saddled with and made a superior logo. With typical and unnecessary first impression comments like “Color me a little disappointed… Basically, the designers didn’t need to make the pelican look angry” from sports blogger Kelly Dwyer floating around, I thought I’d weigh in just as quickly with an opposing take while also educating you on the perils of pelicans in the wild.

You’re welcome.