Feature
Post

Category
Design Focus

Design Focus: Rotated Side Text

Another text-y trend this week: these ones appear on the edges of the page, either as navigation markers, or links to menus & subsections, all oriented perpendicularly. Is this an alternative to the hamburger menu in tucking away off-canvas navigation, a smart way in highliting important site features, or a cumbersome way of displaying text?

Designs of the Week

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

Rogue Society

Rogue Society

Besides the text, you’ll see familiar elements like a centered logo and several graphics floating over others, while sliding in at a delayed pace. Vintage photos and illustrations are scattered all over the site, not to mention certain key words in bold.

Zack Sears

Zack Sears

Black, white, and bright green and blue. As you scroll down, the text on the left switches to describe the section of the page, whether it’s a project or contact info. Hover on and it reveals the next few links you can skip to—take note that it doesn’t show the whole menu, just the ones you haven’t scrolled to yet.

Weightshift

Weightshift

A relatively unusual color combination for this section, as the other top-level pages use neutral grays and creams. Each page also carries a slightly different layout to fulfill the functions the section needs, and that all happens with almost zero imagery. On the work page, you’ll find them as masked textures on the case study titles.

Make

Make

The scribblings in the center actually move according to your cursor movements, also in layers, while the rotated words on the side lead you to the rest of the site. Also another site that does not shy away from the purest shade of #0000FF.

Hunt & Co.

Hunt & Co.

On this site the sideways text span the entire height of the page and the whole area is clickable. To the left is the site menu, while the right side shows selected works. It’s only when you select a link from either side that the middle area gets filled, and it’s another approach to layout minimalism.

Faculty Department

Faculty Department

Accessibility-wise, I’m uncomfortable with the controlled scrolling (when the info section is revealed, you’ll still be scrolling the main content unless you use the scrollbar), the thin lines, the tiny text, but browsing this site feels like reading an elegant little book.

McColl Center for Art

McColl Center for Art

Lots of clever things here: that M-shaped image continuing the main photo actually displays the institution’s logo when you hover, how the lower content scrolls over the header and footer, even the way the event headings on the sidebar are designed, with specially-designed icons for their “spheres of influence”.

Social Media Weekly

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

Design – 13 Ways Designers Screw Up Client Presentations
“…and one weird trick you won’t believe works every time.”

CSS – Getting Started With CSS Audits 
“With these tools, you’ll be better prepared to clean up your CSS, optimize your site, and make the entire experience better for users.”

Typography – On Web Typography: Smart Quotes
“Punctuation is a system. That’s why proper quotation marks and apostrophes look like they’re part of the same family as commas, periods, colons, semicolons, and more, whereas straight quotes don’t.”

User Interface Design – The laws of shitty dashboards
“Hopefully, these anti-patterns can help PMs, designers and engineers reduce a bit the amount of time wasted building and looking at shitty dashboards.”

Feature
Post

Category
Design Focus

Design Focus: Fill in the Blank

This design pattern also happens to live on the copywriting aspect of the website: a tagline that flashes different words or phrases, often to describe the target audience of their product or subject. You’ll see how each site chose to swap, highlight, or animate the letters into view. It’s another way to make the site more dynamic, and possibly even intriguing.

Designs of the Week

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

Pixelapse

Pixelapse

A few combinations at work here: serifs & sans serifs, photographic backgrounds & “flat” vector artwork, static images & animated ones. I like to think it’s a mix between traditional and real-world concepts working together with the digital and modern flows & concepts.

Microcosm

Microcosm

I quite like the illustrated faces greeting you on the homepage, particularly with quirky, striking expressions that stand out. I think the features page could have focused on a screenshot-tour first before busting out that massive comparison table.

100 Years of Design

100 Years of Design

Very interesting to have the iconic art and design pieces flashing in part over the web page. The navigation goes sideways for the main sections, then downwards for its subpages. Don’t be fooled by the grays on the home screen – this site is not afraid to use bold, bright colors even with the text.

One Iota

One Iota

Newcomers get this “puzzle” screen (which has several variations) that expects you to drag the letters into the correct blanks to spell out their name. In a way this site also starts out as a screen with a massive logo first. Inside the color scheme changes to match each item in the portfolio, and the images are a mix of shapes derived from the graphic design used in the project, framed shots of that put the project in context, and standalone objects that “float” outside those photos. Feels playful and even a touch retro.

Sketch

Sketch

At the top you’ll find beautiful, detailed application icon design that Mac apps are typically known for, while the rest of the icons are simpler.

Social Media Weekly

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

CSSNaming CSS Stuff Is Really Hard
“Class names within a given category tend to share maintainability characteristics. If we make naming decisions with these categories in mind, we can make smarter decisions about what we’re calling things–decisions that will make our CSS more resilient to change.”

DesignJunior Designers vs. Senior Designers
“I like words a lot. But sometimes a few sketches communicate a point more simply and memorably.”

Email DesignEmail Design Workflow
“I’m not trying to achieve pixel perfect mockups. Emails never look the same across all clients, so I’m not going to waste time on pixel perfection.”

Feature
Post

Category
Design Focus

Design Focus: Halftone

Adding a halftone graphic filter to images can quickly take your audience to that vintage, nostalgic place, and these websites use it for a couple different reasons.

Designs of the Week

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

An Idea Lives On

An Idea Lives On

Elegant for sure, but I also like how the design feels light. What I don’t like, however, is the fact that after this tribute site had gone past its schedule, the inside links have gone broken and they just redirect to the main homepage of the JFK Library.

Agência Cleek

Agência Cleek

There’s a recurring theme here of industrial/revolutionary elements and stars, set in a very bold, graphic tone. As you scroll down the top navigation hides, except for the bottom part of the cog that reads “design”, which sways just enough to let you know it’s there.

Zises Strategic Communications

Zises Strategic Communications

I like this company’s take on the common slider/carousel element: free advice on communication strategies, which is their specialty. You get a taste of their services right upfront, which is very smart, and they’re styled in a peppy way to break from the usual corporate fare. I would have loved to see more of those illustrations elsewhere though.

Bright Bulb Studio

Bright Bulb Studio

The header is quite fun, but wait till you get to the contact form. I like the combination of these blocky fonts and just a touch of handwriting.

Social Media Weekly

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

CSSCommon practices do not necessarily mean best practices
“Be critical of everything. Do your homework. Think outside the box. Think for yourself.”

HTML, CSS, JavaScriptMedium’s CSS is actually pretty f***ing good.
“As we continue to grow our story pages and push them to the next level, you can imagine how getting accurate, reliable measuring tools around layout and rendering performance is incredibly important… and kinda just sad that we don’t already have in 2014.”

Typography, Webfonts, OptimizationMinimising font downloads
“When it works, this is a great feature, especially for sites that handle a variety of locales, sites that allow users can submit their own content, or even just for downloading that fancy-ampersand font only when it’s needed.”

DesignMichael Bierut On (Design) Bullshit
“In discussing design work with their clients, designers are direct about the functional parts of their solutions and obfuscate like mad about the intuitive parts, having learned early on that telling the simple truth — “I don’t know, I just like it that way” — simply won’t do.”

Feature
Post

Category
Design Focus

Design Focus: Logo First

If the previous featured designs were practically wordless and filled with imagery, this week it’s all about the branding and their huge wordmarks splashed on the first screenful on their websites, above the fold. Is this web design trend more effective than the other one?

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.

H.L. James

H.L. James

The triangular area is made up of several video clips, and as you scroll below the shape is retained to frame the images defining each section.

Cyclemon

Cyclemon

Love the different pastel palettes and background illustrations (save for the “night rider” one) as they are uncovered slide by slide.

Present Plus

Present Plus

Interestingly, no navigation until you reach the footer. Also, the first screen is left-aligned while the rest is more center-oriented.

Nation

Nation

The logos just keep getting bigger. I think they’re going for a flag feel here? It’s cute how the arrow pointing right suddenly curves down when you hover. This one’s layout is also very centered, and every screen is made up of a photographic background, a short description in a monospace font, and an outlined button.

trois oiseaux

trois oiseaux

Another site that has the contact information sliding from the top, and that green is nowhere to be found after you scroll down.

Rotateº

Rotateº

There’s that monospace font again, but when you click on the “i”, the black box becomes a cube and “rotates” to the left, revealing a description on serifs. That’s all there is to the site, but I quite like it.

Promethean IT

Promethean IT

I’m digging this vertical navigation trend as well, not to mention the use of those gradients. Inside there are irregular polygons to accentuate the content. The white text and thin font weight might be hard to handle for some though.

Aquatilis Expedition

Aquatilis Expedition

Effective mood-setter, and I like the stylized button below. I also really like that the sea creatures are bright and colorful against the dark background that almost looks like outerspace instead of undersea. Also, the use of more aquatic textures in the Squad section, I really like.

Cultivated Wit

Cultivated Wit

Love the little wink that the owl gives. There’s also some lovely subtle texture going on in the logo. Below the text uses much more delicate weights and colors, with “witty” easter eggs here and there.

Social Media Weekly

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

Mobile Web Design, CSSMobile-first CSS
“You should use that to target the smallest devices with your default styles and override from there as your content demands it.”

JavaScriptA JavaScript Build System Shootout: Grunt vs. Gulp vs. NPM
“Deciding on a technology is always hard. You don’t want to make commitments you won’t be able to back out of, but eventually you’ll have to make a choice and go for something that does what you need it to do.”

Feature
Post

Category
Design Focus

Design Focus: Let the Art Speak

It’s common these days to use big, bright images for the top section of your site, but there’s a growing sub-trend where there’s little to no text accompanying it. As if to let the art speak for itself, and for you to bask in its distraction-free glory.

Designs of the Week

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

brigsdigital

brigsdigital

There are things in here that I find less than polished but I like the emphasis given to the portfolio images.

United Visual Artists

United Visual Artists

There’s actually some navigation links in the top middle, but you can barely make them out because they fade into most of the slideshow’s photographs. What’s curious is they didn’t choose to add the name of the site/collective in that same area. For the inner pages they adapat another portfolio trend of images arranged asymmetrically, while text and descriptions appear beside the mouse cursor when you hover – which is a very “retro web” design pattern for those who caught it in its original incarnation of custom cursors.

Maddison Graphic

Maddison Graphic

The whole screen is there for you to click on and view details about the work. Inside, you get a dark gray, centered content block with few words describing it, then you scroll down and go back immersed with more pictures.

Perturbator

Perturbator

The “art” on this site is technically the music, but there are some cool stuff going on with the thin, 3d wires and the background, designed to bring the spirit of the record to life. Then the bottom navigation links flicker with an interesting texture, like a textured, neon stream of light. The color scheme and gradients carry over to the other pieces of art inside and the contact form.

Humoristas

Humoristas

There’s that bordered look again, as well as a split layout/animation going on for individual pages. And I’m sure most of you are familiar with this blue and red treatment on a portrait. I find the controlled scrolling a bit unwieldly but one nice feature here is being able to download the faces as SVG vector files—what a cool tribute.

Social Media Weekly

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

Design, BrandingGeneric and overused logos (avoid them!)
“Because of their overused logotypes the company is not able to establish their brand in the marketplace. In this way they’re going straight in the opposite direction than to distinguish themselves from others (which is the whole point of having a logo).”

Responsive Web Design, OptimizationHow we make RWD sites load fast as heck
“I’ve reaffirmed my belief that we don’t need to compromise the well-known benefits of a responsive layout in order to make our sites load as fast as heck.”

CSSCSS Triggers
“I figure we needed a definitive reference for what work is triggered by changing various CSS properties.”

Feature
Post

Category
Design Focus

Design Focus: Type Guides

Here’s a resource roundup to sharpen your typography skills. This week we’re looking at sites that curate beautiful applications of webfonts, so get inspired!

Designs of the Week

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

Free Faces

Free Faces

My favorite of the bunch — the designer’s own application of the glyphs as featured “posters” is just lovely. On the homepage they make one tall abstract painting.

Typewolf

Typewolf

Pastels seem to abound not only in the base design but the featured ones. Content is set in a utilitarian narrow sans-serif and monospace fonts, and one nice feature here is documenting where you can get your own copy of the fonts. Further below there are top 10 lists for different typeface categories.

Just My Type

Just My Type

With muted, organic colors and zero images, this site is all about the fonts from headlines, to paragraphs, to to footnotes.

Fonts In Use

Fonts In Use

This archive covers not just sites but printed material as well, and you can view inline the names of the fonts used, also typeset for demo purposes. Since this is a more comprehensive compendium, the advanced search and view options come in handy.

Typ.io

Typ.io

I like that the samples or screenshots here are much larger than the rest. The look feels less “designy” than the others as it adapts the traditional blog format, and it works nicely.

Beautiful Web Type

Beautiful Web Type

I love the diverse text samples for each typeface: big quotes, small quotes, multi-column passages, or graphic posters, you can see that they are all inspired by the fonts being used. No meta information needed either: all the words link directly to their respective Google Fonts page.

Social Media Weekly

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

CSS, JavaScriptPixels are expensive
“How pixels get onto your users’ screens is something you should know about. Not for the sake of knowing, but because in order to be effective as a modern web developer you’re going to need to optimize for it.”

Design, User ExperienceDesign is the Experience
“Visual design is just as important as Information design, Interaction design, Strategy, Prototyping, Content design, etc. They’re all tools that enable good design. Parts of the process.”

Feature
Post

Category
Design Focus

Design Focus: Better Bookmarking UX

Here’s another new trend to investigate: the evolution of bookmarking into curated and frictionless user experiences.

Designs of the Week

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

saved.io

saved.io

So simple and clever, I’m surprised godfather of modern online bookmarks, Delicious, didn’t come up with it. Here the design to praise is not just its thin, light colors and lines, but a design of a process that makes bookmarking dead-easy: just append “saved.io” in front of a URL to save it. Then to add it to a list, just use “listname.saved.io” instead.

Kippt

Kippt

On othe other side of the spectrum, we have more visually-oriented interfaces. So you save not just a link, a description, and a tag, but also a snapshot of the page or content. It’s useful because majority of our interactions (with the world around us, really) are estabished through our vision. If you ever had that problem of remembering which bookmark you needed when you returned to your cache of link, a visual cue might jog your memory better. Additionally, you can follow fellow bookmarkers and see their saves in your feed. If you like one of them, you can just re-save to yours as well.

Gibbon

Gibbon

On this site the goal is to compile a bundle of links under a specific learning theme, so the focus should be on browsing through the links in a more optimized way. I like that instead of the expected meta data, there’s also information about reading time as well as who completed reading the link.

Oozled

Oozled

This one also takes a similar approach to bundled, themed links, and even beautiful imagery to convey them. The format is more of the firehose feed, where you subscribe and once those bundles are updated, they will show up reverse-chronologically on your account.

Social Media Weekly

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

Email DesignAntwort
“Originally made for transactional Emails with dynamic content so the layouts are thoroughly tested – in live environments with real data and edge cases.”

Web Development, Product DesignHow are apps made?
“There is a method to making an app. Iterative ceremony. Successive refinement not unlike in other crafts. App making as pottery? Place each button atop your bench wheel, sling your mud, refine the reactions on screen to touch, to sound, refine the movement of text, the size of text, the placement of text, typography macro and micro, to hyphenate or not (and if not, why, dear god, why), consider the images, to full-bleed or not to full-bleed, how to dismiss the images — a swipe or a tap or a dreadful [×].”

Web DesignDesigning with Dynamic Content
“The Web is dynamic, so it’s essential for us to design with these important “what if” questions in mind. We must move away from leaving those questions to the very end of our process if we want to create more thoughtful, realistic, resilient designs.”

Feature
Post

Category
Design Focus

Design Focus: Layering

This brewing design pattern breaks out of your typical grid layouts and layers images and text on top of one another. It’s quite an interesting approach that makes website elements feel more like objects that you can more easily interact with, like stuff on your physical desk.

Designs of the Week

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

Siena

Siena

Photos are littered from top to bottom floating over one another with a bit of staggered scrolling, and hovering brings them to full brightness as well as clickable links. Nice nod to the builder’s yellow in the icon boxes; if you didn’t know this was a construction company you’d think this was a design studio itself.

A Chronology

A Chronology

I like this format for a blog so much I’m almost tempted to steal it. Very minimalist though that it’s not obvious it is one. Can’t find any navigational tools or about pages either, which would have been nice to explore especially on a creative, designy site.

Hatsumatsu

Hatsumatsu

Scrolling down brings up the project “layers” one by one, and when you drill down into one of them, the those thumbnails conversely fly out one by one to reveal each layer. Unlike the previous featured site you can hover on the layer to bring it to the top, and scrolling is how you control that.

Social Media Weekly

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

User ExperienceA User In Total Control Is A Designer’s Nightmare
“We can guide users simply by limiting their creative control, which also makes for a simpler tool.”

Responsive Web DesignHarvard Law Review Case Study
“The design itself is both beautiful and functional. The typography is thoroughly modern while remaining firmly rooted in the publication’s history.”

Feature
Post

Category
Design Focus

Design Focus: Animated Logos

The next avenue for interactivity are logos that look brilliant in both static and animated states. Get inspired here.

Designs of the Week

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

Of Another

Of Another

A familiar typographic layout whose minimal looks is broken by a colorful dance of shapes. One takeaway from this portfolio would be: it’s a good idea to screencast website design work along with screenshots.

Kitchen Prague

Kitchen Prague

I enjoy the touch of quirk brought by the hand-drawn icons and words, which are wiggling like the logo. Clicking on the portfolio image once shows the name of of the project and a short description; clicking on it for the second time loads more information about it. Content blocks load asynchronously with a swinging animation.

AmplifiQ

AmplifiQ

This logo suffers a little from getting blurried with native CSS transformations that animate the canvas element into a wavy banner. Softening it up, however, is an interesting contrast to the hexagon/polygon theme. Is it overkill? I like that arranging the images in a non-linear way following the shape edges makes the top-to-bottom scrolling more interesting.

Social Media Weekly

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

Web Design, User ExperienceDesign principles for a payments experience
“Technology will change. People will want new features. Design for the unknown future.”

Interaction Design, User Interface Design, User ExperienceThe Scroll Up Bar
“Less annoying than bars that just sit there as you scroll down, and makes the menu easy to access without having to scroll up to the top of the page.”

HTML, CSSAdaptive Placeholders
“The person who enters a value first isn’t always the same person who sees it later. To solve this problem I tried making the placeholder persist through the typing.”

Feature
Post

Category
Design Focus

Design Focus: Stories To Tell

Some of the best-designed websites have brilliantly crafted illustrations, animations, and copy that come together to create a new world which you can explore and journey through. Let’s the turn the page and journey through these online stories.

Designs of the Week

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

Fountain of Youth Coconut Water

Fountain of Youth Coconut Water

I enjoy the graphic style and interactions employed in this storybook, reminiscent of exotic and ancient texts, with a 3D and a humorous twist.

The Future of Travel

The Future of Travel

This is a bit of the “flat” aesthetic here with the bright colors and subtle shading. The text boxes have arrows pointing in the order that you’re supposed to read them.

Seize Your Power

Seize Your Power

Another site by the WWF on important environmental issues that’s interactive in more ways than one as it lets you control the scene to symbolically take action.

A Search For Better Information Management

A Search For Better Information Management

Has the same spirit of Ben the Bodyguard in a couple of ways: the bird’s eye view perspective and the comic book touches with particular dialogue panels in between scenery changes.

Social Media Weekly

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

Responsive Web DesignWeb Fundamentals
“Web Fundamentals is a comprehensive resource for multi-device web development.”

DesignRedsgned
“A showcase of the very best redesigns from across the web and design-focused websites, featuring web designs, branding, app designs, UI and GUI, and product design.”

Web DesignDesigning design tools
“Designers are building tools to help them explore, prototype and be more creative.”

Feature
Post

Category
Design Focus

Design Focus: Pointy Pyramids

Using triangles in web design has been around for a few years now but it still has that edgy feel to it. Check out another round of sites where they figure prominently as graphic elements and a means of layout.

Designs of the Week

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

Sjøbygda

Sjøbygda

The triangles make for interesting cropping particularly in the featured artists portraits, although I would have loved to see more integration for the below-header parts of the site.

BAU cargo

BAU cargo

I like the way the sub-section navigation is arranged right in the middle, and how the graphic elements were inspired by the building design itself.

Rally Interactive

Rally Interactive

Cool hover effect that turns the triangle into a circle upon clicking. Another microtrend that’s cropping up is putting the meta or side information much higher up the page rather than in the footer. In this case, since the about, clients, and contact content are super short they are inserted dynamically right after top navigation.

Snowbird

Snowbird

I like that there’s a big weather panel on the top right, because that’s what their customers also want to know besides their products. Of course I also like how the cropped pictures in triangular frames are based on their logo, so it looks quite sporty. Most clever of all would have to be the silhouette of a mountain in place of the usual triangle-shaped marker for the current page in the menu.

brizk design

brizk design

There’s a mix of modern and elegant touches on this straightforward page and it works well.

Social Media Weekly

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

Design, ProgrammingWhy Developers Need to Learn Design
“The trope is often that designers need to learn to write code, but in working as a developer on the web, I’ve learned that the value of a design education pays dividends beyond being able to mock up a page in Photoshop.”

DesignThe 12 Principles of Animation

Feature
Post

Category
Design Focus

Design Focus: Stylish Scrollbars

A few years ago, WebKit resurrected the ability to style browser scrollbars the way Internet Explorer first did. These days customizing the scrollbar is still not as rampant or recommended, since it’s not that advisable to mess with behavior that users are already used to, but featured below are sites that went ahead anyway. Some of them have pretty striking results.

Designs of the Week

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

Mezcal Buen Viaje

Mezcal Buen Viaje

The most fabulous and colorful custom scrollbar I’ve seen, designed to match the festive and tribal-themed illustrations on the page, from the vertical navigation on the left to the social icons in the footer. I like that they added hummingbirds that flap their wings as you scroll down; an animation concept used on Andrew McCarthy’s site featured here. Even the slider and gallery are atypical, framing photos in diamond-shaped containers.

weareanonymous.fr

weareanonymous.fr

I love the use of different head silhouettes as masks against their portfolio images to drive home the “anonymous” concept. Instead of the usual grid of boxes they made it quirky and interesting. Scrolling through the projects section you see the scrollbar a bubble label with the year they were made, which I think is a clever and functional way of customizing it. Lastly: check out the way the form fields were arranged on the About/Contact part.

Fine Goods

Fine Goods

The poster boy for interface realism and fine attention to detail. I love myself some minimalist, “flat” designs but I don’t find this “skeuomorphic” look outdated at all. The different kinds of woodgrain, the sliding out drawers on the sidebar, and the shelves connected by ropes, the price tags punching holes into the product images—they all point to a special creativity that comes with this kind of design, and it’s still a delightful experience to have.

Eyewear Brands

Eyewear Brands

More conservative design compared to the others on this list, although there’s some artsy illustrations found within its pages. One notable interaction pattern here is dimming out the rest of the page when one hovers over the top mega dropdown menu.

Social Media Weekly

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

Web DesignStyle guide links
“As a follow up to my article on A List Apart I thought I would put together a list of links that have been extremely helpful to me as I’ve thought about style guides.”

DesignInside Monument Valley: How ‘Impossible’ Sketches Became An Amazing Game
“Wong cracked open his sketchbooks to give Cult of Mac readers a glimpse at how Monument Valley‘s breathtaking designs came to be.”

Interaction DesignMotion Ui Design Principles
“These basic principles I’ve outlined focus more on the what and why, rather than the how to of motion / animation. With the increasing emphasis on motion (largely thanks to the more paired back design of iOS 7) its important that it is implemented with the same integrity and purpose as all the other aspects of Ui design.”