Website Design Inspiration Gallery

Ideas and Solutions by 1 Day® TIDBIT-C Content Type

The 1 Day® TIDBIT-C Method is our silly memory device to help spark ideas for web designers when they are designing a mockup or style tile. Say it out loud. It sounds cuter than it looks!

Sometimes it’s easy to overlook the details of the design when you are focused on the layout or content. When you feel stuck on a design and don’t know what to do next, take it one tidbit at a time, see?

Groan. I know, I know.

T = Typography

I = Imagery

D = Dividers

B = Buttons

I = Iconography

T = Textures

C = Color

You don’t need to emphasize all of the TIDBIT-C elements in one design — in fact, doing so would result in a design that is way too busy.

So the first step in using the 1 Day® TIDBIT-C Method is determining which of the elements should be dominant. Will it be a color-forward design? Will you spend some time creating the perfect background pattern or texture? Or is the website all about the photos?

Your choices will largely depend on the Client, the brand you are working with and the assets available. For example, if the photography is bad or nonexistent, you might choose to go heavier on the cool iconography or divider graphics. Or maybe you focus on distinctive typography.

Take a look at our TIDBIT-C Design Inspiration Gallery below to get web design ideas and inspiration.

Download the 1 Day® TIDBIT-C Tips Checklist

Typography

Typography ideas for web design projects.

Reverse hierarchy

Normally the bigger font is on the top, but it doesn’t have to be!

Typography ideas for web design - same font, different sizes and colors

One font, a lot of options

Using different sizes, weights, styles and colors makes a single font very versatile.

Typography ideas for web design - font pairing

Font pairing with logo

If you can’t match the logo font exactly with a web font, avoid similar but different fonts. Just find something else that pairs well but is much different.

Typography ideas for web design - fancy accent

Accent fonts

Consider using a fancy font for accents only.

Typography ideas for web design - super stylized

Super stylized fonts.

Be careful with loading 3 fonts. Check your page speed!

Retro fonts

Be careful with readability!

Typography ideas for web design - Breaking up sentence

Two fonts in one line

You can use the < strong > html tag to use different fonts in a single line of text.

Typography ideas for web design - spacing & whitespace

Lots of space

Don’t forget to use letter-spacing and line-height CSS properties in lieu of kerning, leading and tracking. Also, look how all that whitespace really lets the type take the spotlight.

Typography ideas for web design - Two fonts

Tight spacing

Using a tighter spacing between these two headings helps make them look like they belong together and more like a sign from Hobby Lobby.

Imagery

Ideas for hero image layouts with text, color overlays, graphic and cutout treatments and more!

Color overlay hero image layout

Classic move. Try to do this with CSS or in your Page Builder for easier photo swapping later.

Boxed text with transparency hero image layout

Even a little transparency goes a long way to reveal some of the photo behind.

Boxed to the edge hero image layout

Boxed but with a different feel.

Highlighted text hero image layout

Great way to make the text super readable and give it a distinct look.

Side action photo hero image

This is ideal when you can find a photo with a bunch of empty space. But don’t forget to see how it works on different devices.

Text drop shadow hero image layout ideas

Text with drop shadow

Blurred or hard, a drop shadow can increase text readability.

Side by side hero image with text

This is a good solution when the photo shouldn’t be cropped vertically or covered up in any way.

Side by side with feather hero image layout ideas

Side by side with feathered hero image with text

Another more subtle option when you don’t want the text and image to feel so separate.

Cutout hero image with text

This is a very stylized option good for when the background of the photo is too busy or contrasty for text to be laid on top and easily read.

Graphics collage hero image

Excellent when you don’t have any photos to work with or you are doing a website for a subject that is difficult to photograph.

Photo cutout with graphics hero image

This is a good option if you don’t have photos high resolution enough to be a full-width image. Also just another way to add fun branded graphics.

Photo with graphics overlay hero image

Black and white photos can class up poor lighting. Adding color graphics can make stock photos feel more branded.

Hero image layout with custom shape behind text

A custom background graphic or shape can add to the readability and branding. This was pulled off with a before: pseudo-element in CSS.

Dividers

Web design ideas for section dividers, borders, separators and more!

Subtle double line

This may be a old trick, but it still looks slick and adds dimension. The key here is a double line with a slightly lighter and darker line than the background color.

Web design divider ideas - dashed or dotted lines

Dotted and Dashed Borders

These can easily be achieved with CSS or a teensy tiny repeating SVG.

Web design divider ideas - hashed border

Hashed line

Can be achieved with a teeny tiny repeating SVG file.

Angled

Whether it’s a straight slant or irregular angle, this style is built into a lot of Page Builders already.

Custom Repeating Shape

Wavy, chevron, scallops or other edges can be created to match the brand!

Web design divider ideas - textured border

Rough Texture Border

Works well for earthy or grungy brands.

Graphic Element

This graphic element can be added at the top left corner of the second section, but because it’s the same color as the black section above, it gives the appearance it is poking out of its container.

Irregular Shape

This could be achieve with an SVG overlay or possibly even a CSS clip-path.

Outside-the-Box Illustration

Adding a graphic illustration like this really draws attention to the footer, especially because it appears to go into three different sections.

Buttons

Web design ideas for buttons, menus and links.

Classic

Border

Offset Border

Outline

Gradient

Icon

Pattern

Slanted

Drop Shadow

Custom Shape

Web design button ideas: custom textured

Custom Shape

Iconography

Web design ideas and inspiration for iconography styles.

Classic

This is the style of many icon fonts already built into Page Builders.

Line

Still quite simple but a slightly lighter, more modern feel.

Offset Outline

Adding a colored border can dress up even the most basic icons.

Repeating Element

Take a pre-built icon set and add an extra detail or element to make it match the logo.

Web design icon style ideas: inside a shape

Icon inside Shape

Put the icons inside of a shape and add a little color for some flare.

Icon Inside Custom Shape

For even more pizzazz (yeah, I said it), create your own custom shape or use elements from the logo.

Abstract

Remember, icons don’t have to be so literal. Even geometric shapes and abstract ideas can convey meaning and emotion.

Hand-Drawn

A loose hand-drawn look can really soften up the standard icon shapes.

Web design icon style ideas: Web design icon style ideas: branded

Custom Branded

Borrow elements from the logo itself to created super branded icons.

Illustrated

Add multiple colors or create a little scene for a more detailed, illustrated look.

Long Shadow

A big trend during the flat design craze, this style still looks cool.

3D

You’d only use this style for a very specific brand, but it could replace photos on the site altogether.

Continuous Line

The continuous line or broken line style add a lot of character to otherwise standard shapes.

Textures

Web design texture and pattern ideas: repeating pattern

Classic Repeating Geometric Pattern

SVGs are perfect for this style. Tiny file. Big style impact.

Web design texture and pattern ideas: repeating icons

Repeating icon pattern

Even stock graphics or icons can be turned into a unique repeating pattern to add visual interest.

Web design texture and pattern ideas: branded

Custom branded repeating pattern

The logo itself can be turned into a repeating pattern.

Web design texture and pattern ideas: earthy

Repeating texture

Nature textures, fabric textures, doodles…practically anything can be turned into a perfect repeating pattern.

Web design texture and pattern ideas: grungy

Photographic Texture

When you don’t need a repeating pattern, have some fun with turning photographs into subtle backgrounds to create a more dynamic look.

Web design texture and pattern ideas: abstract

Abstract Multi-color Geometric

Good ol’ shapes. If the logo has a triangle shape, look for (or create) triangle graphics that would compliment it.

Web design texture and pattern ideas: multi layer

Layered repeating patterns

If you really want to get fancy, add 2 different repeating background graphics in CSS. You can have it all!

Web design texture and pattern ideas: multiple layers

Multiple patterns and textures

For a super fun and quirky look, combine photos, patterns and textures!

Texture burst

For just a touch of texture, try a little burst of a pattern or brush behind an image or overlapping 2 sections.

Logo texture

If you have a logo with texture built in, use it!

Color

Colored Background Sections

Big color coming through! Look out!

Colored Overlays

Overlays on top of photos helps with text readability and look dope.

Color in Photography

Don’t forget to find photos that compliment the brand colors.

Colored Texture

When you combine textures and colors, you can get a really unique look.

Web design color ideas: Colored graphics

Color in Graphics

Need to use a stock photo but want to make it look more custom? Add some bold graphics that match the brand colors, of course.

Color as the Hero

Some colors are so badass they can stand alone.

Color on Buttons

When you want someone to click, make those button colors pop! (yeah I said it.)

Neutrals + Accent Color

A mostly neutral colored site will make good use of an accent color. You can’t not notice it!

Tools and Training for Your Creative Business!

1 Day Works® World Headquarters
2002 Atwood Ave. Ste. 211
Madison, WI 53704
USA

Get the Skinny!