Tag Archives: design

What IS “Flat Design” and Why Should We Use It?

February 3, 2014 Robin 2 Comments

After seeing several webdesign blogs mention “flat design” as a still-up-and-coming design trend for 2014, I was intrigued. “What do you mean, ‘flat’ design? Ain’t the screen flat already?” I thought, jokingly.

At first, I wondered if perhaps the CSS box shadows, pretty text bevels, and all of that had started going out of style–you know, the stuff I worked really hard to master and have just now begun implementing into my new designs. But the answer is a lot more subtle than that.

Flat Design: A Feeling Rather than a Set of Rules

The Ultimate Guide to Flat Web Design is where I began my research, and after perusing the screenshots of several different “flat design” layouts, I began to understand. Not only was flat design already a “thing” on the Web, but it wasn’t necessarily just “flat” as in boring. It was, instead, a certain minimalist approach, a “less-is-more” feeling…and it was EVERYWHERE.

A few examples:

Tumblr’s login form, for instance, has elements of flat design; the fonts are simple, the text boxes are only very slightly rounded (VERY slightly!), and the colors are basic (white, blue, and a touch of gray here and there). And yet, there’s an elegance in this simplicity–there is no high-gloss “Web 2.0” feeling, but it still looks “finished.”

My WordPress login screen is treated very similarly–subtle variations between colors, pictorial icon rather than text logo, and clear, readable fonts. Notice on the right and bottom sides of the form, there is the very faintest shadow, just barely there.

Here’s the most surprising example of flat design, at least to me–this comes from Version 13 of my own domain’s layout! In my search to give my layout a new, icon-heavy/pictorial feel, I quite by accident wove in some flat design aesthetics. You can’t call my color choices “subtle” (LOL), but the simplicity of the icons and fonts still fit.

Basically: Flat Design = Natural Makeup

Flat design is to webpages as “natural” makeup is to faces. I know that’s a weird analogy, but it’s accurate. When you choose natural makeup, the point is to not LOOK made-up–it’s all about enhancing the bone structure and features that are already there, with skin-like shades and very careful, subtle color placement. Flat design does the same thing, with 1px strokes of faint shadows, minimal color choices and simple icons, and only the very subtlest shaping and rounding of page elements.

Where Can You Use Flat Design?

Thankfully, like all web trends, you can choose to hop aboard the “Flat Design Train” or not. The look can be too boring for some and too cold for others, especially if used all over the page. Some projects just don’t need that much minimalism (as weird as that sounds!).

That’s why I personally advocate using flat design for your basic page functions, such as navigation and web forms, and perhaps use a more striking graphic or design aesthetic for news, updates, or anything else which needs immediate user attention. Just as a makeup artist balances a strong red lip with just the barest touches of eyeliner, flat design’s concepts can provide just enough styling to your page to make it look polished, without detracting from your most important content.

Summary

Give flat design a try with your next design–toy around with shading things just right, picking simple yet effective icons and fonts, etc. Who knows, you might find your next idea hiding amid your musings!

Monday in the HTMLab

Don’t Forget to Credit Your Design Sources

January 6, 2014 Robin Leave a comment

Sometimes we get all swept up in the process of design and we forget exactly what font we used, where we found those Photoshop brushes, what site Google Images found that picture, etc. It may not seem like a big deal, but it’s actually important to credit other people’s work, especially when their work has made yours possible. Not only does it create good feeling among the creative crowds who make the stuff you use, but it also raises awareness about their work and may draw more interest their way! In webdesign, we’re all helping each other with links, after all!

So, here’s a handy little guide to crediting your design sources (and adding credits where none were before):

Properly Crediting Design Sources to Begin With

As you find brushes, fonts, graphics, photos, etc., copy-paste the URLs of each site where you found them. Also note the creator’s name, if provided, and their personal work’s website (if different from the source link).
Place your credits either at the bottom of each page of your site, or on a separate page (this option works great for longer lists of credits).
Your list doesn’t have to be super-organized or stiffly written. A simple, casual format like this could work: “I used brushes made by This Girl (WebsiteA.com), found the image by This Girl over at WebsiteB.com, and used This Cool Font, made by This Guy (WebsiteC.com).” (Just make sure you include the links somewhere in that text!)

Fixing or Adding Credits

Check through your files to see if you saved the Readme documents for your downloaded font or brush. Most creators will include at least a little something that can help you credit your source correctly.
If you don’t remember where you got your brush or image, try doing as specific a Google search as you can for it, and comb through all the sites you usually visit for visual design resources. It may be time-consuming, but it’ll be worth it!
If you just can’t remember or decipher what font you used on a design (been there done that), give the WhatTheFont tool a try. Though the process is a little more involved, it’s always been accurate whenever I’ve used it!
If all else fails and you are clueless as to where one of your design elements came from, put a line in your credits like this: “Apologies, but I have no idea where I downloaded this font/brush/image; if this is your work, please contact me and I will gladly put up your link.” Be honest, and you might just make a new design friend!

Saturday with the Spark

Glasses Off: 4 Inspiringly Creative Sites

December 14, 2013 Robin Leave a comment

Sometimes, when it feels like I’ve squeezed all the creativity out of my neurons, I feel at a loss…and then I remember that the Internet is a wondrous place full of other awesome people being creative and posting about it. Once I read about their projects, I find my creative juices replenishing themselves like mad! Here are four sites you’ll want to visit if you’re feeling creatively drained:

Instructables
A classic site for learning how to make things…read through some of these articles and get inspired!

Sortrature.com
From crafts to fashion, wedding ideas to travel, this site has a little bit of everything to delight your sense of creativity.

Demilked.com
All sorts of articles and photos, concerning photography ideas, architecture, and even web design, among others!

FindInspirations.com
A visual catalog of all sorts of design ideas and articles, arranged in a Pinterest-like flow down the page.

Saturday with the Spark

Beginner Beading, part 3: Pretty Patterns

October 19, 2013 Robin 1 Comment

Making beaded jewelry is not just about selecting good beads or perfecting your techniques–it’s ultimately about making beautiful jewelry with lovely beaded patterns.

I don’t claim to be a perfect designer by any means, but I know what kinds of patterns I like to see in jewelry, and that’s how I design my own beaded necklaces thus far. Here are some examples:

This necklace (which is the slightly-messed-up one from last week) displays a couple of pretty design tactics:

Symmetrical patterns–the necklace can be flipped left to right with no change
Colorful beads interspersed with neutral beads (in this case, silver) to help set the colors off
3 sparkly beads used at the center of the necklace (bottom center of pic) to draw the light and the viewer’s eye

A little different strategy was employed with this necklace, my first take on using white pearls in a design:

Vary the sizes and shapes of beads used in a pattern for visual interest in a mono-colored necklace
Use tiny beads to separate larger beads and make them look like they’re floating
Let one unusual bead be the center of a symmetrical 5- or 7-bead pattern (you see this twice in the above pic)–surround the unusual bead with more normal beads to let it take the spotlight

Juxtaposing different finishes of beads in the same color family (here, using lavender) can add a soft effect to your patterns.
Creating a focal point in the center of your necklace can be just as easy as grouping 3 larger, lighter-finish beads and then surrounding them with smaller, darker-finish beads.

Patterned or textured beads can add subtle flair when placed alongside smoother beads.
Don’t be afraid to use oblong and round beads together–oblong beads, especially in clear or neutral colors, can be used as visual “spacers” to make your colorful beads pop more.

(Not sure why this necklace’s beads showed up so green–they’re actually Pacific opal beads, which are blue-green. Oh well!)

Use smaller beads out at the ends of your beading project, and larger beads toward the middle–that creates a “graduated” effect which looks more graceful.
Alternate opaque and translucent/sparkly beads for a playful pattern.

Summary

Working with symmetry, different bead textures and shapes, and colors which play well off each other can make any beaded jewelry project lovely. Try it out–just lay a few beads together on a table and rearrange them to your heart’s content. You just might come up with a randomly gorgeous pattern!

Saturday with the Spark

Beginner Beading: Getting Into the Game

September 28, 2013 Robin 1 Comment

There are a LOT of beading tutorials out there for us beginners…but many of those tutorials expect you to already know quite a bit about the terminology and tools of beading, as I discovered when I began doing some research for this post. If you’re truly a beginner, this can be VERY confusing!

So, for this article, I wanted to help introduce beginning beaders to the lingo and the important tools for making beaded jewelry, as well as giving some bead storage tips and showcasing a couple of basic video tutorials. Let’s begin!

A Few Terminology Tips

Image source

At left, this is a jump ring, used for connecting clasps to jewelry as well as other more complex beading tasks. These can be pried apart and squished back together pretty easily with the right beading tools.

Image source

Jump rings and necklace clasps (like the ones at left) are two types of jewelry findings. Findings are generally the metal or plastic bits that are the foundations of any beading project. (Other examples of findings are headpins for making drop earrings, crimp beads for stopping a bead string from moving around on the wire, spacers for keeping beads a certain distance apart, etc.)

See more examples of findings at the following websites:
Fire Mountain Gems
Brightlings Beads
JoAnn.com

Beading Tools

Every beader needs the following tools for even the most basic of beading crafts:

Image source
These kind of pliers, often called “needlenose” or “round-nose” pliers, help you hold delicate projects without squishing them, and also help you twist beading wire for various looks.

Image source

Additionally, you’ll need these kind of pliers, called “flat-nose pliers,” for squishing jump rings back together, affixing clasps, and all sorts of things.

Image source

These are called “crimping pliers” (or are just referred to as a “crimping tool”); these can help you hold slippery projects (with the spot marked “F”), and they can also mash down things like crimp beads in the spot marked “E”.

Image source

And lastly, this little tool, called a wire cutter, is immensely helpful when you have excess beading wire at the end of a project!

Bead Storage

Image source
You can go and buy storage cases specifically designed for beads if you’ve got a craft supply store in your area. BUT, if you don’t, you can also use fishing tackle boxes (get the clear ones with small compartments) or weekly pill boxes. (Also, you can get creative and repurpose some little containers you have lying around the house, such as baby food jars or empty spice containers. Just make sure the lids of your containers close tightly!)

Video Tutorials: Attaching Clasps and Ending Necklaces

How to Attach a Lobster Claw

How to End a Necklace

Further Reading: Beginner Beading Tutorials

Choosing the Right Size Beading Wire
Beadaholique: YouTube Playlist of Beading Tutorials
Making-Beaded-Jewelry.com

Monday in the HTMLab

Design Fail: Red Backgrounds

July 15, 2013 Robin 1 Comment

In my quest to keep trying new designs and learning new code in webdesign, I’ve come up with some accidentally awesome designs over the years. Some of the code and colors that I thought would probably never work turned out beautifully in the long run. But, as with any trial-and-error process, I have ended up with a few misfires as well. The following design contains one such misfire.

When I designed Version 13 of my main domain last year, I was trying a new type of color scheme–purposefully using contrasting colors.

The problem does not lie in this concept, but rather the choice of red for my website’s background color. Since I don’t often use red in my designs, given that I personally dislike the color, I wanted to try something different in my design color schemes this time around. And for the most part, the resulting color palette of tomato red, creamy orange, and bright periwinkle worked pretty well…

It worked well enough, that is, until I realized how stressful on the eyes that red background was.

The Problem

Though I had taken time to view each page before I uploaded my site, just to make sure it all displayed properly, I didn’t take into account how the colors would affect extended reading. One of my friends brought this up as I was discussing my recent website work, saying, “You know, I love going to your site, but that color hurts my eyes after a while.”

I was stunned, and then, after a moment of thought, I understood. I had made a similar mistake using bright red as a background color several years before, as a newbie designer, and back then, I had received similar comments. But I had foolishly thought that a darker red would not trigger such problems. Obviously, I was wrong. And if even a good friend could not view my page without problems, how badly had the design choice affected visits by other Websurfers?

Great Website Colors: A Balance Between Striking and Relaxing

If I did this design over again, I believe I would choose the same color scheme–but with a definite change. I would reverse the usage of the periwinkle blue and tomato red, making the blue the background color and the red a lightly-sprinkled accent color. The main reason? Blue is a much easier color on the eyes than red; it makes reading website content easier, which would make my visitors much happier.

Yet, as designers, we don’t have to retreat completely into neutral, “easy viewing” colors. Instead, try using powerful, vibrant colors in smaller doses, balancing them with softer, more neutral colors for an overall attractive design. In fact, a little kick of color in the right places can really make your website design sing with purpose!

For instance, I could still use that rich red color, but only sparingly, much as one uses a strong spice in cooking–I could use it to attract attention to updates, draw the user’s eye to the navigation section, or just add bits of visual flair around the mostly-blue page. It would add a little punch of red, but not too much that it distracts or makes the page difficult to read.

Summary

If you’ve learned that your website’s color scheme is a little too strong for people’s eyes, learn from my fail: try making the softer/neutral color the background, and use the strong colors as accents and attention-grabbers. Who knows, all it might take is reversing two colors to positively change how visitors use your site!

Monday in the HTMLab

Hand-Drawn Graphics: Yes, They CAN Be Good Enough

May 21, 2012 Robin Leave a comment

Contrary to popular Web belief, Internet graphics don’t have to be sleek ‘n shiny like technology. In fact, in this age of lookalike layouts and cookie-cutter designs, landscapes of reflective images and shadowed text, hand-drawn graphics can give a touch of rustic personality to a page. A hand-drawn layout, icon set, avatar, etc., can make your page feel homey and intimate–truly “handcrafted.” What’s more, it can make your site seem more down-to-earth.

But not all Web designers are handy with a pen or a paintbrush. (I know I certainly ain’t the world’s best. LOL) It can be daunting to try to put your own artwork on your webpage for everyone to see; you can be paralyzed, thinking “What if it’s not good enough? What if I work really hard on it, and it ends up looking like I used it for toilet paper?”

These are some of the real thoughts and feelings I had about doing my own hand-drawn layouts…and I finally just decided to go ahead and try my hand at it, literally. The following are some of my results:

Examples of Hand-Drawn Graphics

(For each example, click on the image to get a full-size screenshot.)

The Network Look

This, my network page, was my first try at doing a hand-drawn layout. With this layout, based on a real tree I used to climb when I was a kid, I placed buttons and links as if they were flowers and buds on living branches, with my sketch as a simple background image.

I added no color to the actual sketch–I wanted the buttons to be the spots of color in the design, like trees’ natural flower buds and blossoms. (Plus, whenever I add color to my sketches, they automatically turn from “pretty good high-school art class” to “kindergarten art class mess”. Every. Time. xD)

The Domain Look

My domain layout featured a big, sheltering tree like the ones all around my house, its soft, cloudlike branches overhanging the content on either side of the “trunk.”

The “trunk” of the sketched tree stretched down all the way to the bottom of the page, where I had the “roots” of the tree in my footer, seen here. This is probably my favorite footer design to date–it really looks like the “end” of the page, the “ground” rather than just an arbitrary bit of code stuck at the bottom.

This sketch also received no color, because I knew I’d be using large areas of various shades of green in my CSS styles; I didn’t want the actual tree to clash. I also cite my previous difficulties with adding color to my sketches. It just never works out quite as I intend. LOL

The Fanlistings Look

This “flowers & ribbons” design literally framed my joined fanlistings page, and was difficult to code but looked beautiful on the page. For this one, I added a golden color to the flowers using Photoshop, and the overall layout looked much better as a result.

I used the boxed-in design as a way to stretch my design boundaries–the style succeeded with a little image slicing and creative use of HTML tables (yes, I used tables because aligned divs hate me). In this layout, the hand-drawn images define the space but do not detract from the content, like a good area rug in a living room.

The Update Blog Look

My update blog featured only small-scale sketches (a big leaf, a tiny multi-petaled blossom, and a growing flower on its stem). I used the leaf and blossom on the top part of the layout, and the flower-and-stem image in the footer, as seen below:

Using little sketched images in strategic places on the layout (and, again, not adding any color to the sketch itself, but using blocks of color in the layout code) gave it an airy, organic look. Plus, using fewer sketches meant more space for content, should the design need it; I wasn’t sure how much the various tag clouds and category spaces would need, so I went for as much visual space as possible.

Weaknesses of This Design Style

While this does look down-to-earth and homey, it can also look amateurish. (I fully admit mine are not the best in technical execution, but they were the best I personally could do.) In addition, hand-drawn designs can easily be misaligned, angled oddly, or leave crooked lines on a webpage; you can correct many graphical sins with Photoshop, but not everything!

However, if you’re skilled doing pencil-paper sketches (or sketches on a tablet computer with a stylus), you might be able to turn a hand-drawn design into a sleek-looking layout; it would be a worthy challenge! It’s just a little bit harder to get the perfect straight lines and shiny details we’re so used to with the Web these days.

Where Can You Use Hand-Drawn Designs?

In my opinion as a designer, hand-drawn designs are generally better for small personal/informational sites and the like, not big corporate or commerce sites. Any site where you need a personal touch, a more casual layout, etc., a little sketch (or a big one!) can work.

How to Make Your Best Hand-Drawn Graphics

You Will Need:

Pencil
Ink pen
Coloring medium (if desired; paint would need to be let alone to dry and might not scan well)
Ruler (if desired)
Printer paper (clean and uncreased)
Scrap paper
Scanner/copier/printer & computer, linked together

Directions:

Sketch out your ideas on your scrap paper with a pencil–much easier to work with your design when your lines can be erased (take it from me).
When you have something you’re satisfied with, take up your pen and printer paper, and begin transferring your sketch(es) into finalized form, using a ruler as necessary.
Make a couple of copies of your uncolored sketch to see how well the machine picks up your lines, and make any lines darker that don’t show up. (Also, it’s good to have a few copies of your sketch on hand just in case something happens to the original.)
If you want to color in your hand-drawn design by hand, do so now. Alternatively, you can add color digitally with an image-editing program once you scan it in.
Scan in the image–you may have to adjust the contrast, brightness, and other image settings so that the pen lines or hand-added colors don’t look distorted. (I ended up with one sketch that looked like a photo negative because I messed up the image settings…LOL)
Once it’s scanned into your computer, you now have an image that you can use as the baseline for any web project!

Monday in the HTMLab

10 Ways to Make Your Page Look Professional

March 26, 2012 Robin Leave a comment

Last week, I discussed 10 “newbie” web design mistakes, and even showed you a page full of those mistakes, as cringe-worthy as they were.

Well, this week, to balance that out…I’m going to show you 10 simple ways to spiff up your page and make it look just a little better. These are all simple tricks that give your page just that little bit of extra detail, like a shined shoe or a little bit of jewelry for an outfit. Read on, and see what tricks you might be able to add to your webdesigning bag!

#1: Use Gradients and Shadows for Page Dimension

Any time you can add a little bit of 3-D to your page, especially if it’s an important page element like navigation or content, do so. Soft gradients, especially as a background, give a page a colorful backdrop without being distracting, and small shadows help a page element like a menu or content block “pop” off the page. (It also looks more modern.)

Fokal.com
The black-to-gray vertical gradient on the logo and navigation buttons, plus the dark gray-to-light gray gradient in the lower half (content section) gives just enough contrast without being too distracting.

HairStylesDesign.com
The “Popular Galleries” balloon has a slight drop shadow under it, bringing the page element just that much farther forward into 3D.

CollegeFashion
The logo has a glossy look over the text, painting a slight gradient effect over each letter; also, the navigation below the logo has a very slight gradient. (Not to mention the shadows behind the logo’s letters!)

WhoWhatWear
The bottoms of the logo letters, as well as the tops of the navigation’s letters, have a slight shadow effect that make the page sleek.

#2: Use Georgia Font

According to the New York Times, Georgia font is the preferred serif font for web designers–I personally like it for its soft and yet readable look. (It especially looks gorgeous at larger sizes and in italics…but maybe that’s just me. :D)

#3: Choose Colors that Go Together Well or Set Each Other Off Beautifully

Color scheme is one of the more important facets of your web design. If you’ve got a nicely-organized page, but the colors clash, your users’ eyes will not thank you. However, if the colors blend well or provide a touch of lovely contrast, you’ll have a much better user interface overall.

Freshome.com
Using little hints of the full rainbow in Freshome’s design makes it truly a “fresh” design, especially with white and gray to ground it all.

YouLookFab
The bright teal green of the striped shirt used as a background image, paired with crisp white and black (and a little soft gray), render a page that is attractive without being eye-dazzling.

#4: Blend Your Header with the Rest of Your Page

Gone are the days of a completely useless header image that has nothing to do with the way the rest of the page is designed. *…glances up toward my own blog header sheepishly*

Ahem! Pay no attention to that. Headers are now valid places to put navigation and other site information, so you don’t have to fill them with images if you don’t want to. See the examples below:

Unkno.com
Over at Unnecessary Knowledge, the header and the navigation are literally on the same horizontal lines with each other–just at opposite vertical edges of the page. This allows the focus to fall naturally on the content rather than the “frame” (the layout) of the site.

DesignShuffle.com
With a logo and navigation that don’t take up a lot of visual room, more space is left “above the fold” for content–always a good idea for content-rich sites, if you can pull it off.

#5: Employ Different Fonts for Highlighting Content

No need to go font-raving crazy, but using slightly different fonts in various contexts on your page can make your design be that much more interesting. I usually provide a simple contrast between sans-serif body text and serif headings, but the sites below do even more than that.

InteriorDesign
Let’s see, I count…4 different fonts just in this sample (logo, navigation, colorful headlines, caption text). Each one doesn’t compete with the others, but rather plays off them, accenting each bit of content. There’s a good blend of sans-serif and serif in this example, as well.

DesignReviver
DesignReviver’s site uses 3 different fonts–one for big headlines, one for body text, and one for small side headlines (right side of the page), which helps the user know which content is newest and which posts they also might be interested in.

#6: Make Your Links Interactive when Hovered Over

As of probably 2005, users began expecting interactive links, and the way we webdesigners can make that happen has changed some over the ensuing years. From simple a:hover states to Flash animations, designers have literally tried it all–now, the trend seems to be “simple and lovely” rather than “complex and crazy.” After all, what you’re trying to show the user is that they’re hovering over something they can click on; these sites below do a good job of that.

Freshome
Not only a page of lovely colors, but a sleek, animated navigation as well, making it obvious which category a user is hovering over. It’s not too flashy or over-the-top, but provides just the right amount of interactivity for a navbar.

Webmonkey
Though there are few category links in this navigation, hovering over them provides you an instant look at the articles in the category, which helps a user get to what they need faster.

#7: Specify Rounded Corners for Divs and Other Page Elements

At least for me, rounded corners instantly make a page look better–it’s like putting dress clothes on your site. It looks a little more polished and updated than square corners. (Not all browsers accept the “border-radius” rule yet, but you can use images to get around that.)

MakeupGeek
The rounded corners in both the page border (top left) and the navigation bar make this page a little softer and sleeker than it would be if they had gone with default square corners.

HomePortfolio
Though it’s very, very subtle, the rounded corner that divides the white content div from the gray background shows the designer’s attention to detail, and brings the page into the 21st century, as surely as if they’d switched from Times New Roman to…well, anything else.

#8: Design Sleek Icons and Simple but Beautiful Graphics

Thankfully, we don’t have to be detail-oriented artists to make beautiful graphics for our pages anymore–in this age of app icons that are more simple and to-the-point, our site graphics can be just as straightforward and iconic. In fact, that might make our pages even easier to use and navigate; for certain, they look a lot better than busy icons of the past!

Apartment Therapy
Site logos don’t need to make a recognizable shape to befit a site–in this case, the simple, waving orange line transmits a sense of playfulness and innovation just as much as a more complicated logo could, and in less time.

Appstorm
Not only are different types of content noted by different (big) icons, but even the sidebar has a few icons to make navigation easier. The icons are not multicolored or overly detailed either; they’re just basic white shapes or letters, with a solid-color background in a rounded shape. And the site’s logo is a simple lightning bolt–perfect for a site with “storm” in the name.

#9: Include a Little (or a Lot of) Texture

Texture is something I’ve always had a hard time incorporating in my page, because I can never find a texture that I’m really happy with. Yet I know that texture on a webpage gives your background, site headings, links, and even content blocks just a little bit more visual interest, like the examples below:

DesiretoInspire
The textured dark gray background, as well as the roughed-up edging along the top of the page and the uneven “paint” job on the logo, gives the site a literal “rough-around-the-edges” quality…it’s not too perfect and primped, yet it’s still forward-thinking in design. Great for a design site!

InsideFashion Blog
A grungy-textured background in darker colors, contrasted with a lighter-but-still-crumpled header and content div, make this page look like an underground newsletter of sorts, as if it’s truly out of the back pocket of a fashion insider…which is likely exactly what they were going for. 🙂

#10: Align Your Layout in the Center

Nope, not talking about centered TEXT; that was last week. *shudder* But centered layouts are so much the norm in design these days that left-aligned layouts are almost extinct. Users have come to expect a center-aligned page because it’s easier to view, especially on wider-screen monitors. That’s why it’s important to employ this mode of layout design for professional pages–it’s just easier to use!

Keep Designing
Strong contrast between background and content divs make this center-aligned layout easy to understand and draws the user’s eye straight to content.

HerCampus
Here, the background and the content blend a little more, but there’s still a good delineation between what’s decorative background and what’s real content. The user doesn’t have to look all over the page to try to find links and news.

Summary

Adding a little polish to your page may not be confined to these 10 tips, but certainly these design concepts fit into a more professional look. Try one or more of these out in your next design, and see the magic at work!

Saturday with the Spark

My 5 Tenets of Beaded Jewelry Design

July 16, 2011 Robin 1 Comment

I consider myself still an amateur beader in many ways, but I like the process of coming up with new designs for the simple, delicate necklaces I favor. I might not be able to weave thousands of tiny beads together into a wearable maze of color, but I can at least string some pearly and sparkly beads on a wire! 😀

I’ve noticed, though, that I tend to use a certain set of rules when it comes to creating beaded patterns, though–and those rules sparked the idea for this post! Read on to discover how I design my pieces!

Tenet #1: Use smaller beads at the ends of the piece and larger beads in the middle of the piece.

This technique, called “size graduation,” is one of my favorites, especially for necklace design. You start out with small beads at either end of the necklace, and then use larger and larger beads till you get to the center of the piece. This draws the eye to the center of the piece, and also helps the wearer know where the necklace is supposed to be centered!

Tenet #2: Make patterns of interlocking symmetry.

I usually do lots of small patterns to make up my necklaces and bracelets. For instance, on either end of the necklace, there’s usually a couple of little symmetrical patterns; then, closer to the center of the necklace, there is a larger symmetrical pattern that surrounds the centerpiece (usually one to three large beads). All together, this necklace pattern looks like a wearable palindrome, both sides mirroring each other.

Pattern: tiny pink pearl–clear seed bead–tiny white pearl–clear seed bead–tiny pink pearl. This would be great at the ends of a necklace.

Pattern: clear seed bead–tiny pink pearl–small white pearl–tiny pink pearl–small tan/gold pearl–tiny pink pearl–small white pearl–tiny pink pearl–clear seed bead. This longer pattern would be great for building up toward the center of a necklace.

Working with small units of patterns like these seems to create a much better-looking product than some of the non-symmetrical designs I’ve attempted over the years. Somehow, I never finish the non-symmetrical designs–I don’t even get around to stringing them. The symmetrical ones, however, always end up finished. 🙂

Tenet #3: Use colors that play well with each other.

In most of my pieces, I sprinkle in a good bit of neutral and metallic colors, like white, clear, gold, tan, black, silver, or gray–and then I use one or two stronger colors that stand out. Old favorite combos like pink and gold or blue and silver also work well for me. Sometimes I’ll use all beads of the same color but in various finishes to achieve a neat effect (sparkly purple, for instance, looks very different from pearlescent purple).

I do occasionally like to weave in a few distinctive beads, but that’s usually saved for the centerpiece of a necklace, using patterns of more “ordinary” neutral beads around it to visually support it.

Tenet #4: Different light textures are welcome.

What I mean by “light textures” is how the light bounces off each bead (as mentioned briefly above). Sparkly beads sharply reflect light, while pearlescent beads softly glow, and metallic beads shimmer. By putting the three different textures together, you get a neat effect on the eye–the eye constantly moves around the necklace, taking in the different sparkles, shimmers, and glows.

My favorite necklace, by far, is one that I made using light teal sparkly beads (Pacific opals) and white pearls, with clear and silver seed beads as accents. It always gets delighted comments when I wear it, and I think it’s because of the different light textures (plus the pretty color combination).

Tenet #5: Don’t go too big.

I like to use smaller beads because it lends a delicate, fairy-like look to my jewelry designs. In small sizes, any sparkly beads are pretty rather than flashy, keeping the overall effect clean and modest. It also doesn’t draw attention away from the outfit as a whole, but enhances and plays up the good parts of the ensemble. (Given that I’m pretty clumsy, I don’t like to wear any jewelry that I could potentially get tangled up in or injure myself on, so that’s probably another reason I go for short, simple jewelry. :D)

Summary

Small, balanced designs with colors and textures that play harmoniously with each other represent the five rules I go by when making beaded jewelry. But what do you think? What are your favorite ways to design? Tell me in the comments!