html5

Design Focus: New Age Editors

March 1, 2014 By Sophia Lucero

Check out these modern tools that will help you build websites faster and better than ever before, and the design patterns they employed for their landing pages—from animations to familiar color schemes.

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.

Social Media Weekly

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

Web Standards – Code Guide by @mdo
“Standards for developing flexible, durable, and sustainable HTML and CSS.”

Design – The Troublesome Misconception of Parallax in Web Design.
“The sites above are either using different scroll effects to simulate movement of objects not naturally expected by the user, or simply sliding two planes over one another at different scroll speeds.”

User Experience – How we work
“We always start by trying to understand the problem: the users of the website or product, the organisation on their customer strategy, the goals and needs of the project, who’s in charge and who isn’t.”

Design Focus: Interactive Music & Film

December 1, 2013 By Sophia Lucero

Enjoy the holiday season with these clever interactive music videos right in your web browser.

Designs of the Week

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

The Wilderness Downtown: We Used To Wait by Arcade Fire

I've Seen Enough by Cold War Kids — I’ve Seen Enough by Cold War Kids

Social Media Weekly

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

Programming – URL Rewriting for the Fearful
“I think it was Marilyn Monroe who said, “If you can’t handle me at my worst, please just fix these rewrite rules, I’m getting an internal server error.””

Design – My Design Principles
“In the interest of openness I thought I’d share my set of design principles that I have been experimenting with for the last few weeks.”

JavaScript – Learning jQuery with Street Fighter and Hadoukens
“You’ll learn to select elements, modify them and we’ll even get to use some really cool jQuery animations.”

Design – Updated List of The Best Black Friday Design Deals
“Keeping track of all deals going on during Black Friday and Cyber Monday can be tough, so I figured it would be handy to put together an up-to-date list of the best deals out there for designers & developers.”

Design Focus: Pink and Blue

July 27, 2012 By Sophia Lucero

I’ll always remember Flickr as the site that capitalized on this color scheme, but it’s great to see sites that express their love for pink and blue to this day. Check out our featured designs this week!

Designs of the Week

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

Even the category icons right after the header/blurb are two-toned. Although the ones on the top right of each infographic, it’s not immediately clear what they mean (although digging a little bit shows me it’s a marker for static and interactive graphics).

I like that the left and right “arrows” use fairly large photo thumbnails instead, although retaining arrow shows would have been nice to maintain the visual cues. There’s an cool, differently-arranged slider in the Products page: it scrolls vertically—the product slides down while the text slides up—and a vertical column of stars in the middle serves as navigation. Which fits the whole Hollywood motif of the site.

The odds were pretty high that we’d see these colors on a baby website, right? Everything that could carry them does, and the same applies for the dashed borders and uneven but textured swatches for content boxes.

Very bold move to put all the text, borders, and illustrations in this color, but it does make for a striking effect, like that of a stamp on a cardboard box or a blueprint. When you reach a certain point while scrolling, it snaps to the next screen for you. Another cool idea: putting an input box in an object like a t-shirt. It transforms from a plain user interface element to a more user-friendly one.

Elevation Studios website — Elevation Studios

Lots of trendy elements here, from rockets to moving clouds. Not to mention letterpressed text, the execution of which isn’t too subtle. The illustrations and the metaphors they represent are lovely though, e.g. eyedropper icons for sample work.

Social Media Weekly

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

Responsive Web Design – Responsive Design’s Dirty Little Secret
“Responsive Web design, as Ethan Marcotte defines it, is simply a fluid grid, fluid images and media queries. But fluid grids have a dirty little secret: rounding errors.”

Design – A Style Guide
“He asked me to write up a list of “best practices,” if you will, for him to base his visual style work off of. This list is a compilation of my AEA notes, articles and links I’ve saved, experience, and my ideal of what our process may be going forward.”

Web Standards – W3C and WHATWG finalize split on HTML5 spec, forking ‘unlikely’
“Until last year, the WHATWG and W3C had essentially been working together on a single HTML(5) specification, but in January of 2011, Ian Hickson of the WHATWG described a new development model for web standards: the WHATWG would now focus on an evolving, “living standard,” while the W3C would stick to producing static “snapshots” using its traditional numbered versioning system.”

Friday Focus 05/11/12: Rainbow Flavored

May 11, 2012 By Sophia Lucero

Today we’re looking at designs that don’t shy away from a broad color palette and completely embrace the rainbow. Happy Friday Focus!

Designs of the Week

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

The top section is a little confusing, it doesn’t quite say that the video player graphic is just a product of the company by the way it appears, and it takes a little longer for you to make that conclusion (even if it’s milliseconds in your brain). The form elements and icons are lovely, and especially so for the logo, which even casts a rainbow glow behind it. The site’s got a nice dark, but not intimidating feel.

This site is far from perfect but I like a few of the concepts that went into it, like the circular elements and the reuse of patterns.

Intuitive Designs website — Intuitive Designs

I enjoy the background graphic, the color scheme, and the little detail of texture that appears when you hover over the menu links. I also like the layers of translucent boxes that don’t line up. It was also a good idea to space out the letters given the dark background for better readability.

Alexander Zhestkov's website — Alexander Zhestkov

Each strip represents the dominant hue in the project, with the logo on it. Clicking on it expands to display the sample work on it with matching background color, so it’s like you’re completely transported to that “world” every time. A very simple accordion style one page portfolio that’s all about the content.

It’s always a challenge to use bright colors as text backgrounds, so I’m concerned it may be difficult to read for certain people. But I like the non-dominating amount of it used in the design. Everything else is warm and cozy, from the illustrated background pattern to the perforated borders in between content blocks and around images.

Very mod, color-blocked, and designy! Everything seems to be in the right place. Very bold move to use yellow for the form fields.

Social Media Weekly

HTML – How to Safeguard Your Site with HTML5 Sandbox
“Today’s web applications are mash ups of new experiences into one experience. Think Twitter widgets showing the latest tweets about a product. Or Facebook comments discussing an article. Or even just integrated web pages through an iframe element. These experiences can increase security breaches to your site. Don’t stress … there’s a new kid on the block to help you out: the HTML5 sandbox. But before I get to that, let’s quickly review iframe element issues.”

Mobile Web Design, Debugging – Ringmark
“Ringmark is a web-based test suite that measures how well a mobile browser supports the capabilities that modern mobile web apps require.”

Design – Modularity and Style Guides
“It’s one of many techniques I use in front-end website development. Below I’ll introduce a few more and how I link them together for the ultimate Power Up ★”

User Experience – Principles of User Interface Design

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

Friday Focus 02/17/12: Page Flips

February 17, 2012 By Sophia Lucero

This week’s featured designs on Friday Focus are all about books of the online variety, complete with the animated page-turning effects.

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.

I think the book pages need a sprinkle more of depth but the mix of textures both in it and in the background look great. Every spread is a section with a different look.

20 Things I Learned About Browsers and the Web website — 20 Things I Learned About Browsers and the Web

If you’ll notice, this layout only uses the right side of the book once you open it. To the left is a red bookmark which lets you share the current page you’re on. What really drives the book interface home here, in my opinion, are the illustrations. Some of which happen to be animated. The table of contents (“things” actually) is not a list of chapter titles and numbers, but thumbnails containing such illustrations, which you can also find below the book. I think this site has the most natural and aesthetically pleasing page-turn effect of the bunch.

Bert Appward's Field Guide to Web Applications website — Bert Appward's Field Guide to Web Applications

More familiar techniques going on when imitating a real world look: the cloth cover of hardbacks, tabs that are almost always in red, off-white paper, all on a wooden surface with coffee stains to boot. It’s interesting to find the ability to skip to a chapter at the footer of a page, and something you don’t find in real-life books: search.

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

Social Media Weekly

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

CSS, Web Standards – The Impending CSS Vendor Prefix Catastrophe
“At that point, webkit properties will become the de facto standard regardless of any W3C specification. Game over: the open web is closed.”

Design, Content Strategy – Structure First. Content Always.
“Let’s be really clear about this. It is unrealistic to write your content – or ask your client to write the content – before you design it. Most of the time. Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’.”

HTML – HTML5 Please
“Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.”

Design Focus: New Age Editors

Designs of the Week

Social Media Weekly

Design Focus: Interactive Music & Film

Designs of the Week

Social Media Weekly

Design Focus: Pink and Blue

Designs of the Week

Social Media Weekly

Friday Focus 05/11/12: Rainbow Flavored

Designs of the Week

Social Media Weekly

Friday Focus 02/17/12: Page Flips

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Going Meta With Circuit-Inspired Design

Search