Devlounge

Design, Develop, and Grow

Archives for October 2011

Friday Focus 10/14/11: Freeform

By

The discipline of grid systems and boxy layouts is a wonderful thing to behold, but breaking out of them is probably more fun. This week on Friday Focus: we’re looking at freeform layouts.

Designs of the Week

Bit Byte Bit website
Bit Byte Bit

The freeform approach is perfect for sites with different content types, like a lifestream or tumblelog. This design uses color-coded boxes with varying sizes, and even includes inline slideshows in MacBook Pro frames for the author’s portfolio items. If it’s a little too chaotic, filter the stuff using the top navigation. The black text on orange seems a little harsh though!

Paul Giacherio's website
Paul Giacherio

Another technique is layered boxes of content you can rearrange.

Andrew Shanley's website
Andrew Shanley

Feels a little quirky, with the covered up headshot, the almost scripty logo and the handwritten font and dotted arrows.

NewQuest website
NewQuest

This barely makes the cut since it’s very organized, but pay attention to the site lets you rearrange the boxed icons with one click, or when the browser window resizes. There’s also keyboard navigation to traverse through each page. There’s quite a few items on the page, though, and some of them could be grouped together.

Inayaili de León's website
Inayaili de León's

Like the bright colors and subtle transparency on top of a subtly textured background, but it’s a little weird that you can only move the boxes horizontally. I also like the timeline you’ll see higher on the page.

Yann Pochet's website
Yann Pochet

I like the modest and colorful scattering of icons, which when hovered over displays a preview in the larger, central circle. Then clicking on the section “unmasks” the rest of that image, which also leads you to view the work fullscreen.

Social Media Weekly

Design, Business – How to pick a great designer
“How do you know if a designer is any good? And how do you know if they’re the right person for your project? Here’s a short guide to help you find out.”

HTML, JavaScript, CSS – Matthias Bynens’ Notes archive
“The idea is that every entry is like a note-to-self kind of thing. Every post is a mini-knowledge bomb I wish someone else had dropped before me, so I wouldn’t have had to write it.”

CSS – Safe CSS Defaults
“Initial values are different from inherited values. All properties accept a keyword inherit. When you use the keyword inherit on a property, the browser applies the value that it finds on its parent element. On html element if you use the value inherit, it applies the initial value.”

Friday Focus 10/07/11: All Mapped Out

By

This week’s Friday Focus features designs revolving around maps, both as embellishment and a tool.

Designs of the Week

Appmiral website
Appmiral

There’s a fantastic crab sporting a hat and a monocle that follows the trail on the map and leads you through the one-page site, all while leaving useful notes, popping in and out of the sandy background, and of course, walking sideways! I think the tooltips should stay on a little longer though; if you scroll down continuously they quickly disappear before you get a chance to read the whole thing, defeating their purpose. I sure hope the mascot wasn’t eaten up by the shark though, as it seems that was implied by the animation, but for a design to effectively hook you like that with a small storyline in such a short span is just genius.

festapoa website
festapoa

Nice night-time color scheme applied to a Google map to match the theme of the site, and a pretty good way to cycle through the list of events too. Instead of the usual calendar-based lookup, you go from day to day (or should I say night to night) by moving up and down, then check out the list of events for that date by moving left to right. You can do that both by clicking the arrows on your mouse and the arrow keys on your keyboard.

DART St. Louis website
DART St. Louis

Straightforward techniques at work: grunge, patterns, lightboxes for displaying content, and matching the color scheme on the map markers.

PortoAlegre.cc website
PortoAlegre.cc

Also a custom colored-map, with some brightly colored icons and shapes, but one noticeable problem here is that if there’s too much on the map, the site becomes far less helpful. Reducing the marker sizes would help, but maybe filtering only one type of data at a time will be more effective as well.

patisserie DEFFERT website
patisserie DEFFERT

I like the collage and handmade feel on this page; even the tabbed content boxes use drawn-in borders. However, I think making this a one page site isn’t such a good idea mainly because of the number of items in the products section. There were at least a dozen rows there and it’ll take much more effort to scroll back up to switch tabs. They should have kept that section at up to the average height of browser screen and paginated accordingly.

Keystone Logistics website
Keystone Logistics

I love the idea of being able to demonstrate your company’s capabilities with an animation like this, giving you details every step of the way as the ship sails from port to port until it reaches its destination. The visuals are stunning. A more restless visitor would probably want more bells and whistles but I think this is dynamic enough for a corporate site. I think the only thing I have to make a note of is the excessive use of italics on the page and the underdesigned menus; this is a lot more glaring in the inner pages where the imagery disappears.

Social Media Weekly

HTML, CSS – Semantic Animation

Accessibility – Rocket Surgery and Accessibility User Testing

Web Standards – Future friendly, or Forward to Yesterday?

JavaScript – JavaScript Design Patterns Deconstructed

Recipe Finder, Largest Recipe Search Engine Launched

By

New web sites are launched every day – more than one can keep track of, for sure. I am certain that if you take a little bit of time to dig,  you can find the statistics on how many web site launches there are in a day. My point, however, is that with all the new sites cropping up, the chances of finding is rather slim. Due to information overload, we do tend to zone out after a while. But yes, every once in a while, we get a whiff of something interesting.

Here’s a new site that made me stand up straight and pay attention: Recipe Finder. The site launched last month, and it seems to be building up speed. Recipe Finder is basically a search engine serving up only recipes. The foodie Google, is how I think about it.

At first glance, you can easily see that searching for recipes is a simple matter.

Recipe Finder Home Page
Recipe Finder Home Page

One can hardly miss that search bar in the middle of the page. Type in a recipe name or an ingredient, and you are good to go! One of the beautiful things about this recipe search engine, though, is that while it makes things simple for the average user, it also provides customization options. The Advanced Search link found underneath the search bar is brilliant. Using this option, you can narrow down your search results by indicating parameters such as cook time, number of servings, and number of calories. Furthermore, you can opt to exclude ingredients, which is always handy for cooks who have to bear in mind allergies and food preferences.

Advanced Search
Advanced Search

Just how much use can you get out of Recipe Finder? Quite a lot, actually. At present, it boasts a collection of around 1.7 million recipes, plus around 700,000 images. I doubt that you can start a blog like Julie (using Julia Child’s book) and go through even half of the recipes within a year. Furthermore, Recipe Finder indexes the most reputable recipe web sites you can find on a continuous basis. As such, the collection will only continue to grow.

Another useful thing about Recipe Finder is that it offers two options for search results. Yes, it really is a full blown search engine. Understandably, the default view is text, where you can see the recipe name, ingredients, and other pertinent data.

Cupcake Search Results
Cupcake Text Search Results

I think info such as the calorie content, servings, nutrients, and vitamins are great, but this is definitely the yummier version.

Cupcake Image Results
Cupcake Image Results

Now it’s kind of hard to disagree with me after seeing those results, isn’t it?

Even after only a brief time playing around with the site, I think that you will understand why Recipe Finder caught my attention. If you have even the remotest interest in search and/or cooking (or food!), then you will not be able to resist but take a look at what this new site has to offer. Go ahead. Feel free to indulge yourself and discover a slice of foodie heaven.

ManageWP Plugin: Easily Control Many Sites Under One Dashboard [Review]

By

I’m not a fan of WordPress Multisite functionality, I’ve always found the system to be clunky, confusing for new users and constantly in need of tweaking, that’s why I was happy to test out ManageWP from developer Vlad Prelovac. Not only is the system not clunky, it makes adding new websites, managing plugins and themes and backing up a WordPress setup extremely simple, even for beginners.

Setting up ManageWP is just a matter of downloading the plugin and activating the program on your website. Once activated the plugin shows up on the left side of your admin panel under the “ManageWP” heading.

WPManage Dashboard

As you’ll notice below the main ManageWP section all of the websites you have managed are added for easy access. To add a new website simple load the ManageWP plugin to the new website and active the plugin, then access the “Add Website” tab and input the website URL and username to add the site. [Read more…]

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge