• Home
  • About
  • Contact
  • Advertise

Devlounge

Design, Develop, and Grow

  • Home
  • Code
  • Design
  • Design Focus
  • Interviews
  • Publishing
  • Strategy
  • Webapps
  • Extras

Can You Make It Work? Pushing The Limits Of Creative Web Design

April 21, 2016 By Devlounge

With the number of innovative, yet intuitive sites on the web today, creative web design is vital – it draws readers in and keeps them interested. In pursuit of the most interesting design, however, some designers push the limits too far – producing unreadable, distracting, or an otherwise poorly organized product. And when it comes down to it, unreadable loses to boring every time.

How do you know when you’re pushing the limits of creative web design successfully? Take a hint from these sites and you’re sure to get great results. [Read more…]

Design Focus: Dots & Circles

October 15, 2015 By Sophia Lucero

Emulating the circular form is always an intriguing exercise because of its technical and aesthetic challenges, especially on the Web. So every year it’s a delight to see designs that explore the “perfect shape” and take it to the next level.

Designs of the Week

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

Arc
Arc

I love the way the arc of the circles shift as you scroll down and the text comes in, which are also laid out in a quietly elegant way. The “hamburger menu” does not sport 3 lines but two, which morph into a an “x” or close button once opened.

Seven Brief Lessons on Physics
Seven Brief Lessons on Physics

I don’t know if the book cover inspired the site design, or it was planned in sync, but this site is the perfect digital companion that interprets the scientific lessons in a dynamic, interactive way, from the illustrations & animations to the audio excerpts.

Junior
Junior

More mesmerizing animations in between messages the company believes in—interestingly this is the focus of the site, instead of the common sections like work and people. For the most part it’s black and white, with sprinkles of thin lines and small dots of light colors. Click “More” to dive into their background, or “Less” for the contact info.

Garbett Design
Garbett Design

A sheet of transparent dots that slides up when you click, revealing two main sections: their selected work, and their studio. Bright, solid blocks of color match their geometric aesthetic in their portfolio. This site also also bucks the trend of placing their contact/social links at the bottom, and instead are readily visible at the top.

codedoodl.es
codedoodl.es

Hovering on the red circles transform them into diamonds and animates the thumbnails of the code experiments. The text blocks on the page also change into random character strings for the “Matrix”-y effect.

SolarBeat
SolarBeat

Another beautiful experiment combining science, visualization, and also music. The concentric circles represent both the paths of the planets and a vinyl record playing the notes based on the speed of their revolutions around the sun, with several parameters you can tweak.

Chris Wang
Chris Wang

Icons of the designers’ projects are arranged radially around his initials and load in an overlay when clicked. What I find interesting is the NDA projects are also displayed—although the images are pixelated, some details about the work is still given so it’s a good approach to add it to one’s body of work.

Blackbox
Blackbox

Beautiful animation of a 3D globe with animated “boxes”, representing their product, flying all over. This is contrasted with friendly drawings of their team in the bottom half of the page.

Social Media Weekly

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

User Experience – How to Run an Unmoderated Remote Usability Test (URUT)
“Usability testing is a super flexible technique that allows for the assessment of a variety of aspects of an interface including the broad product concept, interaction design, visual design, content, labels, calls-to-action, search and information architecture.”

CSS – Animation Advice from a CSS Master
“By using CSS for animation and transitions, you’re moving those tasks from the JavaScript thread to the graphics processing thread. When using JavaScript for animation, you run the risk of other JS operations being held up until the animation completes. With CSS, the JavaScript portion of your pages remain available.”

Design – The Salesforce Team Model for Scaling a Design System
“I believe that even the best systems need human guidance to succeed and survive. For us, that means helping and empowering designers to produce high-quality, brand-aligned, system-minded work.”

Design Focus: Work is Play

October 4, 2013 By Sophia Lucero

In this limelight this week are sites whose companies develop games for a living. It’s interesting to see how varied all their styles are, as reflected in their homepage designs.

Designs of the Week

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

BlackMoon Design
BlackMoon Design

A quintessential game site featuring pixelized art on an isometric pane and 3d parallax hover effects.

Mochi Media
Mochi Media

The site could be tweaked to the latest techniques such as web fonts instead of Cufon but the red-blue contrast, as well as the accent orange and green for the inner pages is nice.

HydraGames
HydraGames

This look hasn’t completely fallen out of favor especially in this genre though I’d like to see a more interactive twist on it.

Kalafior Games
Kalafior Games

Minimal and maybe even underdesigned, but I’m with this content-as-design approach. Letting the colorful scenery and unique shapes from each games shine.

Frostbite
Frostbite

This one has all the elements of what’s “in” today, in 2013: responsiveness, big and beautiful photographs, a good pick of typefaces—which is an elegant but edgy enough way of putting the game in this game-related site.

Social Media Weekly

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

User Experience – The URL as User Interface Design Pattern
“They are easily passed around and can really help a service grow.”

CSS – How a CSS Triangle is Made

Mobile Web Design, E-Commerce – 6 Mobile Checkout Usability Considerations
“Throughout all our usability test sessions of mobile checkouts this extreme lack of page overview was observed to have severe implications on the user’s checkout experience and their ability to even complete a mobile purchase.”

Design Focus: Highlighted

September 27, 2013 By Sophia Lucero

The sites we’re discussing this week have translucent markings and shapes floating on top of the main content, as though they’ve been annotated with bright, neon highlighter markers. Do they add new depth to the designs or do they look distracting?

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.

Between Red & Toe
Between Red & Toe

The homepage is a a gallery of pictures included in each of the blog’s posts. There’s no other means of navigation except through those photos. Hover on one box also hovers over the adjacent ones, but because the number of photos per post isn’t a uniform number, the hover state happens across multiple rows. On the post page, the header is parallaxed and hide under the post content as it scrolls into view.

Connect The Dots
Connect The Dots

Each time a new screen loads, new line paths animate and cross over the different images and content. You could look at it as the more prominent version of the spinner gif or loading bar. In a way it feels like graffiti that breaks the neutral, minimal look of the site.

Sunera
Sunera

Besides being used as a pattern on the slider photos and the hover tint for the portfolio images, the bright green also highlights other graphic elements to another largely black and white design. It is, however, unreadable as a link color.

Akershus Eiendom
Akershus Eiendom

Similar approach here, although it’s basically just rectangles.

Boat Studio
Boat Studio

That blue is a little amusing actually because you know that by the name of the studio, it symbolizes a body of water the site is “floating” on. After you leave the site for a while there’s a screen saver effect going on where the content disappears for a while and a slideshow of the portfolio appears.

Social Media Weekly

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

Optimization – Tools for image optimization
“Where possible, it’s best to try automating image optimization so that it’s a first-class citizen in your build chain. To help, I thought I’d share some of the tools I use for this.”

User Interface Design – On Writing Interfaces Well
“Aesthetics are debatable, but writing is essential. Peel away the layers of styling and you’ll be left with words. Writing is the meat of a design, and it’s one of the hardest things to get right.”

CSS, Responsive Web Design – 7 Habits of Highly Effective Media Queries
“t’s important to understand that not every aspect of your design needs to neatly fit into small, medium or large breakpoints.”

Friday Focus 02/10/12: Final Frontier

February 10, 2012 By Sophia Lucero

This week on Friday Focus, we’re exploring outer space. Get ready to blast off!

Designs of the Week

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

Quazar website
Quazar

Lots of animated objects on this page, from the space dust to the ribbons, icons, and buttons sliding back and forth on hover. I like the gleaming borders and the group photo on the “Design Troopers” page with the helmets to drive home that space motif.

Team Viget website
Team Viget

This one’s a horizontally scrolling site with a fun little animation that tilts back the objects on the page to their upright state as you page through each screenful. The use of an outer space view of the earth for a map is also a clever idea.

We Came From Mars website
We Came From Mars

Space designs are usually in cooler colors but it’s all hot hot hues here due to the Mars theme. I like how the two M’s in the logo look like a spaceship too. There’s also a nice “folded paper” background in the middle, and to drive the illusion of depth home, some parallax scrolling with objects floating in the foreground (not background). Also check out the astronaut heads in the second to the last section!

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

Social Media Weekly

User Interface Design – Pea.rs
“Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.”

CSS, Web Standards – CALL FOR ACTION: THE OPEN WEB NEEDS YOU *NOW*
“Without your help, without a strong reaction, this can lead to one thing only and we’re dangerously not far from there: other browsers will start supporting/implementing themselves the -webkit-* prefix, turning one single implementation into a new world-wide standard. It will turn a market share into a de facto standard, a single implementation into a world-wide monopoly. Again. It will kill our standardization process. That’s not a question of if, that’s a question of when.”

Next Page »

Code & Tutorials

Which Front-End Development Languages Will Grow in 2017?

Your Guide to Leveraging APIs as a Developer

Bitcoin Processing Website Integration For Web Developers

Website Security For 2016 That All Developers Need To Know

5 Reasons You Need to Be Using jQuery

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

Best Infographics for Modern Web Designers and Developers

Search