Feature
Post

Category
Design, Strategy

8 Analog Tools to Help You Design

Design doesn’t just happen in software, editors, or the browser—it often starts offline with the simplest of tools: pen and paper. With that in mind, let’s do a round up of helpful analog tools that can aid you in the process of brainstorming, doodling, sketching, wireframing, or prototyping by hand.

BASICS Notebook

BASICS notebook

BASICS notebook

The BASICS Notebook keeps you both productive and creative so you can stay on top of your project timelines and do the ideation in one place. It has different page layouts like calendars and checklists plus blank sheets & erasable whiteboard pages right in the palm of your hand. It also has practical features like a back pocket for loose leaves and just enough of a gap so you can tuck in your pen at the top.

Website Deck

Website Deck

Website Deck

UX Kits Website Deck gives a tactile approach to website mapping & information architecture. Each card in the “deck” represent different types of content or interface patterns you can lay out and rearrange as you plan the the site or app structure. Numbered from 1-53, they’re also portable & reusable.

Whitelines

Whitelines

Whitelines

Whitelines produces pads & books that, as the name suggests, sport white lines on their sheets. One of its products, Whitelines Link, has marked corners which helps its companion app digitally capture your ideas.

The Psychology of Colour Pencil Set

Psychology of Colour Pencil Set

Psychology of Colour Pencil Set

The Psychology of Colour Pencil Set consists of 12 colored pencils, each labeled with a word conveyed by its corresponding color. The set also includes a booklet that expounds on those concepts.

Dotgrid

Dotgrid Books & Notepads

Dotgrid Books & Notepads

Dotgrid features different incarnations of notepads and papers with dotted grids on their sheets. Special editions like a birch wood cover and a tribute to Steve Jobs are available.

Magnetic Blackboard Wallpaper

Magnetic Blackboard Wallpaper

Magnetic Blackboard Wallpaper

The Magnetic Blackboard Wallpaper lets you draw and stick stuff at the same time without the bulk of an actual board or the need to paint your walls. It’s available in three sizes: 63.5 x 265 cm, 127 x 265 cm, and 127 x 100 cm (width by roll length).

UI Stencils

UI Stencils

UI Stencils

UI Stencils lets you sketch out different user interface elements on paper quickly with the help of different stainless steel and plastic stencils. They also have pixel rules & pads of browsers and mobile devices.

BreakThroughColour Cards + Cubes

BreakThroughColour Cards + Cubes

BreakThroughColour Cards + Cubes

BreakThroughColour Cards + Cubes lets you explore or even play with a wide array of colors through dozens of colored cards and cubes. It special numbering system and and codes on the flip-side of the cards reveal how their vary on hue, saturation, and value.

Feature
Post

Category
Code, Strategy

Make your site more sociable with OpenGraph markup

The Art of Social Media

These days, before people click on your site they will probably see it through a link shared on your social network of choice, such as Facebook, Twitter, Google+, and so on. Usually these sites are smart enough to extract descriptive information about your page and display that so followers already get a good idea of what they’d be clicking on, but wouldn’t it be great if you could optimize that information to ensure you get more engagement?

With a bit of HTML knowledge (and perhaps some programming knowledge, depending on what website templates you’re using), you can make more sites more “sociable” by adding these tags to the <head> portion of your site. Text in {CURLY BRACES} are placeholders for the values you need to insert.

og:url

<meta property="og:url" content="{URL}">

Use this to show the canonical url of your page, free from various query variables or tokens. If you use a CMS like WordPress, this can be automatically generated for posts and pages through a function like the_permalink()

og:title

<meta property="og:title" content="{TITLE}">

Use this to show the title of your page. By default sites like Facebook usually get the text from the <title> tag, displayed on the browser title bar or tab name, but that usually contains extra stuff like the site description. With a custom OG tag you can opt to modify that to your liking.

og:type

<meta property="og:type" content="{TYPE}">

Use this to indicate the type of content your link is all about. Of course all links are websites, but they can also be more specific things like articles, products, books, movies, restaurants, and more.

og:image

<meta property="og:type" content="{IMAGE}">

A lot of times the images that displays with your link can encourage or prevent people from clicking, so make sure that you define this. There are optimal sizes for what Facebook, Twitter, and Google+ recommend, so be sure to check their individual documentation on that.

og:description

<meta property="og:type" content="{DESCRIPTION}">

Similar to title and image, you’ll want to optimize the description of your webpage since there is only so much text social networking sites can include in their link previews.

Closing note: on Twitter and Testing

When you’ve plugged in the above tags, you’ve pretty much guaranteed Facebook and Google+ to display your website links the way you customized it. However, Twitter has a couple more tags you might want to integrate, including twitter:site, where you can plug in the Twitter handle of your website, and twitter:creator, a different person or organization that is behind the website.

Twitter also has content types called Cards, which lets you specify the most appropriate layout for a link preview—whether it’s a summary card, a summary card with a large image, an app card, or a player card. Each card type emphasizes different data, so choose wisely or switch things up as you see fit.

Finally, it’s always the best practice to test things before rolling them out. Check out the links below for more detailed documentation and tips for sharing content on each social network:

 

Feature
Post

Category
Design Focus

Design Focus: Embrace the Chaos

Understanding and navigating through sites requires a certain amount of order, so when designers get busy with dazzling visualizations and arrangements, there remains a method to their madness.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Chaos

Eduardo del Fraile

Eduardo del Fraile

Digital Haiku

Digital Haiku

Bucharest

Bucharest

Canvas

Canvas

Squid Ink Flat Icons

Squid Ink Flat Icons

Mirumee

Mirumee

Kitasenju Design

Kitasenju Design

Fast Forward Labs

Fast Forward Labs

Social Media Weekly

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

Web DesignCopy & Paste & The Web
“Have you ever tried to copy and paste some text only to find it frustrating, awkward, or even impossible? I bet you have. It’s not random. On the web, you have a decent amount of control over it.”

Design, BusinessHeist
“The line between success and failure is murky. It’s not a binary metric that you can rely on to help you make tough decisions.”

User Interface DesignInterface Writing: Code for Humans
“Focus on the reader’s needs. Think about the implications of what you’re asking for. Be honest about what you’re doing with the data. That’s extremely important.”

Feature
Post

Category
Design Focus

Design Focus: Stacking Order

There are many different ways to provide the illusion of depth, and for these set of featured sites it’s all about stacking different layers of content one on top of the other, resulting in very interesting interaction and interface design.

Designs of the Week

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

TWO5SIX 2015

TWO5SIX 2015

Some cool color-changing going on in addition to the unusual scrolling: sections are arranged by stacks of white “pages” with one in front of the other, and as you scroll downwards each layer drops downward. What’s a little weird is seeing the text move upwards, only to hide downwards when you reach the end of each “page”. You can browse with the top menu or the navigation markers on the right. They’re thin horizontal bars by default, but when you hover on them they become tall rectangles, and have the “pages” peek out halfway like thumbnails.

Susanne Chmela

Susanne Chmela

I love all these different approaches to cycle groups of images a.k.a. the slider or carousel. In this site they’re represented as stacks with blue outlines, where clicking makes the top disappear and you see the next image, until you reach the bottom where the description of the project is revealed. No alternative navigation cues like buttons or arrows are present, but your cursor has the word “click” attached to it. The niftiest part is the subtle movement of the stacks as you scroll—expanding or compressing ever so slightly like an accordion.

Colin Snow

Colin Snow

Scattered layout with different ways of interacting with the projects: either video that play when you enter its area, or gallery of images that cycle as you click on them. Meanwhile, when you hover on the designers name and move the cursor around, different slices of said name flash in different sizes and places on the page, making for an interesting dynamic effect.

ETH Prof Lehnerer

ETH Prof Lehnerer

Different sections of the site are visible in layers, which is a different but possibly more helpful way of knowing where you’re browsing. Clicking on an event shows its page on top of the previous list, while the overview of the site is found at the bottom of the two.

Social Media Weekly

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

User ExperienceSimple UX mistakes to avoid on your blog – Volume 2

Web DesignThe 10 Commandments of Good Form Design on the Web

Feature
Post

Category
Design Focus

Design Focus: Pins & Trails

These websites use maps to illuminate information or as a primary motif in their designs.

Designs of the Week

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

Our Tam

Our Tam

Not flat, but a three-dimensional map traversing the different regions of Mount Tamalpais.

Designers Atlas

Designers Atlas

Not a literal map of designers, but a portfolio of one. Map elements like lines and icons are animated and used as markers.

District Magazine

District Magazine

The logo is oriented and cleverly spins like a compass. Also as your pointer moves around the background map, the coordiantes on the lower left update.

50 problems in 50 days

50 problems in 50 days

It’s always cool to present location-based stories on a map, and here you also have the option of viewing them in a neater grid layout.

Svenska kyrkans Internationella arbete

Svenska kyrkans Internationella arbete

This one also has a side drawer with filter and list views, and I like the subtly pulsing effect on the circular markers and the popup animation with the photos.

Word Map

Word Map

Not only is this a great idea for an informative map, but you can also see how a word is adopted from one country to others.

Social Media Weekly

Get solid WordPress themes, plugins, and even design training from iThemes.

Email Web DesignUsing Images in HTML Email
“ALT text should be baked into your image tags, at least for most images in an email.”

JavaScriptInterview: The Future of Web Animation with Julian Shapiro
“The higher we can push animations to perform — across all browsers and devices — the sooner the slick motion design commonly found in mobile apps will exist without compromise on the Web.”

Mobile Web DesignWhy ‘Mobile First’ May Already Be Outdated
“Only tracking someone on a “mobile device” is an incomplete picture and will result in poor targeting of messages and ads.”

JavaScriptReplacing jQuery with D3
“Although D3 has powerful features like its selectors or an ajax wrapper already built-in, we are often times missing some jQuery functions in our D3 projects. That’s why we will show some approaches on how you can replace jQuery by only using D3.”

Feature
Post

Category
Design Focus

Design Focus: Websites are Made of These

Metaphors are a cornerstone of design, but what if the design itself shows the tools and components used to build a website? The result is an interesting “x-ray” into the web design process, as seen in this week’s featured sites.

Designs of the Week

Get solid WordPress themes, plugins, and even design training from iThemes.

JLern Design

JLern Design

Instead of the usual links or thumbnails, this site uses website wireframes to represent the subpages, showing the actual yet abstracted layout of each page. The cool thing is the transition, where you see the wireframe “come to life” with the live content and color-coded elements. All the pages also appear side by side once you go into one of them, so it’s like you’re zooming in, almost physically exploring the website.

Hand.Gallery

Hand.Gallery

This design is reminiscent of speed painting videos, except done in the context of creating a website. You’re literally watching the site transform in terms of typography, color, and layout live. It’s probably intimidating and gimmicky for certain audiences, but being an online art gallery and still in its coming soon phase makes for an interesting art piece itself.

Dow-Smith Studio

Dow-Smith Studio

Browsing with a browser inside of a browser seems a little on the nose, but the fact that these are live sites shown in each tab speaks to the confidence of the designer in presenting the work—no pixel perfect screens here, you’re interacting with the real deal. In a smaller container of course, but you can click on the “go” icon to see it in a new window. I also like that the description above fades out and the background becomes this powder blue to light gray gradient.

Designers' Friend

Designers’ Friend

And what is a website without HTML? The page shows a Tip dialog which you can close or move out of the way, as if you’re using a Linux OS inside the browser. You can then proceed edit all the code on the page, click on the red links, and hover on the <img> tags. Again, this interface could intimidate non-techies, but that will also tell you whom this page is really for.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

User ExperienceDesigner’s Toolkit: A Primer On Capturing Research
“A good structure is to have a moderator and a note taker, that way one practitioner can focus on conversing with the participant, while the other focuses on capturing what is occurring.”

DesignWhy the Golden Ratio matters
“The visually-inclined — artists, architects and designers, historically keen observers and documentarians of both nature and the human condition and who we can thank for much of what we know about the world — have for ages incorporated this ratio into their work due to its intrinsically alluring balance between symmetry and asymmetry.”

Usability6 Usability tasks you haven’t tried so far, but really should!
“Below you find 6 example task that can provide new and different insights than the standard usability tasks.”

Feature
Post

Category
Design Focus

Design Focus: Circular Navigation

Circular motifs are very much alive these days, and your site will stand out even more when used as a navigational interface.

Designs of the Week

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

Mathilde Jacon

Mathilde Jacon

Each concentric circular area with images masked in them lead to pages describing the particular project. On it, the column of website screenshots move quicker than the opposite one containing text. The circular elements continue with a button and arrow that leads to the live site, and a couple others that animate and highlight the currently loading and next/previous pages. On the overlaying list of projects, the circles also pop up as icons beside each name. You’ll enjoy the clever interactions all around.

GiftRocket

GiftRocket

There’s something that feels young about this site, and has this warmth you see a lot less of these days. A textured background, borders and backgrounds that clearly demarcate sections, and a subdued color palette. It’s certainly “flat”, but rounder and kinder around the edges.

Little Black Classics

Little Black Classics

This is essentially a list of books with corresponding quotes, but the way you interact with it via the famous penguin on the circumference of the white sphere, makes all the difference. You can either click on it and have it land on a random book, or drag it around. Clicking on the center area flips the black part to the reveal the quote, and even prompts you with an animation of a tap to do something in case you forget the initial instructions. The auxiliary orange circles bubble up additional ones for shopping and sharing.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

CSSHow to Center in CSS

Typography100 Days of Fonts

Email DesignEmail Lab: A Starter Kit for HTML Emails

Feature
Post

Category
Design Focus

Design Focus: Non-Linear Scroll

Like the previous websites that encourage you to tilt your head, these ones featured below encourage you to rethink browsing interactions and wonder: does scrolling through a page have to happen from top to bottom only?

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Step and Repeat

Step and Repeat

A quirkily good interaction idea for a blog (or in this case, tumblelog), where the featured acts are a stream of posts scrolling diagonally. The direction of the scrolling alternates after a certain set of posts, and the color scheme switches up too. Clicking to view the post loads the page in diagonally as well, with acommodations for keyboard navigation.

FS Millbank

FS Millbank

The exploratory nature of the interactions on this page is brilliant and actually quite elegantly executed. The movements of sliding, rotating, zooming, and fading all work to emulate the concept of this wayfinding typeface and exhibit its characteristics. It’s like using one of those sci-fi screens you see in the movies, inside the browser.

Simon Sweeney

Simon Sweeney

Whether you scroll to the bottom or to the top, you’ll wind up with this starter card with information about the the designer. The page is a collection of projects connected by one thin string of pixels, infinitely scrolling every which way. Clicking on an image pages through related images to the project, until your reach its description slide. It’s different, kooky take on the portfolio that’s usually laid out on a neat, predictable grid.

Social Media Weekly

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Accessibility, UsabilityAccessibility Wins

UX, UsabilityASK DN: Do you perform user testing?

DesignDesigners checklist advices

Feature
Post

Category
Design Focus

Design Focus: By The Letter

This week’s websites feature beautiful, iconic letterforms that serve as design anchors to the content.

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

We are Fox Créateur

We are Fox Créateur

Their about page spells out their company name (logo) in an almost abstract way, and these shapes mask and highlight different photos & videos that tell their story.

FORM

FORM

The letters here are inspired by Google’s Material Design language, and the color-coding per section is nifty. There are a lot of sections for the one-pager though, so a menu that lets you skip should’ve been present.

Taostudio

Taostudio

Card-based layouts are all the rage these days and this in particular reminds me of flash cards from childhood, but the twist is how the project images integrate with letters in a minimal, quirky, modern way. The grid ends with a card that says “what letter are you?”, inviting you to contact & contract them for new work, which I find clever. Other details I like: the sea creatures hanging upside down each page, and the submit button on the Contact page that looks like an actual keyboard key. Again, the design goes for quirky, clever things.

Dots

Dots

With letters that are just a couple of steps evolved from primary shapes, you can see how close their logo design is to the star of their games: the circle (or in their case, the dot).

Alphabreast

Alphabreast

Color palette is a bit strong, although it totally works with the enclosed illustrations for each letter. I would like to see more of the comic/drawn look to the letters to tie in with the drawing style more.

Social Media Weekly

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

JavaScriptThe JavaScript World Domination
“JavaScript seems to creep into the most unexpected places these days. It’s not too long until your very toaster will be running JavaScript… but why?”

User ExperienceChange Blindness: Why People Don’t See What Designers Expect Them To See
“For example, studies have found that people fail to notice that the details of an image have changed.”

Responsive Web DesignResponsive Design with Viewport Control
“To ensure your media queries work on hand-held devices, put this in your <head>!”

Feature
Post

Category
Design Focus

Design Focus: Sites & Sounds

Come for the sounds, stay for beautifully crafted websites you’ll enjoy them in.

Designs of the Week

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

A Love Like Pi

A Love Like Pi

The music embed is not as clever as far as design goes, but it’s not obtrusive to the rest of the site’s adventurous nature. I like how the illustrations are drawn and animated in, and if you have to do a media gallery, might as well keep it fun with pink, floating rocks.

Jeff Bridges Sleeping Tapes

Jeff Bridges Sleeping Tapes

There are some subtle interactions going on here, like the parallax-y and 3-dimensional nested heads of Jeff Bridges and peekaboos from under the album covers. Since this is one long scroll, it’s always a good idea to have the music player handy as a fixed element to the page.

Palaxy Tracks

Palaxy Tracks

I like the layering of one section on top of the other as you scroll down, reinforced with translucency. The typography and layout are also lovely—doesn’t feel like a typical music site, but one of a portfolio with lots of stories to tell.

Jana Kirschner

Jana Kirschner

The photos are a bit freaky, but there’s a graphic design-y treatment in some places that adds a modern touch. The scattered dots in the track list section let you switch between album covers and additional artistic shots—an interesting take on the carousel/slider we’ve seen so many times.

Sound City Project

Sound City Project

First of all, I love the logo and its overall elegant, Art Deco-esque feel. Second, I like the weird swoosh sound it makes when I go to another page like the About or the City list, although I personally prefer the sound not stopping at all. And for some of these places, you kind of wish there was video if you didn’t use the site as your ambient noise source.

La Grande Evasion

La Grande Evasion

I wish there were playback controls, but this site sticks to the traditional radio station format. You can click through for additional artist info and iTunes links, which is useful.

Social Media Weekly

Create unique, extraordinary websites with Squarespace. No experience necessary!

Interface Design, AccessibilityThe best icon is a text label
“Let’s talk about icons now. They’re an essential part of many user interfaces. The thing is: more often than not, they break clarity.”

Interaction Design, CSSAnimation Principles for the Web
“Long established as fundamental working practices at Disney, the 12 Principles of Animation were published as “The Illusion of Life: Disney Animation” in 1981. These principles describe how animation can be used to immerse viewers in a believable world.”

Feature
Post

Category
Design Focus

Design Focus: Scroll Activated

Have a nice joyride with these energetic sites that are triggered by the page scroll.

Designs of the Week

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

In Pieces - 30 Endangered Species, 30 Pieces.

In Pieces – 30 Endangered Species, 30 Pieces.

Thirty endangered species deconstructed into thirty geometric shapes, with information and posters/wallpapers to support the cause.

Scroll Slow. Have Fun.

Scroll Slow. Have Fun.

Do as it says! We’ve seen this effect on another site before, but here it’s the focus.

Monocle Voyage

Monocle Voyage

A nice split layout with panes of content that cover one another, in alternate succession.

Hello I'm V

Hello I’m V

A trippy exercise in 3-dimensional graphics and animation, and quite inspirational to boot.

Social Media Weekly

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

CSSUsing Flexbox today
“Flex’s features will add an important set of tools to how we build, not by replacing what was there before, but improving upon how we build today.”

Interface DesignAffordances: The Designer’s Secret Weapon
“While affordances might not be a top priority for tool-makers, for interaction designers they are absolutely essential – otherwise users wouldn’t know what they can and cannot interact with.”

PerformanceWhat Does My Site Cost?
“Find out how much it costs for someone to use your site on mobile networks around the world.”

Feature
Post

Category
Design Focus

Design Focus: In Depth

The sites featured this week also play with perspective & depth, prominently distinguishing between foreground & background, particularly when one moves the mouse.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Hello Monday

Hello Monday

Each project is a screen of content with a matching color palette, with the description area acting as translucent glass overlay. There’s something quietly elegant about the details here.

Cultural Solutions

Cultural Solutions

Here it’s the layers of circles that move corresponding to the cursor, and you can see it as a repeating graphic element in other places. Unlike the previous design this is quite bold and may even come across as “young”.

2A Studio

2A Studio

All the other objects here blur out of view when you hover on something, then present extra details. It’s probably the most realistic presentation of a 3D space with its freeform images and layout.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

TypographyModular Scale

Responsive Web Design – Responsive Navigation for 73+ Languages

CSSEasy Textures with CSS Masks