Designers need shapes in website design to:
Geometric shapes work to enhance web design. When used in clean and flat web design, they add an innovative and modern touch. Generally speaking, angular shapes are more aggressive and masculine, curved shapes are more nurturing and feminine. Let’s take a look at the more commonly used shapes in website design.
Rectangles and Squares
Rectangles and squares are formal shapes with right angles, suggesting conformity, peacefulness, stability, solidity, security and equality. Rectangles are the most commonly used shapes and we see them in grids, textbooks, portraits, brochures and newspapers. As we see them everywhere, these shapes may tend to get staid and boring. However, designers with inspiration can use them to good effect by varying their sizes, textures and colors, playing with images and interspersing other design elements.
This Travel Products Responsive WooCommerce Theme is designed with rectangles and squares that break out of their conventional mould by the use of color and a big background image. At the top of the website, a colorful grid with rectangles with a large background image sells travel products with an informal look. This gives the travel products a modernistic appeal. A smaller grid with neutral grey squares below sells more travel products, with a more formal look. The template thus appeals to all kinds of travellers. A parallax banner with an attractive travel image and message is featured below. Above the footer, a banner in black on grey with a yellow button and icon invites the user to sign up for a newsletter. In the footer, grey social sharing icons turn yellow on hover on a black background. The logo, links, menu hovers, and items on sale stand out in yellow. Products lead into product pages with slideshows with zoom, social sharing icons, pricing, description and related products. The Portfolio can be viewed by category. The Blog with large images showing the products in actual use, provides some helpful hints on travel. The Store displays products by category.
Template 50782 – Wedding Store Responsive Magento Theme with Slider, Product Slideshow with Zoom
In this Wedding Store Responsive Magento Theme, the rectangle forms the perfect shape to neatly frame the picture of bridal wear and accessories in a grid – a formal look for a formal occasion. The slider focuses on bridal wear, bridesmaids’ and flower girls’ dresses and footwear. Banners below highlight bridal wear and accessories. Products lead into Category pages with manufacturers and other products or Product pages with slideshows with zoom, product descriptions, shopping cart, social sharing icons, and related products. A poll and newsletter signup on the right sidebar helps to engage the customer. The footer has useful navigation links, social sharing links, user account links and a sitemap. Search and shopping cart are prominent on top.
Template 44569 – Photography Responsive WordPress Theme with Homepage Slider, Gallery and Blog
Images stand out in stamps and tablet interfaces in this website template that incorporates squares and rectangles into its design. Menu buttons and social media icons look like blurbs. Shades of grey give an elegant look to the template while providing a neutral background for images to stand out. The hand-drawn arrows for slider navigation give a personalized touch. The Gallery can be viewed by category. Content can be uploaded in Image, Slideshow, Gallery, Video and Audio formats. The Blog encourages user engagement with useful content, social sharing icons and comment forms.
Diagonals
Diagonals serve to cut the formality of the regular rectangular or square grid and to break out of the mould, bringing about a feeling of freedom. Diagonal lines naturally lead the eye to navigation and content.
Template 53592 – Agriculture Company Responsive WordPress Theme with Blog and Gallery
Diagonal lines provide a shift from a traditional rectangular layout,in this Agriculture Company Responsive WordPress Theme, giving the design an unexpected lift. Each section is defined with a diagonal line that suggests action and accomplishment, right from the slider with large images of agriculture in progress, to harvested products ready for sale in the yellow section below, to the services highlighted with animated icons in yellow on a brown background, to the parallax banner showing images from the gallery. Even hovering over the images reveals animations on diagonal lines! A parallax banner highlights the hard work involved in a farm and the satisfaction that comes from work well done. The footer with a diagonal edge contains the address and social sharing icons.
Template 53016 – Hair Transplant Responsive WordPress Theme with Slider, Carousel, Parallax, Lazy Load Effect, Blog, Gallery
People successfully treated with hair restoration treatment are shown in the intro slider with changing messages. The images of doctors diagonally framed in green slide in with lazy load effect. Images of the clinic slide in on scroll, and lead into b log posts on click. The services section with numbering in circles is highlighted in green diagonals. Testimonials are presented in a parallax slider with a photo overlay of a patient. The services section is presented in a gallery viewable by category. The blog contains useful information for potential users of the service.
Circles
Circles have no beginning and no end. They represent unity, wholeness, completeness and infinity. Circles have free movement. Lines and shading can enhance this sense of movement. Their movement suggests energy and power. Circles are graceful, sensual, feminine and comforting. Circles offer safety and connection. They attract attention, provide emphasis and set things apart, which is why they are used in logos, icons, buttons for touchscreens and websites. They are used in accent areas to highlight key elements in advertisements and websites.
This modern, vibrant website design makes use of striking colours – blue, pink and purple in circular design elements, a popular website design trend. The circles call attention to important website content and lead the user into the site. The homepage slider has image transitions. The black background of the images below contrast with the white background of the menu and logo and helps these elements stand out. The Portfolio can be viewed as a slideshow or by category. The Blog has posts with images, social sharing icons and comment forms. Drop-down menus make it easy to add and organize multiple pages.
Template 45858 – Hotel Website Template with Animated Circles Design
Animated circles invite user interaction with hover effects. They also serve as the menu of this minimal design with dropdown menu and half-circles to evoke customer curiosity and action. On clicking an image that appears when hovering over a circle, a page slides into the screen, with more images in circles. Cool add-ons like a slider, portfolio, animated hovers and social media sharing are also available with this template.
Template 53539 – Figure Skating Responsive Website Template with
Lazy Load, Gallery, Carousel
This template designed in purple with a sprinkling of stardust and circles for the logo and spotlights on the dancers, has a magical and inspirational effect. A beautiful full-screen image header catches attention and the images and numbers in circles act to lead the user’s eye to important content. Latest blog posts with a purple hover effect are shown in a carousel and lead to the blog. The team is shown in circles and the footer with purple text aids navigation. The training section has circles that float into the screen, an impressive visual effect. The gallery with lazy load shows more figure skating shots in action with details of the performances on hover.
Template 46369 – Exotic Birds Responsive Website Template
Circles in this Bootstrap responsive template serve as a menu while displaying exotic birds from different species in a neat and elegant way. Add value to the site with a choice of cool add-ons like sliders, portfolios, menu and image hovers, buttons and intro pages.
Template 52950 – Business Responsive WordPress Theme with Parallax, Gallery and Blog, Lazy Load Effect
Animated circles in black and white with green symbols catch the eye and set apart the company’s advantages over competition in this Business Responsive WordPress Theme. The slideshow displays images of people at work. Images slide into the screen on scrolling down with the lazy load effect. Featured news leads into the blog. The website designed in shades of green and white, with images in green, conveys the image of an eco-friendly company. Testimonials are presented in a parallax banner in a carousel, with more circle icons to draw attention. The company’s services are presented in a gallery in various media formats and can be viewed by category. A location map, contact form and footer navigation with member sign-in and social sharing icons completes the website template.
Template 52538 – Baseball Club Responsive Website Template with Slider, Gallery and Blog
Circular shapes are used to highlight the Team, Schedule and Roster in the central images in this Baseball Club Responsive Website Template. The red, yellow and grey curved lines around the circles communicate motion and energy, as in the movement
of a baseball. The slider conveys the excitement of the game with images of players in action and large stadiums. Information is presented in green rectangles. The gallery presents some larger images that when clicked, zoom to a gallery view of all thumbnail images that can be enlarged. The blog has updates on the team’s games with large images.
Polygons
Any closed shape that has at least three sides and angles is called a polygon. Polygons bring sharpness and depth into website backgrounds with regular, irregular, simple or complex shapes.
Red and black are the dominant colors with red polygons taking centerstage on the header and and grey polygons playing in the background of the games in this Games Store Joomla Template. The dropdown menu with rectangular grid layout in shades of red interspersed with grey dropdowns; red and black buttons; black logo and menu rollovers make this games portal simply stunning. The homepage images are blog excerpts leading into the blog.
Template 54992 – Taxi Services Responsive WordPress Theme with Parallax, Slider, Blog and Portfolio
This taxi service has an understated polygon background in beige and yellow that brings a contemporary look into the otherwise simple design with banners in rectangular shapes. The slider shows all kinds of cabs plying in all kinds of weather, with the contact number big and bold and the tagline right below it. Buttons with rounded edges in yellow and white induce customer action. The logo in yellow stands out against the white menu with yellow dropdowns. Large fonts make the text easily readable in all devices. Parallax banners give a 3D look and present content on images. News is presented in a gallery with categories. A blog gives up-to-date information about the company. The Services page provides a different look and feel for variation in layout.
Template 54873 – Script Directory Responsive Website Template with Parallax
Shades of orange and green create colorful polygons in this Script Directory Responsive Website Template with Bootstrap. This template with its contemporary look can be used by a software company. The template features a logo with colorful triangles, colorful buttons on black for popular scripts and more colorful buttons on a white background for new scripts, as well as animations while scrolling or on hover, to evoke viewer interest. Featured scripts are displayed with larger rectangles and ‘Buy Now’ buttons below them. Parallax banners with user-interactive scripts invite the user to try out a demo. Social sharing icons and Shop Now buttons induce user action. The footer has useful links and a newsletter signup.
The logo for this Design Studio ResponsiveWordPress Theme jumps out at you, as it it is made up of polygons of different colors – shapes forming a shape. Polygons are used in an eye-catching way in the banner leading into the blog. Other geometric elements – colored circles for icons and rectangles for content – along with large fonts for the logo, numbering to lead the eye, and use of white and black space – play a role in balancing the layout. A parallax banner with background video captures viewer interest. The gallery loads with animation and lazy load features, with content uploaded in image, gallery, audio and video formats. The gallery can be viewed by category. A newsletter sign-up appears just above the polygon banner footer with social sharing icons.
Template 54583 –Night Club Responsive WordPress Theme with Slider, Parallax, Blog and Gallery
This high-energy Night Club Responsive WordPress Theme with a slider featuring polygons that change color like the lights in the dance club. The polygon motif is repeated in grey and orange rectangles interspersed with high-voltage dancers and DJs doing their thing. Snippets from the blog on parallax banners lead into the blog. Six images in the grid below promise a rocking time to be had by all. A parallax banner on the footer with polygons sports social media icons and provides a 3D look. The yellow of the logo stands out on the black of the header and footer. Large headline text makes for easy reading on multiple device screens. The gallery in image, slideshow, gallery, video and audio formats can be viewed by category.
Shaded maroon and black with white on textured grey bring an aura of sophistication and elegance to this template. The unusual design features flipping maroon hexagons with circular black and white icons. The maroon hexagons turn black-and-white on hover and on click they enlarge to black hexagons with reverse text. Image transitions are created using JS animation with HTML to keep the template lightweight. You can also choose from cool add-ons like a JS Animated image slider with or without thumbnails; beautiful portfolio layouts; CSS3 animated hovers; animated buttons; social media sharing tools and video.
Template 50994 – Party Planner Responsive Newsletter Template with Hexagon Theme
This Event Planner Responsive Newsletter Template designed in purple, pink and grey with a soft focus pink balloon header uses hexagons as the visual theme, some with stitched or plain borders, some borderless, some with images and a contrasting blue one with text calling attention to big savings. Social sharing icons are prominently placed in color below the header. A textured grey background gives and elegant and sophisticated look to the layout and does not distract from the video promoting the party planner’s services. The hexagon theme is continued through the design, showing a closeups of a flower arrangement, a banner with hexagons of wedding cake, wine glasses and scrolls, and contrasted with dates in smaller hexagons in a violet shade. More banners follow, showing a birthday party, and an outdoor event with a gazebo, rose petals and a transparent overlay with an attractive discount highlighted on pink ribbon. Icons draw the user’s eye to the services offered by the party planner. Contacts are prominent in the footer.
Triangles
Considered to be the strongest shapes in design, triangles direct the viewer’s focus. They can be stable when sitting on their base and unstable when not. Triangles have a modern look and are more masculine in their appeal. They have energy and power and represent dynamic action. They are balanced and can be used to convey progression, spirituality, direction and purpose.
Template 52133 – Martial Arts Responsive Website Template
This site is designed in the black and white of a traditional martial arts uniform, along with grey. Large fonts in heavy and light weights are used to lend balance. Images along with transparent flying triangles in grey, black and white give the viewer the impression of power and action eliciting response. Diagonals are used in the design but the text is arranged in neat straight rows in the manner the user is used to reading. Images in banners, in the gallery and triangles, show martial arts in action. Social sharing icons stand out in white on black triangles. The gallery can be viewed by category and shows beginners’ to advanced classes. Instructors are introduced to the user, and inspiring quotes encourage learners to aim higher. The contact page uses the contrast of black and white to dramatic effect.
Template 52461 – Mobile Shop Responsive WooCommerce Theme with Triangles, Gallery and Blog
Triangles and squares in bright colors – contrasting with black or against a bokeh background – communicate trendiness, technology and style in this Mobile Shop Responsive WooCommerce Theme. The triangles are like pennants and pointers, their colors changing in the intro slider, while different models of mobile phones are displayed along with their prices and changing messages. The triangles point towards the mobile phones in the slider. The same colors blue, green and red are used in Shop Now buttons below special offers. Red, green and black squares on a parallax banner with a phone in the background carry icons to induce the customer to read about the stores. Testimonials are displayed in a carousel on a banner with triangles in black on black. Featured products lead to the store with product slideshows, product descriptions, pricing, shopping cart, social sharing icons and related products. The homepage features a banner above the footer with green and black triangles, with excerpts from the blog that lead into the blog. The footer contains useful navigation links and social sharing icons. All user-related links, a sleek shopping cart and search are prominent on top.
Template 52283 – Bikes Store Responsive PrestaShop Theme, Triangle Design, Lazy Load, Slider, Animated Custom Blocks and Blog
Slicing through the mountain air, over the jagged slopes, a mountain biker climbs at a furious pace. What drives him are the thrill of adventure and conquest – symbolized by the triangles and polygons in the design – both light and dark and color. This Bikes Store Responsive PrestaShop Theme promotes bikes and mountain-biking gear. The homepage slider stands out with triangle design at the base. Downward pointing arrows that look like pennants point towards the attractive products on sale shown in the homepage banners. Triangles facing forward symbolize speed. Icons in twirling circles draw attention to more products. Testimonials in a banner with large quote marks and triangles continue the theme design. News snippets in images lead into the blog. Animated flips reveal on scroll in custom blocks. The megamenu dropdown product menu with transparent overlay neatly reveals further product navigation when required. New products feature a quick view with a product slideshow and image zoom, product description, price and review. Categories can be accessed from the main menu. The footer has useful links for ease of navigation. Buying is easy as account, login and checkout links are placed on top.
Template 53936 – Cars & Motors Responsive WordPress Theme with Parallax and Lazy Load Effect
Polygons on blue, yellow, orange and black triangle shapes give the impression of speed, color, futuristic looks, and spell out fast forward, reverse, turn, acceleration and more in visual shorthand. The parallax slider shows off stunning cars in a 3D effect, with large fonts that promote each brand and a triangle pennant in the foreground. As the user scrolls down, animated page elements slide into view to reveal a gallery of cars, leading into the site gallery with more triangle pennants. The cars can be viewed by category. The template has lazy loading which optimizes page loading. Content boxes make it easy to upload web content. The stylish diagonal footer with futuristic polygon background has social media icons with animations to engage the customer.
Rhombuses
Rhombus design elements are also called diamonds. They can be used as separate elements or in an interconnected pattern with other diamonds or with triangles, lines, hexagons and other shapes. Diamond grids form an elegant preview of images for portfolio websites and have an elegant and contemporary look.
Template 49475 – Photo Gallery Template with Integrated
Moto CMS HTML
Diamonds on transparent layers for the menu, photos and graphics on a grid, text on a transparent background that slides into the frame, a stylish script font for the name in red and white on a black band…all these elements work together to distinguish this website from others. A PhotoGallery 3.0 template, it comes integrated with Moto CMS HTML for easy content management and updating.
Maroon script fonts on a textured grey background lend a stylish flourish to the logo in this Fashion Responsive WordPress Theme with Bootstrap. The header is designed in diamond grid format , to present a collage of models. The zigzag element below accents the diamond grid. The Latest Models at the bottom of the homepage are shown in a content carousel. The Gallery has icons that enlarge the image or take the user to the blog with more information on the showcased model. The Blog has posts with large images, social sharing icons and comment forms. The Contact page with map and contact form invites customer response.
Template 44294 – Photography One-page Website Template with Spectacular Homepage Diamond-Grid Collage and Portfolio with Categories
Red, black and beige combine to create a designer feel along with design elements that spell quality and class – embossed typography and dotted lines on textured beige notepaper; the diamond design theme – a diamond for the logo, bullets and numbering echoing the diamond grid collage on the homepage. Content pages scroll left to right in this single-page website design. Drop-down menus in black and red stand out on beige and make it easy to add and organize multiple pages. Pages slide into view in the portfolio, which is organized in categories. Images can be viewed as a slideshow. The Contact page with map and contact form invites customer response.
Geometric shapes can be used effectively to design navigational elements,
connect or separate elements, used for website backgrounds, lead the eye
from one element to the next, emphasize or accent areas in a website,
act as calls to action (CTA), and more.
What’s your next design idea? Shape it up!
