lines

Design Focus: Fall In Line

November 26, 2015 By Sophia Lucero

These sites feature prominent lines that steer your way of reading and browsing the page.

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.

Lovely illustrations in an orange and navy palette, with full-screen popups that appear when you click on the ‘info’ icons.

It probably isn’t appropriate for other online shops, but the freeform arrangement of the products as you scroll down is a welcome change from the rigid grid that defines majority of e-commerce. Hover on one article of clothing and short wiggle animation.

I always enjoy a mad scientist lab motif in the design, and this one even has a robot that lets you shoot Walter White.

A super simple design that only makes use of icons (is that Wingdings?) and dotted lines that are drawn as you hover on one glyph and move to the next. Clicking loads the project description, and all the icons’ switching from one glyph to another that act as the loading “spinner gif”.

Social Media Weekly

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

Web Typography – Seriously, Don’t Use Icon Fonts
“If you won’t stop using icon fonts for people with screen readers, people with dyslexia, people with browsers that don’t support @font-face, people who randomly didn’t load the icon font once for some reason, or designers who just want their icons to look right on-screen…”

Development – Key Considerations For Designing A Cross Platform Application
“To help you streamline your app design in an optimal fashion, here, is a list of noteworthy aspects that must be kept in mind while designing cross platform application.”

Design – Designing destinations at Lonely Planet
“We want to place an emphasis on organization, tools that help people quickly find the top things to do in each location, and a curated set of places and experiences that help people get to the heart of a destination.”

Friday Focus 09/24/10: The One Page Experience

September 24, 2010 By Sophia Lucero

Some of the most interesting interactions I’ve seen done on websites utilize the one page format. Is it because there are fewer pages, fewer elements that should be easier to manipulate? Enjoy these one page wonders on this week’s Friday Focus.

Designs of the Week

I love how the navigation is a floating chunk of land consisting of various buildings (and the robot mascot) but uppercase everywhere is a bit much.

The lines that play off of the logo work great. Looks freeform but still follows a grid. Uncovering each image in the stack scrolls the page down little by little—I don’t know if that’s intentional but it’s a nice subtle effect.

Sliders would be a lot nicer if they could be controlled via the mouse wheel. But it does make sense in this design.

The zoom on hover effect on the images is a good touch that hasn’t been overdone (yet). The continuous line running throughout the design, though, is a familiar technique for horizontal scrolling.

I like how all the sections are connected this way, and the connecting lines align with the top navigation. That’s actually really smart.

The use of rainbow stripes gives just the right amount of color to the design without looking too overwhelming. I have to wonder though: should this site have a footer, or is this enough?

Another thing I wonder about: does it make sense to still have an indicator of which section the page is currently at, considering they’re clearly demarcated and everything? Anyway, I like the big text and bold colors, as well as the photo tooltips. And the walking fat man of course!

Now this approach feels so close to a brochure. It’s very simple but still feels quite novel.

This one feels a bit similar to previous in “experience”. Love all the subtle lines and shapes in the background. Additional props to their blog being designed the same way, because lots of one page sites have completely different looks for their blogs.

Beautiful illustrations despite the overdone sky-to-underground style, although the typeface almost steals the show for me. Somehow Trebuchet looks really good on this page!

Social Media Weekly

Design – Defining User Experience as Brand Experience
“Whether or not you realize it, user interface (and by extension user experience) is as much about the branding of the business as it is about the logo, product, or day-to day business.”

CSS – CSS3 Support in Internet Explorer 9

CSS – Are CSS Frameworks Evil?
“From what I can tell, designers and agencies that work with frameworks on a regular basis tend to use either Blueprint CSS or 960 Grid System (often abbreviated to 960gs). Yahoo!’s YUI Grids is also a popular one. These were the three frameworks I experimented with.”

Friday Focus 07/09/10: Background Repeat

July 9, 2010 By Sophia Lucero

This week on Friday Focus: it’s backgrounds with repeating patterns, a well-loved technique that doesn’t go out of style.

Designs of the Week

The logo doesn’t quite match the vintage look but it draws enough attention like the other elements: large headers, power lines, icons.

Love the snappy slide out animations on the images and the gray/pink color scheme. The details are pretty much perfect and it’s just the social media buttons that look out of place.

Great treatment on the text, and the purple/black/white theme is quite elegant.

I absolutely adore the idea of using not just a flat graphic pattern as a repeating background, but multiple patterns and photos in boxes. The only question is if it’s too distracting for the content, which I think isn’t, because if anything it keeps me glued to this page!

Extremely subtle pattern, but it’s there. Social media buttons look better blended; the letterpressed look helps.

Using your logo as your background pattern? Brilliant.

Again, logo as background pattern, but what really catches my attention here is the transparent and angled images in the carousel.

Love how there’s barely a straight edge in this design, just mostly ribbons and fancy frames.

Striking, but is that Comic Sans I see in the footer?

I actually like that the background is a much larger pattern than what we usually see, which makes it look different from the wallpapered look. It’s also great that the images blend in the same pattern to reinforce rhythm and consistency.

I’ve run into this look so many times now, but I don’t really tire of it, and it’s done really well here. However, for such a sweet and elegant design, I’m wondering if the gray in the navigation is a bit too dark.

Doesn’t this make you nostalgic for the high-gloss designs that have now been replaced by the more subtle ones these days? And actual sparkles! What a fun design.

Social Media Weekly

Community – HOW TO: Get the Most Out of Q&A Sites
“There are ways to ask the best questions, provide great answers and ultimately build your reputation; here are eight guidelines that can help.”

Design – Icon Reference Chart
“A comprehensive chart of icon information for various platforms and devices”

Design – 365psd
“Download a free psd every day for a year”

Friday Focus 05/27/10: In Your Face Illustrations

May 28, 2010 By Sophia Lucero

This week on Friday Focus: illustrations that appear front and center in these websites, because we want them big, bright, and beautiful.

Designs of the Week

Highly detailed and scrumptious “pie chart”! The colorful illustration style and metaphors all the way into the footer not only adds interest but are artfully done.

I just love a design that breaks out of the box. Once again this is a lovely work of art, with touches of calligraphy and fascinating shapes growing out of the swirls. The inside page design is more organized but keeps this look in the header.

It’s great that you can find lots of clickable elements in the illustration itself, and the metaphor really works. The hand-drawn, watercolor style carries over to the other page elements like the icons. I wish the form fields and buttons joined in the fun too.

The center-focused layout works well, as does the bold black text and buttons, greens, and oranges.

Showcasing your work in the biggest, widest way possible is a surefire way to set the look and feel of your site. In this case it’s spilling with bright pinks and trendy type.

Some quieter shades of pink in here but still striking. Notice the recycling of the hearts, stars, roses, and leaves in the rest of this one page site.

Super-wide layout with a sprinkle of parallax, -webkit-transform, and subtle jQuery hover effects. The most exciting portion is the contact form at the footer.

I love this sketchy look accompanied by a pattern of ocean waves. (You can actually download it as a wallpaper if you want.)

This isn’t a groundbreaking layout or look but it somehow feels different. A case of letting the picture speak a thousand works, perhaps?

Topnotch icon work and typography. Just look at it. The vignettes in the corners are a bonus.

Fantastic illustrations, but other design details fall a little short of its elegance and whimsy.

This one, on the other hand, overflows with whimsy! Nothing says it like a unicorn and a mustache sign in icon.

I like that the rabbit and its hole is a mini power line leading in to the next section’s boxes. The slanting boxes and buttons are great too.

Social Media Weekly

CSS – Efficiently Rendering CSS
“I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?”

CSS – Using CSS3 Transitions, Transforms and Animation
“These demos are showing of CSS transitions, transforms (2D and 3D) and animations”

JavaScript – Javascript shorthand for cleaner code
“A few ways to save on some bytes in your Javascript code, as well as making it more readable and quicker to write”

Optimization – 46 CRO/Conversion Rate Optimization Resources for Web Design, SEO & Social Media Experts

Friday Focus 05/07/10: Power Lines

May 7, 2010 By Sophia Lucero

This week on Friday Focus: website designs that use strong lines to guide the eye in navigating around them.

Designs of the Week

I enjoy the textured starry night look and all the rotated text.

Not pictured here, but it’s the microphone wire that traverses the whole site, connected to the amplifier all the way in the footer—very neat. Beautiful illustration work, “Mad Libs” style forms, and typography.

Colorful but not overwhelming. Love the dotted lines repeating everywhere, including the submit buttons, which is a great way to soften the corners up.

Other major design trends going on here: the outerspace look and bold uppercase text.

I like the subtle gradiation of color on the broken lines. But I’m not too sure why one uses <span>s instead of more meaningful tags like <strong> or <em>.

“Follow the road to discover great American craft beer.” Great concept. And the black road echoes the broken lines from the company logo.

We’ve seen this masking effect before and here’s another take on it. Content styling needs a little more refinement (it screams Kubrick, the default WordPress theme) but it’s the illustration that shines.

White on yellow is a little too bright for people, I think, and copy could be improved.

The rainbow stream of rain and the reuse of clouds in the flowchart is really nifty.

The hand-drawn touches here are a bit subtle, you almost want more.

I like that the color-coded folded ribbons also serve as borders for different content areas.

Social Media Weekly

HTML – A Brief History of Markup
This is Chapter 1 of HTML5 for Web Designers by Jeremy Keith.

CSS – CSS Posters
“I decided to create some simple CSS3 posters based on designs that I’ve already created before.”

Design – Visual Hierarchy is the Art of Managing, Not Eliminating
“Visual hierarchy, the classification of elements according to importance and relationship to other elements, tends to be one of the most ignored and underutilized principles of design.”

Design Focus: Fall In Line

Designs of the Week

Social Media Weekly

Friday Focus 09/24/10: The One Page Experience

Designs of the Week

Social Media Weekly

Friday Focus 07/09/10: Background Repeat

Designs of the Week

Social Media Weekly

Friday Focus 05/27/10: In Your Face Illustrations

Designs of the Week

Social Media Weekly

Friday Focus 05/07/10: Power Lines

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

4 Tips to Personalize E-Commerce Websites

Search