All posts tagged “‘Geometry”

Use Geometry As Your Key Tool for Building a Website

Today you could hardly ever be successful online, if your website is not unique, trendy, and interesting. Year after year, new trends appear, designers find new elements to use in order to turn common things into astonishing art pieces. Now we are talking about geometry use in contemporary website design field.

Use Geometry As Your Key Tool for Building a Website

Grids and columns are what websites are built on, aren’t these the elements of geometry? Yes, geometric forms lie at the core of these layouts: here we mean rectangles and squares mainly. What about circles, hexagons, triangles, diamonds and kites? These are the original shapes that you should definitely include in your web design project.

This article will answer the questions like where, how you should do this and the most important is what for.

Geometry: Uses and Functions

Web designers show their true talent and skills when achieve original simplicity for their websites. Simple UI can look beautiful and geometric shapes are helping with it. Geometry has a great power on website design and on how users perceive what they see. When you build a website with circles or diamonds or any other shapes you immediately put focus on certain details, highlight the content, make your design good-looking and memorable. So where can you apply geometric forms on your design?

1. Use Geometry To Design a Cool Logotype and Make Your Website Recognizable

Logotype is one of the hardest elements to design, because it is your distinctive mark, it is something like a signature and even more. Users remember you by logotype. Many designers use circles to represent their brand, as well as other geometric forms are used a lot. Before you create your unique logo, learn from others but do not steal or borrow.

John Lennon Logotype by Armando Rinaldi.
John Lennon Logotype by Armando Rinaldi.

Bonevi Celebrate by IndustriaHed Branding.
Bonevi Celebrate by IndustriaHed Branding.

Publishing House Logo by Maurizio Pagnozzi.
Publishing House Logo by Maurizio Pagnozzi.

BobHunts Logo by Fixed Agency.
BobHunts Logo by Fixed Agency.

2. Use Geometry for Navigation Design to Make Your Website Simple and Original

Navigation is a crucial element of a website, especially because it has the biggest influence on user experience. Navigation methods vary a lot from regular horizontal menus to vertical oriented navigation, scrolling, sliding, and so on. Simplicity and usability principles should rule your choice, though any navigation menu can be done in a creative way – even the simplest top horizontal bar. If you use geometry and make the menu tabs circular, square or triangular, then you will get users at just navigation design.

Hello Good Looking Website with Interactive Geometric Navigation.
Hello Good Looking Website with Interactive Geometric Navigation.

There are three rectangles tied by lines and this is the navigation menu of the site. The principle is that you click on any of these shapes and more of them appear. Each represents one content section of this webpage.

Toyota Tundra Interactive Backyard Website
Toyota Tundra Interactive Backyard Website.

Revolvable circular icons make up the navigation of this interactive website. They draw users in and let them play a bit.

Serious Studio Site with Original Menu Shapes
Serious Studio Site with Original Menu Shapes.

Three dimensional geometric figures are presented on the current navigation menu, they are: diamond, arrows, circle, square, and kite. Moreover, they are interactive.

dk8 Website with 2 Lines to Navigate
dk8 Website with 2 Lines to Navigate.

There are red and blue lines on this website page. They move just together, and as they move you can hover and click any text (which is a part of the menu) on the background and so open every page this site includes.

3. Design Your Website Background with Geometric Shapes to Give It a Better Look

While image background designs dominate on today’s web, geometric patterns and separate shapes of a right form can make the best foreground look for your website. First of all, this may differ you from others who take easier actions and pick one of their portfolio images to be the background. Monochromatic background design is also rather simple (yet it may look pretty well), and finally original texture or pattern is a wonderful solution to create your own style and make a website easier to recognize by users. Use geometry to create better background patterns and designs.

Hull Digital Live with Hexagons in the Background
Hull Digital Live with Hexagons in the Background.

Varicolored hexagons make this website stylish and catching. One more section placed a bit lower on this page is designed with another style of hexagon design.

Diesel Website with Geometry in the Background
Diesel Website with Geometry in the Background.

Three dimensional shapes of a neutral gray color are placed on this page background to add dynamism, modern feel and originality.

Girlish Website Showpo with Background Triangles
Girlish Website Showpo with Background Triangles.

This white colored website design looks very special because of the bright triangles in the foreground. Some of these triangles make up diamonds when put close to one another.

4. Create Stunning Image Previews for Your Portfolio Website

Image previews of a circle or square form are the most common for portfolio websites. There, instead of turning a homepage into portfolio, designers use small image previews on their main pages. The previews also appear on portfolio section within a slider or any other gallery that doesn’t mean showcasing all images in a big size. This approach to portfolio making is quite user-friendly, besides it keeps the design balance on a website page.

Portfolio Website Design with Circle Image Previews
Portfolio Website Design with Circle Image Previews.

Image previews are designed as circles on this dark colored theme. They take less space than if these would be large images, they look accurate and harmonic.

Forum+Function with Squares to Preview Images
Forum+Function with Squares to Preview Images.

Geometry takes a bigger part of this design. Besides that it has a nicely done navigation menu with small black squares, it includes good-looking image previews with squares again.

Seven Digital Deadly Things Site with Video Previews Squares
Seven Digital Deadly Things Site with Video Previews Squares.

Instead of image previews as in the above mentioned examples, this website contains nice preview rectangles for videos. The distinctive feature of this preview design is the organization of images: they are scattered over the layout.

Alex Buga Portfolio with Squares to Preview
Alex Buga Portfolio with Squares to Preview.

This website makes use of geometry for the background and portfolio preview. The image previews fit the small squares of the geometry-based background. Not all preview squares are image previews, some of them direct you to the article pages, a few more demonstrate videos.

5. Make Your Product/Service Catalog Usable and Pleasing with the Use of Right Shapes

Product catalog is an eCommerce website feature, where users are given a page with a list of available offerings. It could be clothing catalog, apps store, any service provider with its services list. Squares are regular shapes to use for this reason, still you can go for more and make your product page in the most unusual way: design it with hexagons, kites or diamonds.

Orlando Website with Randomly Organized Catalog
Orlando Website with Randomly Organized Catalog.

Pay Webpage with Well-Arranged Catalog
Pay Webpage with Well-Arranged Catalog.

Benoit Challand Website with Differently Sized Images on a Catalog
Benoit Challand Website with Differently Sized Images on a Catalog.

Folks Verone Web Design with Squares and Circles
Folks Verone Web Design with Squares and Circles.

6. Organize Web Content in Creative Shapes and Blocks

The presentation of the content is the same vital as its writing. It is more likely that so-so content with awesome framing would be more interesting for users than that of a well-quality but with horrible arrangement. Make creativity to rule for this point, because any shape can be used for better content exposure.

HP Matters Website with Exclusive Content Arrangement
HP Matters Website with Exclusive Content Arrangement.

Circle, semicircle, triangle, hexagon, parallelogram, diamond are all here on this website to present the content to readers.

Digital Telepathy Website Design
Digital Telepathy Website Design.

Rectangles with broken side lines are the base for texts on this site, while many circle icons are used a lot, too.

K logix with Round-Shaped Content Blogs
K logix with Round-Shaped Content Blogs.

Pop up content sections done as circles beautify this website design.

Taste Creative with Hand-Drawn Circles
Taste Creative with Hand-Drawn Circles.

Uneven circles with text are creative geometry solutions from this creative team of developers, marketers and advertisers. Still, the employers’ pictures are put in perfect circles.

7. Content Looks Better with Well-Designed Icons and Buttons

Users begin reading a website from the point they find visually nice. This is how icons work: they attract users to the text content, because a website created as a wall of text would never be exciting for readers. A very simple example on how to diversify your text is by specific icon listing. The list of services, or any other one, can be illustrated with theme icons instead of making it a usual bullet list with tiny circles. Colorful icons of different geometric forms can become a superb collection for accentuating your content.

Another function of icons is the association and strong visualization building. One efficient icon can replace a sentence or a whole text. What would you notice faster: a shopping cart icon, or ‘cart’ text? Sure thing, icon would be a better choice.

Icons may be understood differently if placed differently. Let’s say, you have a set of social media buttons in the Footer and near each article/image/product. When it is seen in the Footer it is understood as a following button, but being put near the content section it is meant as sharing button.

Icons support your content, as well as they are very vital elements in building your website credibility.

Le Blogue de Julie Lafrance with Unusual Social Media Icons
Le Blogue de Julie Lafrance with Unusual Social Media Icons.

We are used to circular Twitter and Facebook icons, while this website used parallelograms instead.

Glazed & Infused Website
Glazed & Infused Website.

Orange accents on this neutral website design are original shopping cart icon, and differently shaped buttons.

Eco Capital Group with Tetris-like Icons
Eco Capital Group with Tetris-like Icons.

Complex icons of circles and squares are very creative and they truly make a perfect attention-grabbing job.

Riley’s Cycles Website with Diamond Icons and Circular Images
Riley’s Cycles Website with Diamond Icons and Circular Images.

This one-page website uses two various diamond-shaped icons: one for the content section title and the other for Twitter. Besides, there are many circular images and buttons of a geometric form.

Mistrip Website with Interactive Circle Icons
Mistrip Website with Interactive Circle Icons.

Logotype on this design is a circle, plus there is a circular globe model. The most interesting part is the icon, because four service icons on this webpage are interactive.

Grain & Mortar Website with Geometric Icons
Grain & Mortar Website with Geometric Icons.

The icons on this site help users to learn the company’s services faster and better. Each service in the list is illustrated with a nicely designed icon.

Be Memorable Website
Be Memorable Website.

This design includes circles and rectangles to make up creative icons which add personality to this website.

8. Make Sure Your CTA Is Catchy

Catchy CTA means a great success and it doubles your chances to get a quick response from users. ‘Catchy’ is all-in-one: colorful, well-written, and of course designed in a nice form.

Making a circular CTA button, you make it good for mobile users. Circle resembles the fingerprint and it is very convenient to use such buttons on small touch screens. Plus, circle is a creative shape that has many cute variations.

Square button, or rectangular, is quite a common thing in web design. Even though, it can be specified with bigger size, brighter color or so.

The other geometric shapes, like trapezium, diamond or pentagon are used a little, if used at all. But it is never too late to start, to be the first and most original, to set a new trend.

Hatch Mortage with Creative Arrow CTA Button
Hatch Mortage with Creative Arrow CTA Button.

Icons Solid with Colorful Rectangular CTA Buttons
Icons Solid with Colorful Rectangular CTA Buttons.

Jack Daniels Bars with Crescent Entry CTA Button
Jack Daniels Bars with Crescent Entry CTA Button.

Cronulla Riots with Rhombus Enter Button
Cronulla Riots with Rhombus Enter Button.

Conclusion

Design is a matter of taste, and in this post we wanted to show you the good side of geometry website design in chance you like and use it for your project. As you see, there are many applications of different geometric shapes and we sure your imagination will lead you to even more great ideas. Comments and feedback are always welcome!

Visit us at InstantShift.com

PSD to HTML


InstantShift

Custom Bikes by Bamford Cycle Department : Building a better ride with unique geometry and bespoke carbon fiber tubing

Custom Bikes by Bamford Cycle Department


George Bamford knows what he likes and how he likes it, and has over the years customized all types of vehicles and products for his personal use. The knowledge gained through those many product experiences is what led him to create his eponymous…

Continue Reading…


Cool Hunting

Create smooth 3D geometry in 5 simple steps

Read more about Create smooth 3D geometry in 5 simple steps at CreativeBloq.com


Knowing how to create smooth geometry in your 3D meshes is one of the most important skills to learn as an artist.
    




Creative Bloq

Fashion and geometry collide in new video

Read more about Fashion and geometry collide in new video at CreativeBloq.com


youtube: QzCsYbSrmPs Fashion is one of the most inventive and creative platforms for any designer. Showcasing patterns, cuts and styles through the ages, labels can often provide unexpected inspiration.
    




Creative Bloq

Use Abstract Geometry to Create Stunning Designs

screenshot

If you’ve ever found yourself in a design rut, wondering how to come up with some fresh ideas, then you’ve no doubt experienced how refreshing it can be to experiment with a new design style that’s completely outside of what you typically produce.

Today we’re going to do exactly that. I’ve been fascinated with a particular style lately and just itching to give it a test drive. We’ll start by analyzing this style’s characteristics through the work of others and then proceed to building something on our own using what we learn. Read on to see the step by step process.

Step One

screenshot

Image source: Gilberto Taccari

How do you start a design project? You’re looking at a blank canvas and it’s time to put something on it, so what’s the first step? I suppose that just about every designer approaches this challenge uniquely. Some grab a pencil and start sketching what comes to mind, others prefer to start with a typeface and let that speak to them. As a photographer, I often look to great photos as a leaping off point for an overall aesthetic and color scheme. Give me a great photo and I can build a great page around it.

It’s good to have routines that get you off to a fast start and help you develop a unique style, but I personally find that falling into too much of a routine leaves me in a design rut where everything starts to look the same.

If you have encountered similar problems, I can’t recommend enough that you try to put yourself in the mindset of other designers by attempting to mimic their thought processes while ultimately achieving a unique result. Perhaps you always start a job by opening up Photoshop, so to mix things up you might try launching a drawing application on your iPad and picking up a good stylus.

Experimenting With Different Styles

This idea carries over to the entire design process. Experimenting with different beginning points will lead you off into new directions and have you coming up with ideas that are completely outside of the realm of your typical design style.

I often make it a practice to closely observe and analyze different design styles and then experiment with them to stretch my talents and experience.

Shapes Aplenty

In order to achieve the goals outlined above, we’re going to explore a particular type of design that has really been catching my attention lately. It’s not new and in fact has an almost late 70s early 80s appeal, yet it carries with it a timeless, simple aesthetic that I think looks great in a variety of contexts.

Specifically, I’m talking about the school of design that makes heavy use of strong, often random geometric shapes as a primary design feature. Sure, shapes are present in all design, but this style uses them boldly and simply. Here’s a fairly archetypal example from Squat Design.

screenshot

Image source: Squat Design

In looking at this design, one of the first things that I notice is that the entire concept is heavily driven by diagonal lines. We typically tend to use straight lines to define our content so this instantly causes the viewer to see this as something unique and interesting.

Also notice two more interesting features. First, the photography used has been integrated in with the shapes rather than merely appearing alongside them. Further, color and transparency are two more main themes that drive this style.

Here’s another example of something from this style by Sawdust, a design firm in the UK.

screenshot

Image source: Sawdust

Once again we see a lot of random shapes being used to add visual interest, heavily driven by the implementation of diagonal lines. I’m also starting to notice a trend in the use of fairly thin typography, which complements the emphasis on simple, clean lines.

This design as well as the next one have introduced some circles into the mix as well, which really stand out among all of those hard angles that you see elsewhere throughout the page.

screenshot

Image source: Ryan Atkinsons & Stephan de lange

Let’s Try It!

Now that we’ve seen a few examples of what this type of design looks like, let’s give it a quick shot to see what we can come up with. Exercises like this are perfect for working out your design muscles. Try setting a time limit, say twenty minutes or so, and then experimenting with a new style within that constricted time frame to see what you come up with.

In an attempt to intentionally stray from my typical design process, I decided to start out by just grabbing some shapes to play around with in Adobe Illustrator. Given that the design style that we’re going for gives such prominence to triangles, I thought I’d start there.

screenshot

After moving things around for a while, I came up with a sort of tessellation pattern that I thought looked interesting.

screenshot

From here, I decided that it was time to add in some color to give those boring black triangles some character. I jumped over to Kuler and literally just grabbed the first color scheme that I saw.

screenshot

Applying this color scheme to my triangles really bumped up the aesthetic nicely:

screenshot

Continuing to follow my observations from above, I added some more triangles, this time with transparency effects and then tossed in some freestanding diagonal lines, which gave the entire thing a sense of motion. By now, the result was really taking on a complex, layered feel that I just loved.

screenshot

Next I decided to toss in some text. A super light version of Helvetica seemed like a good fit given that thin typography pairs so well with this design style. Notice how I staggered the text to mirror the slant of the triangles. Little uses of repetition really make a design great.

screenshot

Finishing Touches

From here I just kept adding and iterating until I landed on something that I thought looked complete. As you can see, I experimented with some photography and added in a few circles like we saw the other designers doing. To make the triangles a little more interesting I masked in the initials of the site.

Ultimately, as a quick experiment, I was thrilled with the way it turned out. I had been wanting to play around with an abstract geometric design style for a long time and it turned out to be every bit as mentally fulfilling as I had hoped.

screenshot

Download the Desktop!

Since I had a cool design and nothing to do with it, I decided to slap it on a desktop wallpaper for your downloading pleasure. Enjoy!

Download: Click here to download.

screenshot

Have You Seen This Style Elsewhere?

Now that you’ve seen my analysis of the abstract geometric design style, I’d love to hear your thoughts. Do you think this is an interesting aesthetic theme? How would you have used it differently?

If you’ve seen any similar examples lately, leave a link below so that we can check them out!

Design Shack

Redshift Sports’ Switch Aero System: Switch the geometry of a traditional road bike into an aerodynamic triathlon speed machine in mere minutes

Redshift Sports' Switch Aero System


Ever considered getting into triathlons only to be deterred by the thought of adding a new bike to your quiver? The new Switch Aero System from Redshift Sports allows…

Continue Reading…


Cool Hunting

Design Inspiration: Geometry Simplicity

A superb theme design for the Lenovo Design Contest.

This design was featured on Wednesday 8th of May 2013. It’s designed by SanityD, and falls under the category of Element.

If you’d like, you can visit this site, or view all our other featured designs.

Design Shack

The Magic of M. C. Escher: Exploring geometry and astonishment in a catalog of the artist’s prints

The Magic of M. C. Escher


“Perhaps all I pursue is astonishment and so I try to awaken only astonishment in my viewers. Sometimes ‘beauty’ is a nasty business.” — M. C. Escher Too often relegated to dorm…

Continue Reading…


Cool Hunting

Interview: Joao Teigas : We speak with the founder of This Way Up Percussion about Cajons, capoeira and his obsession with geometry

Interview: Joao Teigas


by Emily Millett Whether he is tapping his feet in tune to the music or drumming his fingers along to an imaginary rift, Joao Teigas lives by an unstoppable musical beat, an organic rhythmic flow that…

Continue Reading…


Cool Hunting

Buckminster Fuller: Poet Of Geometry: Illustrator Cole Gerst paints a cohesive picture of the icon’s prescient approach to design

Buckminster Fuller: Poet Of Geometry


by Stephen Pulvirent Buckminster Fuller’s utopian design vision, unrivaled in the 20th century and anchored by his famous reinvention of geodesic domes, reflected the polymath’s philosophy that flexible thinking, good design and an honest desire for progress could solve humanity’s woes once and…

Continue Reading…

Cool Hunting