10 Web Design Trends (The Girlboss Edition)

In this post, I'm going to share 10 web design trends for female entrepreneurs, bloggers and creatives to help you evaluate whether the ideas you have for your own site build are current and/or future-focused, or whether they're overdue for an update. This post will also help you to think more practically about which elements are 'must-haves' for your own site so that you can communicate these ideas more clearly to the web designer you're working with. Thirdly, I hope this post will inspire you to build a beautiful online space that truly represents all the hard work you've put into your project so far. 

trends+website+design+women

Website design trends come and go, both with technological advances as well as shifts in aesthetic sensibilities. Over the past few years, vintage styled logos and moody photography have given way to gold foil and brush scripts, while today many sites, especially those owned by design-minded photographers, graphic artists, illustrators, bloggers and the like are riding the wave of the 'millennial pink' trend. 

[Fun distraction. If you're not sure what 'millennial pink' is just pop it into the search bar on Pinterest and behold the beauty that unfolds.]

millennial-pink-trend

I've been doing a bit of stalking homework to see if I can put my finger on the current and emerging design elements we're seeing more of these days, especially when it comes to the design of #girlboss type websites.

1 | Layering

Let me explain. There is a LOT of layering going on in web design when it comes to the layout of images and galleries. It seems like it is no longer okay to have just a profile pic on your "About" page. No, it must be layered, with solid colour behind it and off to the side, some texture beneath and a block or two thrown in for good measure. Here are some examples of what I'm talking about. Below, on the left is an example from The Modern Essential. I really like how two seemingly unrelated images are stitched together with a splash of paint. On the left is an example from the Organie Wordpress theme. There's even more depth in this image since the photo of the plant is entirely free-standing, backed by a block of colour, and a lightweight frame behind it. 

 www.themodernessential.com

www.themodernessential.com

 Organie Wordpress Theme from www.thememove.com

Organie Wordpress Theme from www.thememove.com

Besides looking really pretty, this layering technique adds a feeling of depth and three-dimensionality to an otherwise very flat I'm-just-looking-at-a-screen experience. 

2. Custom graphic design

Everywhere you look there's more and more custom graphic design pulled into websites. Custom buttons, lines, patterns, flourishes, and a variety of other design elements add visual interest to sites. There are understated sketches in the background, squiggles and marks in the foreground, and geometric patterns dotted liberally about .

In the first example below, the Marmilu Farms site pulls in some designed work with clean borders with custom buttons beneath each of the images of their farm animals. 

marmilu-farm-example

In the second example from Ink & Honey Design Co there's a very subtle but distinctive custom designed squiggle acting as a separator between 'Hello' and 'Beautiful brands...'. 

ink-and-honey

In the last example from The Modern Lovebird, there are a range of custom graphic (and web) design elements incorporated into the site from the horizontal line with informal font on the left of the page, the two-tone split in the background with the light bird illustration on the bottom right. If you look closely, you'll also see that there is a very faint impression of quotation marks beneath the testimonial section.

the-modern-lovebird

3 | Boxes, boxes, boxes!

The boxes have come for us and they are everywhere. My feeling is that this is a design trend we may quickly tire of. For now, it is here to stay. Boxes behind pictures, framing products, around paragraphs, in footers. Bold solid boxes, light outlined boxes, boxes politely in the background, boxes boldly cutting through the foreground. Boxes on banners, boxes on blogs, boxes on boxes on boxes! 

Whew.

Here are a few examples.

 www.618studios.net

www.618studios.net

 www.abbystolfo.com

www.abbystolfo.com

 www.aminahsyed.com

www.aminahsyed.com

 www.junemango.com

www.junemango.com

4 | Vertical text

Headings, captions, secondary navigation bars and other short snippets of information now appear vertically on sites along the left or right edges of a page. Sometimes combined with a line, frame or illustration, these bits of text provide visual interest and break the monotony of your typical horizontal orientation. 

 www.themodernlovebird.com

www.themodernlovebird.com


 www.stnsvn.com

www.stnsvn.com

 www.amydemas.com

www.amydemas.com

5 | Split pages

Split pages are everywhere! You might find these half-pages alternating with full-width sections or positioned as a banner at the top of a page. Online shops place images on one side of the split with a brief explanation or call to action on the opposite side. Some splits are background features, like the first example below. Others literally split the functionality of the page into two, with both sides leading to further information like portfolios or blogs.  

 www.jasminestar.com

www.jasminestar.com

 www.otanijun.com

www.otanijun.com

 agence-belle-epoque.fr

agence-belle-epoque.fr

6 | Bigger-than-ever images

The distinctive wide banner image has been around for a while now, but the depth and wide open spacing is even more pronounced. Images are wider, broader, and deeper, and have very little clutter. They may have absolutely no text overlaid, no buttons demanding that you 'Learn More' or 'Buy Now' or 'Sign Up'. Especially when it comes to sites that are all about showcasing design skills, photographic work, or beautiful products, these images really are large and in charge!

7 | Negative page margins

Excuse my technical jargon here (or rather the lack thereof). I initially titled this point 'leave-the-page images' but thought my second attempt sounded a more sensible! This trend sees the use of vertically cropped images on backgrounds and banners, or horizontally cropped images on headers, and footers which draw the eye to the outer margins of the site and create a sense of space and suspension. 

 www.marieforleo.com

www.marieforleo.com

 via Pinterest

via Pinterest

8 | Magazine-style fonts

We've all heard it said (or at least I have!) that web designers should stick to no more than 2 or three fonts, but this editorial trend breaks with that tradition without creating clutter or confusion. The main way I've seen this play out is the use of a variety of font headings. While the body font tends to remain consistent, headings 1, 2, and 3, quote fonts and other decorative fonts are made up of a wide range of styles from bold san serifs to informal brush scripts. Some fonts are tiny and discreet, and others are paired on the same line, like in the first example from Insta180 below. While there may be between three or four fonts in use at a time, there's certainly enough white space to be able to pull it off.

 www.insta180.com

www.insta180.com

 www.greermelrose.com

www.greermelrose.com

9 | Asymmetrical layout

For a the past few years many site designs have followed a strict grid-like structure. Everything has been pretty neat and tidy as you progress from the top of the site to the footer. Not any more! A non-symmetrical approach shows up in photo galleries, copy, blog layouts, newsletter blocks and more. There's much more visual interference in the form of lines, breaks, and staggered content - both visual and text-based.

 www.stnsvn.com

www.stnsvn.com

These two asymmetrical pages, on the left from a home page, and below from a portfolio page, both follow this assymetrical principle to great effect. 


 www.stnsvn.com

www.stnsvn.com

10 | Simplified navigation

Gone are the days of opening up a site and being overwhelmed by a ton of choices about where to go next. Designers are removing the decision fatigue by leaving three or four navigation tabs at the top of a site, and placing secondary information in the footer navigation. This makes for a very clean, uncomplicated experience. It can also be deceptive - in the best possible way, that is. Just because your navigation is clear, doesn't mean there isn't depth of content on the site, its just cleverly located so that it doesn't whack you over the head all at once! 


If you're in the process of planning for your website design and build, make sure you've taken some time to:

  • research inspiring sites both within your field and in similar fields,
  • gather ideas and save the best ones to a Pinterest board, 
  • get a sense of what you like and dislike.

I hope this post has helped you see what is out there, and flesh out 'must-haves' for your own site. If you're looking for someone to work with you to bring your dream site to life, please feel free to have a look at my portfolio, and contact me to chat more about it.