Devlounge

Design, Develop, and Grow

Going Meta With Circuit-Inspired Design

By

flat-design-successful

There are many thematic approaches to web design, and it’s always been important to match the look and feel of a website with its intended purpose and audience. Some website owners enjoy rich colors over natural patterns and backgrounds, like wood grains or filtered photos. Others prefer the stark, clean look of flat design, which highlights bold colors and crisp illustrations.

Design inspired by circuit boards can be a fantastic way to immediately give a high-tech feel to a website, and can be a great option for websites relating to tech topics or industries. From an IT blog to a PCB design website, highlighting this iconic element in your web design 

We’re going to give great insights, tips, and tricks on using both rich or flat design to achieve great circuit board visuals on your website.

Flat Design Options

If you’ve opted for a flat design for your website, your job will likely be a little bit simpler! Circuit and PCB looks are a bit easier to generate when you don’t need to hunt for high-quality imagery or match colors and filters. In fact, there’s a fantastic source for free flat stock images and tools to help complete the look.

Head to Canva

Canva.com is a free graphic design tool which can help you create fantastic graphics for all kinds of purposes. Not only are there free stock photos and hundreds of pre-set layouts, but there’s also a massive library of free shapes, icons, illustrations, and more. To start making a wide variety of header and body graphics to complete your look, head to Canva.

Once there, select the canvas size you’d like to work with. You can use one of the pre-set layouts if you’re wanting to highlight text in your graphic, or with a blank canvas go straightaway to the lines option under the elements tab. Scroll down enough and you can find several pre-made circuit designs which you can mix and match to create your own completed graphic, easily changing colors to match the primary color from your website. You can create circuit paths into the body from your header and footer, or simple circuit elements to pepper through the body of your pages. You can even use this tool to grab easy graphic content separators, or to make unique drop cap graphics.

Rich Design Options

Rich design options are much trickier, and will generally require access to high-quality photos, and if you really want to knock the ball out of the park, some good Photoshop and CSS skills. 

CSS Glow Effect

One great way to highlight the circuit-board tech aesthetic is to work with electric blues or yellows, and incorporate a glow effect on hover for menu items or major areas. You can use the following css option for graphics and images:

-webkit-box-shadow: 0px 0px 3px 6px #035096;

-moz-box-shadow: 0px 0px 3px 6px #035096;

-box-shadow: 0px 0px 3px 6px #035096;

This can be used to fantastic effect with the website logo and/or your menu items.

Finding Fantastic Imagery

When you’re using rich design, if you’re not wanting to fabricate rich graphics, you’re going to be leaning on high-quality photos. To avoid paying fees and messing with rights-management, you can find a few fantastic high-resolution circuit board images at cc0 stock photo websites like Pexels and Stocksnap.

Making Great Graphics

If you’re an illustrator pro, it should be relatively simple to create a circuit-look just using line tools and applying shadow functions. If you’re working with Photoshop, you can simply snag a high-quality photo, use the magic wand to select the circuit paths, and transfer them over to a blank canvas to begin touching them up for use as a background or to accompany page elements like headers, spacers, and so forth. Layer effects can help you incorporate your primary colors.

The Takeaway

Whether you’re designing a website meant to have high-impact rich visuals or crisp clean design, you can use a circuit-based aesthetic to achieve a great emphasis on technology and tech-related fields. These tips and tricks can help you up the wow factor of these designs using simple and free tools.

Design Focus: In Waves

By

Site layouts are filled with boxes and corners, but not everything has to be so straight-laced. These designs feature touches of something a little more organic: animated waves and curves that soften the look and can even make things more fun. [Read more…]

Design Focus: Site Frames

By

Designs of the Week

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

Velvet Hammer
Velvet Hammer

There’s a nice mix between a modern feel and subtle grunge touches here, which sort of represents both the music management and artist aspects to their company. The page scrolls inside the box and there are three menus which overlay on the area once clicked: social media, music, and the main menu.

Chilli
Chilli

A clean, simple, predominantly black-and-white site with a boxy, bento-style layout.

Neybox Interactive
Neybox Interactive

Nice bright colors marking each section and product of the homepage. The large imagery and small descriptions are a familiar pattern in websites these days, but the fact that the layout doesn’t span the entire width of the browser instantly makes it look different from the rest that’s out there, not to mention the treatment of the above-the-fold block.

Social Media Weekly

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

CSS – Ways You Need To Tell The Browser How To Optimize
“Rather than the presumed “browsers will get faster at running my code”, there is a little more “I need to change the way I code for browsers to get faster.””

Typopgraphy – glyphdiff
“Glyphdiff is a simple tool comparing the differences of two fonts on given glyphs.”

JavaScript – JavaScript for Designers
“Rather than sit, and try to digest boring definitions, we’ll dive right into building an interactive HTML prototype, and have fun learning JS together along the way.”

Design Focus: Animate.js

By

Check out these dynamically designed sites that all happen to be JavaScript conferences.

Designs of the Week

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

Nordic.js
Nordic.js

Wingdings is that you? There are a lot of “back-to-basics” making their way into website designs these days, like the bright blue and the pixelated, low-resolution images, and on top of that it’s the famous symbol font whose glyphs are gliding through a 3-dimensional stream. Even the circular shadowed bullets are used as markers for the carousel.

JSConf Budapest
JSConf Budapest

Quite the elegant triangle animation in the header that lets you interact with it too. I also like that the speaker avatars have their corners cut off in the shape of triangles too.

Dinosaurjs
Dinosaurjs

Also greets you with this cool glitchy effect applied to a block of code, this site is probably the kookiest of all with its oversized cursors and headings. I also like the black and white not just as a color scheme but as a negative filter when the text scrolls through the edges.

Social Media Weekly

Design – Design debugging
“Developers typically split the task of finding issues from building a project for wider release. These modes are often called debug and release. I think designers should take a similar approach.”

CSS – Flexbox Patterns
“Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end. You can start using these patterns in your own code right away, though I recommend you apply accessibility best practices to the markup (like using semantic HTML5 elements).”

Design – The Way We Build
“This process led us to the development of our new Design Language System (or DLS), as well as a suite of internal and third-party tools that allow our teams to not only work smarter, but also closer. The DLS is a collection of components defined by shared principles and patterns. This allows for rapid iteration using a shared vocabulary across design, engineering, and other disciplines. The structure of the DLS is simple and coherent, easing communication across teams.”

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

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge