Okay….really? Disney hawks wedding dresses? When I saw this add in the July issue of The Knot magazine, there was nothing I could do but laugh. As if Disney doesn’t have enough to sell.
But enough about my personal views towards Disney’s business practices, and on to the add itself. The first thing I noticed in The Knot is that all wedding dress ads look the same, and this one does not stray far from the pack. While the look and feel of this ad is not particularly bad, the ad does not do a great job of properly portraying or differentiating the product. Had there not been the faint Disney logo, a reader would have no clue that this was supposed to be a Disney princess dress.
According to the Disney Bridal website the particular dress shown in the ad is the supposed to be that of Belle from Beauty and the Beast. It does not particularly look like Belle’s dress for one thing, but also, nothing is the ad is indicative of Belle or Beauty and the Beast either. Perhaps they could of used a more appropriate background setting? Chances are, anyone willing to buy a Disney Princess wedding dress is working towards a themed wedding, so why not play that up in the ad?
Now…is there really a large market for people who want to theme their wedding after a Disney movie, that I do not know. But this goes back to my original point, which was…Disney is hawking wedding dresses? Perhaps, the product concept is the real flaw here…see what The Animation Anomaly has to say about this product.
[…] Thankfully, my fiancée saw right through the whole thing (she came up with the title of this post) as soon as she saw the ad in the Knot magazine. Head on over to her blog see why she won’t be getting one of these dresses. […]
In the past, we’ve discussed Twitter Bootstrap quite a bit. Much more so than its most worthy competitor: Zurb’s Foundation. Now on its third iteration, Foundation is a robust and responsive front end framework used by hundreds of developers every day.
Over the course of several articles, we’re going to jump in and take a look at its various aspects from a complete beginner’s perspective. Today’s topic is my favorite part: the grid. Follow along to see how it works!
If you’re a regular reader of Design Shack, then you probably already know that I’m a bit of a grid nut. Layout is the aspect of CSS that fascinates me the most and I simply love digging around and playing with different grid systems that people create. No, they’re not always perfectly semantic (though some are), but they can be an incredibly helpful way to bust out really complex layouts with very little effort.
The grid that comes built into Foundation is no exception to this rule. It’s remarkably easy to use, has all the features that you could want and adapts quite well to different viewports. Let’s take a look.
Like countless other grids, the foundation Grid is built on a twelve column system. By default, the grid’s width is 940px wide when it is at its full width. However, the grid is fluid, so as your viewport becomes narrower than 940px, the grid will adapt.
What this means on a code level is of course that each column in the grid does not have a static width but is instead assigned using percentages. If we crack open the CSS, we can see that this is indeed the case:
The Foundation grid’s fluid nature helps it adapt as the viewport narrows, but once you hit around 767px, a media query kicks in and simplifies your complex layout into a single column. Obviously, such a simple solution might not always be desirable, so there are ways to intentionally reflow your layout into a four column mobile grid. We’ll see how to do this later.
If you’re at all used to grid systems, Foundation should be really easy to pick up. If you’re completely new to grids, don’t worry, I’ll walk you through it and you’ll catch on in no time.
Basically, Foundation has done most of the heavy CSS layout work for you. The center 940px of the page is split up into twelve columns and various possible column combinations are assigned to classes. This means that, to perform a basic layout, you don’t need to write a single character of CSS. All you have to do is use the right classes in your HTML.
The very first thing that you need to do when adding content to the page is create a row. This is exactly what it sounds like, a chunk of content that will be displayed on the same horizontal plane. All the floating, padding, margins and various layout complexities have been taken care of so you can focus on your content.
To add columns of content, you create a new div and assign two classes. The first class is a number that corresponds to the number of columns that you would like this content to span. So if you want your content to take up three of the available twelve columns, you assign “three” as a class.
The second class that you apply is “columns” (or “column”). This is uniformly applied to all your divs that you want to have the standard Foundation column treatment. Combine these two classes and you should have something like this:
Here I have a nice little container will automatically set boundaries on the content within so that it takes up no more than eight columns. Now, typically (though not always), you’ll want to eat up the entire twelve columns in a given row. We’ve already used up eight columns in our first div, so if we want one more, we’ll write “four columns” in the class area (8 + 4 = 12).
As you can see, we’ve effectively created two chunks of text with a width ratio of 2:1. This makes perfect sense because we used the classes eight and four, which also have a 2:1 ratio. When this really clicks in your brain, it becomes a powerful concept because you can suddenly pull off almost any layout you want using only a few simple class names.
Using the principles that we just learned, we can achieve all kinds of different layouts. Let’s say that we wanted a row split up into four equal sections. All we have to do is use the “three” class.
By now, you should have the hang of how this works. If you have the mathematical ability to divide things into twelve, then you can use this framework. So we can see how this works on a larger scale, let’s jump into a full on complex page layout.
As you can see, we used a lot of different column variations here. We’ve got divs that span all twelve columns, including one with an image, and others that only span three. It all comes together into a beautiful and simple layout. Check out the demo below to see it live.
Now that we understand the basic functions of the grid, let’s take a look at some of the more advanced features.
Nesting is an essential feature of any grid system. It allows you to start a whole new twelve column grid within the main grid. So let’s say you have an eight column span and a four column span, you can divide that eight column span into twelve columns of its own. Crazy right? If you go too far, your brain will fall into limbo but on a basic level, nesting is super easy to accomplish.
All you have to do to nest a grid is create a new row inside of another. Then treat that row like you would any other, no special syntax required. Here’s what it looks like:
What I’ve done here is nested a new grid inside of the eight column span and then tossed four images into that nested div. Here’s the result:
Foundation comes with three interesting ways to mess with how the layout of your grid works. For starters, it’ll often be the case that you want to center a column or span of columns. All you have to do for this is add the “centered” class.
In addition to centering divs, you can also offset and rearrange them. To offset a div, use “offset-by”. So “offset-by-one” will offset it by one slot and “offset-by-two”, well, you get the point.
Here you can see that the class numbers only add up to ten, which leaves two spots left. I account for this with a two column offset. Here’s the result.
To rearrange divs differently in the output than they appear in the source order, you use push and pull classes, similar to in the old 960 grid system.
Now check out the result. Even though the “three” column comes before the “nine” column in the source, the live preview shows the reverse of this.
The logic behind this is usually SEO related. Say you wanted your company name as a header in the middle of the page between two other columns, it may be better for SEO if the company name is higher in the source hierarchy.
By default, Foundation is responsive, but the behavior of this aspect of the framework is super simple. Returning to our big live demo in the “Going Further” section above, when the viewport becomes too narrow, everything is simply slapped into a single column grid:
This works, but it’s not very pretty or robust. Fortunately, there’s a second grid that you have access to that activates with the mobile media query. This grid is four columns and uses the following classes:
These classes are implemented exactly like those for the full size grid. Applying “mobile-three” will cause an item to span three of the four available columns in the mobile grid. With this in mind, let’s rework out previous layout:
As you can see, when I get to the four “three columns” divs, I added the “mobile-two” class to each. This will not affect these divs at anything above 767px wide. However, below that width, each of these divs will take up half the available width.
The mobile grid is an awesome feature that allows you have a ton more control over how your layouts adapt to smaller viewports. In the end, it’s probably a good idea to consider writing a media query or two of your own, but this definitely still helps. Check out the demo below to see it live (be sure to reduce the window size).
With this information, you should be able to get off to an awesome start with the Foundation grid. Responsive layout is no walk in the park and this framework goes a long way towards relieving this stress and allowing you to focus on your content.
Keep on the lookout for more Foundation articles soon. Foundation is much more than a grid, there’s still a ton of stuff that we didn’t cover!
Neon colors are tough to use without clashing with the rest of your design. They work great for signs and lights in real-world applications, but can present major issues in web design, unless carefully implemented.
Today, we’re going to look at ways to effectively use neon colors in your design work, with a list of do’s and don’ts to help you make the most of bold, bright color choices. You’ll be a neon ninja in no time, weaving it through your design work!
“Lime is the new neutral.” I don’t know if this is really true or not, but a wedding planner friend swears by it. She swears that is the “it” color to add to almost any palette.
When it comes to neons, it is definitely true. Lime, neon greens on a dark background create instant impact. The color is fun, engaging and draws users into the design. It’s an easy way to add a pop of neon without overpowering the entire design. (One of the big struggles with neons in web design is they seem to move and can be jarring for users.)
While some bright colors can work together to create an overall color scheme, neons aren’t the answer. Most neon colors have similar color values in terms of brightness and saturation and will all look similar on a screen. This can cause major concerns in terms of contrast and readability.
Go big with a full-screen neon. It’s not something users come across frequently and for a design with little else to compete for screen space, a neon color can provide plenty of impact.
Just be careful to keep everything else on the screen to a minimum. Opt for black text and as few other elements as possible.
Neon colors and white don’t mix. The light from a screen shows through white and many neon colors in the same way, making neon elements almost unreadable on white background most of the time. Avoid it.
Some brand use a neon color scheme; don’t stray away from who you are to make creating a web design easier. The visual presence should be just as bold with neons online.
If a neon color is part of your brand identity, such as Mountain Dew (above), don’t shy away from it. Embrace the color with a design that pushes it to the forefront. The visual differentiation will help set the design apart from other websites.
A neon color is a pretty striking design technique in itself. Don’t go overboard by cluttering it with other effects. You’re likely to end up with something that will totally overwhelm – and turn off – users.
Neon lines, marks, buttons and other accents can help draw the eye to specific elements. Include neon hues inside of other elements to create a point of emphasis or use splashes of neon color to draw the eye from one part of the design to another.
Remember, neons work best where there is a lot of contrast between the neon element and the background. Therefore, neons are often most effective on black backgrounds.
Most of the time neon text present a readability challenge. It can work on occasion with a bold display typeface, but should generally be avoided.
The idea behind a neon is that the color is designed for light to pass through it, such as neon signage. Create a realistic neon effect so that neon accents seem to glow with the same light and tactile characteristics as a physical neon structure.
The balance is not to go too crazy with glowing effects because they can get gaudy in a hurry. A simple glow, though, can bring the neon element to life in a more realistic way.
Another option for creating “glow” could be to use a simple animation that enhances the color in a slow pulsing motion. This ebb of neon light can help draw attention while creating a realistic effect.
Neon colors don’t mix well with others. Most designs featuring neons don’t use other colors, and stick to black and white. This is because the contrast between a bright neon and a more typical palette can be off-putting and feel strange and disjointed to the user.
Neons are just for elements that you create in the design. Imagery containing neon elements can add a fun spark to the design as well.
True neon elements, such as lighting, can be tough to capture in photos. Opt for images that contain almost neon elements – Yoke (above) uses a beautiful combination of colored straws – to create that same feeling.
Keep the imagery simple and user the same concepts of space and contrast (you need plenty of both) that you would if creating a neon element in the design.
Neon colors are generally fun, playful and a bit eccentric. Be careful not to establish the wrong mood by using them with content that doesn’t have the same feeling. While using neon colors can add visual interest, it is not to be used for every type of project.
Make your own neon! Adjust saturation and brightness to create your own custom neon styles. Start with brand colors for a funky concept or just mess around with some hues that appeal to you.
And don’t feel trapped in the it-has-to-be-perfectly-neon space. Play around with almost-neon options that are bright and interesting, but maybe a little less in-your-face. Neon colors don’t just include green, yellow or pink. Neon options can come from pretty much any color with amped up brightness.
Neon colors should not be forced. If you start down the path of using neons and it isn’t working, abandon the idea. It’s not for every project and neon color does not appeal to everyone’s design taste.
Try neon colors for a bold, bright background aesthetic that can bring somewhat bland content to life. A neon background can help “lift” other elements off the screen and provide a fun space for layering, such as the technique from Scale (above).
When designing a neon background, consider colors that have a little more depth and a little less brightness so that color doesn’t overwhelm other design elements.
Modern neon designs don’t have an 80s vibe, although many of the design evolved from it. Opt for neons that work in minimal design frameworks, highlight key content and have bold messaging for a modern feel.
Neon color can be a lot of fun, but the content and messaging should match. Save this technique for just the right project and you’ll be happier with the outcome.