hand-drawn

Design Focus: Drag Around

January 25, 2014 By Sophia Lucero

These featured websites want you to drag their interfaces to navigate. Is it a better design decision or not? Let’s find out, shall we?

Designs of the Week

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

Clever combination of animated drawings and photos of cooking utensils to present a recipe-format website. It’s actually built on top of the Google Maps engine hence the dragging mechanism, although it has keyboard navigation as well.

The dark gray homepage features abstract lines and boxes representing paragraphs and images for the stories you’ll read as you click on each name. Most of the text links are arranged vertically, and the overall layout & content are similar to the book.

There’s a nice touch of making the borders slide in when you hover over the clickable media. Also interesting is how the whole wall repeats no matter how far you scroll, making it like an infinite screen although also possibly confusing.

The key to these draggable screens is giving options, like in this page where you can get to the different sections from the navigation. The whimsical quality of these illustrations are excellent.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

Optimization – We spent a week making Trello boards load extremely fast. Here’s how we did it.
“I wanted to improve board rendering performance by 10% every day for a week. It was bold. It was crazy. Somebody might have said it was impossible. But I proved that theoretical person wrong.”

JavaScript – A Dive Into Plain JavaScript
“With jQuery, adding, removing and checking if an element has certain classes is really simple. It’s a bit more complex with plain JavaScript, but not too much so.”

Friday Focus 03/09/12: Chalked Up

March 9, 2012 By Sophia Lucero

It’s back to the classroom this week on Friday Focus as we study designs that feature the chalkboard effect on them.

Designs of the Week

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

Most blackboard effect designs stick to the the scratchy white on black (sometimes green) look, but this one uses multiple colors (there’s colored chalk, after all). There’s a bit of a movie and zombie apocalypse motif going on in the different pages (even parallaxed on the homepage), all clever ideas as you’ll discover.

Surprisingly no mustaches in the design, but it’s there in the copy (e.g. “the clients we have shaved”), logo, and favicon. The way this site is laid out isn’t noticeably different at first, but you’ll find things that make you go “hmmm”, like how the portfolio images are in a fixed scrolling panel at the right, and have this stylized “magnifying glass” hover effect. I also find it interesting that the content boxes have uneven edges made up of multiple rectangles.

I like how all the info is spaced out nicely and easy to read, but the type in the heading doesn’t match, and for such a tall area, there could have been more info in it. It’s nice how the texture repeats in the footer area though.

There’s a slide-bounce effect to displaying the “blackboard area” once you load each page, and each heading is a specific design that matches the content. I also like the little underline touch on the menu links and the logo, the kind you find inside Photoshop.

Knock Knock Factory website — Knock Knock Factory

I like the red-white-black color scheme that’s softened a little by the “blackboard area” that mixes actual portraits with scribbled graphic elements. Unfortunately you don’t see that in the rest of the pages, where icons are featured prominently.

Social Media Weekly

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

JavaScript – Thinking Async
“Here’s the rub: when you load JavaScript from a third party you should do it asynchronously. You might want to load your own scripts asynchronously too, but for this article let’s focus on third parties.”

User Experience – Lean ways to test your new business idea
“These techniques allow us to test our business idea while it’s still an idea — before developers have written a single line of code.”

Business – Docracy
“Docracy is a social repository of legal documents. Our mission is to make useful legal documents freely available to the public.”

Web Design – New tools for web design and development: February 2012
“In this new regular feature Mark Penfold rounds up 10 of the best new tools for web designers and developers that we have come across.”

Friday Focus 06/03/11: North East South West

June 3, 2011 By Sophia Lucero

Here’s an interesting technique to try out in this week’s Friday Focus: designs that have four main navigational items arranged at right angles to each other, much like the four main directions on a compass.

Designs of the Week

I like how each section content is perfectly contained in the boxes. It makes me wish the whole site fit into the height of the browser window so I can see the wide view of the whole site.

There’s a running pixelated theme in the design, as well as blocks of black for the headers. There’s also an interesting peekaboo effect with fixed backgrounds that’s also growing popular these days. I like the idea of placing the navigation at the four corners of the site, but it makes moving back and forth between each screenful of content a hassle—better if there were keyboard navigation too. And for the millionth time, I wish we had a way for Twitter tweet and Facebook like buttons to blend in better with the design.

I never really enjoy the look of Courier or any other fixed-width font on a site, but I do like the hand-drawn touches here, and splashes of red there.

What’s a little surprising with these sites is that they don’t really use the 4 cardinal directions to their advantage and, say, animate the page to scroll to that particular direction. Instead they all still scroll vertically. Here’s another graphing paper pattern meets hand-drawn graphic elements design, with the wildly popular yellow and black combo.

Social Media Weekly

Design – Design Professionalism
“The designer’s guide to taking back your profession.”

Programming – Lost Type
“The Lost Type Co-Op is a Pay-What-You-Want Type foundry, the first of its kind.”

Optimization – zbugs
“Merge, Minify, and GZip Compress JS & CSS”

Accessibility – HTML5 and Accessibility
“HTML5 is not the accessibility disaster that some would have you believe. It tries to build accessibility in by design rather than bolt it on afterwards, and this is A Good Thing; if something is left to authors to add, they won’t. Just look at how many images have no alternate text, or useless alternate text.”

JavaScript – Byte-saving Techniques
“This is a collection of JavaScript wizardry that can shave bytes off of your code. It’s mainly intended as a reference for those creating entries for 140byt.es.”

User Interface Design – The Gap Theory of UI Design

Friday Focus 08/20/10: Skylines

August 20, 2010 By Sophia Lucero

This week on Friday Focus: designs that feature artistic renderings of skyscrapers and other features of a long landscape. See how they’re incorporated below.

Designs of the Week

Great grungy attitude all over, even the shiny buttons have a bit of smudge on them. Nice little detail: I like how the carousel’s right arrow changes into a square block to indicate there are no images left to view.

Love the easy feel from the pastels, gradients, rounded corners, and happy illustrations. The “add your company building” feature is also a great concept for the purpose of this website.

Bold and high contrast. Even the borders and background patterns are rugged and chunky.

The animated stack of books is really clever, and clicking loads a page where the books is opened.

Love the non-rectangular frame for the carousel—I’m seeing more of these lately. Body text is a little to small though.

The open, airy header area looks great. This is also a rare gem of a liquid layout.

Interesting fisheye (a.k.a. OS X dock) hover effect on the navigation, though I can see not-so-seamless texture tiling!

I like how all the clickables are so big yet still look minimal and refined. It’s all in the type and colors, right?

Great treatment on the contact form and the image frames. Textures all over!

I seem to have a lot of grungy designs this week, and I’m not complaining! Love the way the sections are divided, with blocky headers and thick borders of stars.

Spacing needs a little work in the featured images area, but the header navigation animations are adorable. This site is so warm and friendly.

Good idea to use the neightborhood skyline as a divider for the different sections in this one-page site. Although I think the black background is a big disconnect from the light blue one at the top.

Not a fan of the lens flare, and the featured image could have been a slideshow/carousel instead.

Lovely animations, and I like the way the skyline is in a corner instead occupying the whole width of the screen.

I wish the quirkiness of the header illustration and logo carried over to the rest of the design.

Beautiful, beautiful illustrations of the Moscow skyline. The scrollbar navigation for the image works well too. I wish they were a little more interactive though, with tooltips or links. And hooray for another liquid layout.

The header canopy is a nifty touch to the header design. Love the mix of patterns too.

Social Media Weekly

Design – Perception and the design of forms – Part 4: Figure/ground
“In this article we are going to explain the principle of figure/ground, which is surprisingly central to how forms work. More often than not this principle is—unintentionally—applied well. But we’ll also show you a few examples of when it isn’t.”

Programming – Semantics and sensibility
“For a while now, sensible naming conventions and semantics have been confused.”

Mobile – HOW TO: Make Your Mobile Websites Act More Like Native Apps
“Fortunately, a number of different frameworks are making it easier and easier for developers to create mobile web applications that look and feel more like native apps. Here are six examples.”

Friday Focus 08/06/10: Sidebar Focus

August 6, 2010 By Sophia Lucero

Where sidebars are not an afterthought, and even steal the show. Happy Friday Focus!

Designs of the Week

Sometimes your product doesn’t have to be presented in a MacBook, Cinema Display, iPhone, or Safari screen. You can just nudge it to the side of your layout and it will still make quite the impact. The bright shades of blue also help, and bonus points if that’s actually a jab at that “41 shades of blue” incident at Google.

I like everything going on this page. I find it interesting that there are at least four different typefaces used in this design, but blends in nicely. Also check out how the contents of the sidebar change by page.

I enjoy the generous serving of whitespace and the very subtle watermarks slash section dividers.

Great treatment on the video thumbnails and makes me wonder why not more people are doing it. Big chunky text, arrows, and buttons for a forceful first impression.

I love how simple this looks, something atypical of technology-focused sites. Brilliant icons, strong grid.

Pretty generic looking, but I like two things here: first, the actual use of tweed; second, the tooltip action on the photographic background.

The photo wall is neat, and so is the folded motif sprinkled around the site. The green “sidebar” behaves like a deconstructed box—get it?

Using cyan and magenta together is like asking for trouble, but I don’t mind it here. This site is trying to be as eyecatching as possible, and it’s using bold fonts, bold hues. I like that you can see swatches of the site’s color scheme spill over to the hand-drawn illustrations in each section.

Social Media Weekly

User Experience – Pagination, a thing of the past?

JavaScript – Showing Off bit.ly Clicks of Your Posts With jQuery

Programming – Will the Real Browser Stats Please Stand Up?

Design Focus: Drag Around

Designs of the Week

Social Media Weekly

Friday Focus 03/09/12: Chalked Up

Designs of the Week

Social Media Weekly

Friday Focus 06/03/11: North East South West

Designs of the Week

Social Media Weekly

Friday Focus 08/20/10: Skylines

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Web Designers: How Consistent Are Your Light Sources?

Search