 Okay, so welcome to Made You Look, eye-catching web design trends. My name is Alana Ruddick. I am the Founder and Creative Director at Design is Yummy. We are a Montreal-based design studio that creates consistent brand experiences across both web and print mediums. I've been working with WordPress since 2009 and designing WordPress websites as well as managing the development of WordPress sites. Everybody's nodding, yeah, cool. Perfect, well thanks for staying for the last session of the day. Hopefully I can show you guys some interesting things that you haven't seen before. And if you're having deja vu if you were here last year, it's because the topic is very similar to what I spoke on last year, but the material's new, so if you're here last year, don't worry, it's fresh, and hopefully it will still be interesting. And just to get a sense of who's in the room, raise your hand if you're a designer. Ooh, lots of designers, awesome. Developers, nice. Okay, so we've got a good mix. Bloggers, miscellaneous, if you're in the miscellaneous category, just yell at one time what that means. Okay, cool. Business, marketing, support, awesome. Lots of people come in, don't worry about it. Okay, we're just getting started. So the goal of my talk today is just to show you guys what's new and interesting happening in terms of web design, design in general, and to discuss some easy and accessible ways that you can take some of these tips and apply them to your own websites, whether it's your website, your client's website, just to kind of bring a fresh new perspective to it. All the slides are available on SlideShare. The link is up there if you wanna take it, as well, the slides are gonna be shared, and this is being recorded for WordPress TV, so everybody smile to camera and wave big and say, hey, word cam. That was so small. Aren't you guys having fun? Okay, one more time. Yay, word cam. So before we get too deep into the presentation, the first thing I wanna talk to you about is breakfast. So this is what I had for breakfast this morning. I had some yogurt, and why am I showing you my breakfast? The reason is because as I was sitting having my yogurt, I was looking at the new packaging design for Liberté's yogurt, and it embodies quite a few of the web trends that we're seeing. Based on this graphic, anybody have any ideas of some of the trends we're gonna be looking at? Nature flowers, colors, hmm? Large prints, yeah? Circles. I'm not gonna say yes or no to any of these. I'm just gonna keep nodding. You'll find out as we go. Anybody else? Pastel colors? Illustration? Mm-hmm. Food marketing, awesome. Sorry? Caps log. Caps log? Okay, perfect. So we're gonna come back to this at the end and see which one of those apply. But the first trend that we are looking at is color. You're right. So bold colors and contrast. We're seeing a lot of use right now of vibrant, saturated colors. This is a website from Universal Love. It's a pretty cool site built around inclusivity. It's created by MGM Resorts in Vegas in partnership with Legacy Recordings. And it's all about the idea of a reimagined first dance wedding songs for all different types of couples. And what I like about this site is it's super graphic, it's bold, but it's really reflective. The design is really reflective of the theme of the website. It works, and it works really harmoniously. And when we're looking at the colors and what colors are gonna be popular this year, I've said it before, but we do always look to Pantone color of the year. Why? Because whatever Pantone puts out really does trickle into every aspect of design, whether it's packaging, interior, print, web. We always see those colors being heavily influenced by Pantone. And it's important to note that this year's color is ultraviolet. It's not lavender, it's not purple. It's UV, it's ultraviolet. It's bright, it's neon, it's bold. When we're looking at neon colors, there's a reason that, I'm showing it here on a black background, right? In order to see a bright neon light, you have to have contrast, you have to have dark backgrounds and light surrounding it. Neon implies that light, that nighttime glow, you have to see, in order to see neon colors, it needs to be at night or in a glow. So you're seeing dark and light contrasts and that's natural progression from UV. So if you're looking at the Pantone color and thinking, okay, it's UV, getting an idea, okay, then I may be seeing some bright and light and dark contrasts as well. So an example of this is a website called One World, One Face, and they're doing exactly that where you have a high contrast site of dark and light and mixed with that neon color and it's quite similar to the Pantone color, that UV bright, that's why we're seeing bright blue everywhere. The theme of word camp this year, it's very on trend in terms of color. It trickles down into everything that we're seeing. This site is pretty cool as well. It's Epicurance, it's a creative conference that takes place in Yosemite National Park and the idea is bringing together creatives in a natural environment and reconnecting with people and reconnecting with nature. And you're seeing actually quite a few trends in this website here, not just the bold colors and it's a beautiful color palette of sunset colors, but what we're also seeing is a full width website. That's something that we were seeing a lot of last year and we're seeing again. You're also seeing these monochromatic images across the bottom. We were seeing a lot of duo tone images last year and now we're seeing a lot of monochromatic. So this, you'll see in a lot of the examples that I'm showing you, they're not just fixated on one trend. A lot of them incorporate multiple trends. That doesn't mean you have to. If you have an existing site and you're looking for a way to refresh the look of it, you don't have to say, okay, take the checklist of all the different trends and let me do this one and this one and this one. Feel free to use your discretion, but there's ways that you can take small bits of these and update your site in a modern way without going crazy and having to reinvent the wheel on it. So this follows from what Megan Dove was saying earlier about being honest. When you're looking at bold colors, that can be overwhelming. If you're not a designer, you don't have a background in color theory. The idea of putting together a bold color palette may seem extremely scary and intimidating. So one way I like to think about color is if you wanna add a pop of color, add just that, a pop of color. Stick with an elegant theme that's black, white, gray or neutrals like navy and add a bright color or one or two neon colors to it to make it interesting. Because otherwise you might have a fear you're gonna end up with something like this. And your users are not gonna wanna see that. It's a costing to the eye, right? So stick with something that's comfortable. Keep one or two bright colors. Or if you're feeling more bold and you wanna try something new, there's a great resource that I shared last year as well. It's the Adobe Color Wheel and it helps you create great complimentary colors without having much experience. You can kind of play around and it helps you create a beautiful color palette. Another resource that I shared last year as well, but I really like it and feel it if you weren't here last year, it's worth sharing again. It's brandcolors.net. It's the largest collection of brand colors available and it shows you the different color codes for some of the most influential brands today. So that's interesting to see if you're in the same space as one of these brands, maybe you wanna stick with colors that are different from them because you're not gonna be necessarily competing with one of these major players. So how can you stand out and show something different? Yeah, yes. You can basically take the color picker. So let's say you have a client that has a logo that's blue and red. So you can select these dials and choose those two colors and maybe come up with a color scheme that's complimentary if you wanna use a couple more colors to compliment those two colors as well. No, no, no, no. The color wheel kind of adjusts as you play around with it so it'll give you suggestions based on if you input one color or you can just have fun and play around. Sometimes you come up with something beautiful that inspires you if you don't, if you aren't working with an existing brand already. Perfect. So the next way we see color being used, I'm focusing a lot on color because I think it's important and it can be scary to go out there and try and find ways to use bold colors and that is what is popular now. So I'm showing you a couple of ways that make it a bit more palatable for your own sites. I love this example. This is La Pierre-Citonne. It's a custom WordPress website and you see there are quite a few bold colors being used in it but it's one color per header and the illustrations used are in tints and tones of the same color. Hand drawn illustrations were really popular last year. They're still continuing to be popular this year in web design but by having the illustration in the same tints or tones as the background it makes it pretty neutral looking. Another thing to think about when you're talking about color and color contrast is legibility. It's super important when you're working with color to make sure that no matter what colors you're using you're making sure that there's enough contrast in them so that your site is legible to your audience. You know you don't want users coming to your site and saying oh it's so beautiful I couldn't read anything on it. Your clients won't be very happy either. A great tool for this is web AIM so you can input your foreground and background color into the color checker and it'll give you a pass fail to let you know if your color contrast is high enough or whether you need to adjust it so that's something that I would suggest doing at the start of your presentation. The start of your website design before you get too far into presenting it to the client and selling them on a color palette that's not gonna work. All right so from here we're moving to custom illustration. You already may have noticed that we've seen some examples of illustration in different styles in the other websites that I was showing you. Last year we were seeing a trend for a lot of flat design which was fun and nice for designers because it's a super easy simple style to do so a lot of web designers and illustrators were like yay I'm so happy this is popular it takes two minutes to do. Well things are getting a little more complicated for us but that's okay it's a good challenge. We're seeing a lot of illustration styles now that are a bit more personalized they're more unique feeling there's more texture to them there's more visual interest and I think that's important to note because it's no longer the case that a lot of you know that yes there are a lot of startups but it's not you know five, ten years ago when clients would come to you and say I don't have a website at all I need your help now it's more like I have a website it's not giving me enough traction it's not standing out against the competition what can I do to make it stand out in a sea of other websites so these are some tools that you can use. This site is for Amazonia font it's a multi-disciplinary project between a type designer are you seeing anything? Yeah okay I see nothing on here between a type designer, a web developer and a web designer and an illustrator so the illustrator on this one was a person named Soledad Aguila and I think it's her illustrations of 26 animals that are from the Brazilian Amazon rainforest I'm gonna slow down sorry okay so the purpose of this project was to create awareness about the threat to wildlife of the Brazilian Amazon rainforest so this artist created 26 custom illustrations with the goal of bringing life to that font and personally I think without these endangered animal illustrations this website doesn't give me a whole lot so it really adds to it so if you're thinking is my project one that merits the cost of hiring an illustrator or my time to illustrate the project think about what it adds to your project does it give you something solid that will make your website stand out and breathe life to it? In terms of illustration styles we're seeing a style in print quite a bit these are two illustrations done by Anna Strumpf and she's an amazing illustrator and what she does a lot of is illustrations on top of fashion magazines on top of celebrity and model photographs and I think this is a style that's going to transition into web quite a bit the next trend that we're going to look at is striking typography so some people earlier were noticing the typography on that packaging I showed and that's definitely something that we're seeing so this is Good Fortune it's a concept restaurant by Cori Small and Chef Ryan McDonald in Missouri when I think cutting edge web design I don't always think Missouri I haven't been there no offense to anybody if they're from Missouri but I really do love this website to give you a look at it there so this is a restaurant website and as well they sell apparel you know when I think of a Chinese food restaurant I don't think of a Gothic type like this but I think it works really well and the large font on it looks awesome you've got the on the right hand side you've got some vertical type I think it just is something fresh and different so this is a website for Core 77 it's a creative conference in Brooklyn that talks about how to launch, grow and evolve your creative business so it's not surprising that a conference that's geared towards creative is using web design trends and creative typography I'm not suggesting you go and go onto your corporate client websites and start making all the types super funky you have to know your audience and when it's appropriate to use these things and you're seeing those monochromatic images here again and at the end a little micro animation which we'll get into more as well later if you're thinking about typography and okay where can I go to get some great fonts or where can I go to get some inspiration for type typekit is a great place it's attached to Adobe Creative Suite you can browse thousands of beautiful fonts and you can search by font type and you can also upload images of let's say you've seen some font in a magazine that you're like oh I really love that or on another website you can take a screenshot or just a photograph of it and upload those images and it'll spit back at you some suggestions of similar types another site I love is fonts in use guess what it has fonts in use so self-explanatory but it's a really great example and it will just help inspire you this is kind of the next one I'm sharing is my secret weapon so don't share it everywhere or do but this is a site by a type designer not a type designer just a typography lover it's called TypeWolf it's by Jeremiah Shove and it's an amazing resource it has beautiful websites that have striking typography examples that are updated regularly as well as some awesome top 10 lists for example you know top 10 fonts instead of Helvetica or all different kinds of stuff when we're talking about striking typography this is a custom WordPress site for a US based candy maker and I love the fun type they have here you still have bold colors as we scroll through and when you get to the bottom there you may notice the year in the footer so this site is from 2016 so it's not old but in web that's a while it's two years but they've done things to still keep it modern those bold colors are still relevant I didn't see this site in 2016 so I don't know if they've changed it since or updated some of those colors or images but food typography was something we were seeing everywhere in 2016 you couldn't go five minutes on social media without scrolling through Instagram and seeing somebody building something with food it's actually something we had done as well in our studio for our holiday card in 2016 that's a little behind the scenes when we were creating the food typography and but I think the way we see it used at other candy makers website is super interesting they're taking a trend that was heavy in print and social media and finding an interesting way to make it even more dynamic in web so this is our final piece and yes this is print this is not web so why am I showing you this because I really feel that it all relates when you see a design trend design trends are global they're not just specific to print or to web one translates to the other all the time and we always see a crossover of trends one way or the next so as a web designer, as a web developer if you're looking around you look in the real world look to interior design look to all different spaces that you can grab inspiration from don't just feel that you have to see only what's existing in web in order to know what's coming or what you should be working on now so along that same line we're seeing a lot of type in print we've been seeing this for a while but I really think this is moving towards web as well it's the interplay of objects, elements with the typography so you see the models are in front of the type behind it there's a really nice interaction between the images and the type and that's something I think is gonna come into web as well quite a bit another popular trend that we're seeing that's slowly coming into print design is this idea of glitch so you see kind of that distortion happening on the first image there and that's something that's going to come into web as well I believe the other image on the right is an example of deconstructed type you can see it says unexpected but it's not linear, it's deconstructed it's kind of chaotic and that's not a new concept in print design but I do think it's gonna come over to web more as well because of the next trend that we're seeing more of now which is broken grids and free form so that kind of broken deconstructed look really lends itself very well to this trend so I think we're going to start to see a mix of them together this is a website, it's a custom WordPress site for a museum in Denmark and you can see this is an example of a free form site so there isn't a very defined grid it's not boxy, it's not modular you see a full bleed color background now you see an image that's close cut now you see an image that's on the left, on the right the background changes it's kind of very free flowing and you may not totally see a pattern to it there is a logic to it but it is a broken grid on purpose this website unfortunately the video doesn't do justice to how cool this website is it's a Gucci Spring-Summer collection if you have a chance I highly recommend going to check it out it's one of the coolest websites I've seen in a very long time I'm sure their budget was ridiculous on this thing this is a little unattainable for most of us because it's just chocked full of animation it's really cool but if you have a chance, Google it or just click on the link from the presentation it's very cool but when you think about broken grids and free form websites and then you try and translate into mobile what do you do? how can you conceptualize something that's that free flowing into mobile and we should all be thinking about mobile design first almost 50% of users are accessing your website from their mobile device first or maybe only so I think the best way to translate a website that's either well really any website design into mobile is with a one column design so with mobile think one column and even though this is one column you still kind of get that free flowing concept from it because of the animations because of other things going on in the design that it doesn't feel that dissimilar from the desktop version it's a little disclaimer before you can think about breaking the grid think about all the reasons that a grid is good for the design it creates a logical flow for the user it creates a template and a hierarchy of elements that you can use for other pages to keep things consistent and so if you're going to break the grid in a website that you're working on think about why am I breaking the grid is it good for the design and make sure that you still define a strong grid so when you break it it's obvious that you're breaking it for example an easy way to do that would be let's say if you have a site that's all in white and then you have an element an image that's close cut or it comes out of a frame that's darker so it's kind of breaking through its own frame even though it's not breaking the grid per se it still creates that appeal and that's something that's more accessible for most people to work on next trend that we're seeing that we've been seeing for a long time is negative space and Apple's been doing it for years this is an example of a website from Wealth Simple and it's got a really cool little Rube Goldberg animation in it that continues down you should check it out continues throughout the whole site it's simple which it should be for a site named Wealth Simple but it's really effective before you can think about having a site that has a lot of negative space if a client comes to you and says I love the look of minimalism I want something that's like this ask to see their copy you know Megan had touched on this earlier but it has to be concise you can't have a site that has a lot of negative space if it's jam-packed with copy so that's something to make sure that you explain in terms of expectations to clients and also expectations to yourself you know it's important to know what you're working with and pare down the content as much as possible I think that goes even if you're not working on a minimalist site I think it's important to explain to clients that the web is a different animal from print and the way we interact with a site is different the less copy the more straightforward the better if your client is insisting on having a lot of copy or if you need a lot of copy just for the type of industry you're in consider the technique of chunking so that's kind of breaking your content and your copy up into smaller digestible pieces the same goes for let's say a checkout process so if you have an e-commerce website that checkout form if you have 25 fields that the customer needs to fill out on the first page they're gonna bounce they're not gonna be interested in doing that but instead if you make it like a four-step process and each step has you know five little, well just five little fields to fill out it all of a sudden becomes a lot more palatable so the next trend we're looking at is micro-animations so that's some small little animations that are happening they can either add to light or function or let the user know that they're doing something or something's happening so in this website here you see it hovering over the logo and then when it's hovered as well over the contact information something else that's happening in this website that's another trend that's on the up and up is particle backgrounds so we've seen a lot of full bleed videos for a long time but those are heavy and they take a long time to load on a site so we're seeing more and more of these particle style backgrounds which are pretty cool so if you're thinking I am not a developer I have no idea what you're talking about in terms of making a particle background and how do I apply a technique like this to my site? So this is something we've done on our own on Design As Yumbies website where we've just done a really simple hover effect so if you see when you hover over those leaves on the bottom or on that sunset there's just a little gradient effect just lets the user know something is happening there's something going on with them but it's not complicated it doesn't have to be this is an example of micro-animation that really breathes life into the site it's super fun it's engaging and it just adds a little something you know there's a slight bounce that it makes it feel light and airy if you're at my talk last year you may recognize this example it's um... this is a custom WordPress site from Le Caffe Noir Studio and it's their shopping cart it's a WordPress checkout and I just love their ads cart feature check it out if it's going it's super cute so this is actually a new website since I did the talk last year they completely changed their website but they kept the exact same micro-animation why? because everyone loves it right? it's cute it really is reflective of the brand it's a Dutch brand by Lizzie van der Leijt and all the products on there are very fun quirky and that's exactly what that micro-animation does for them so if it's not broke you know you don't have to fix it they reused pieces so if you create something cool you can keep reusing it even if it's not necessarily from yesterday so I'm not a wizard during my presentation you may have heard me mention at a few points uh... whether it's a WordPress theme or whether it's a custom WordPress theme that's because I do my homework, I'm not a wizard so there's websites like what WP Theme is that or WP Sniffer which is a browser plugin that detects active versions of WordPress and will even give you the URL of what theme is being used it's fun for just beyond you know stalking websites that you like we have a client that approached us a few weeks ago and was presenting some examples of websites they really like from competitors they said I really love this one I really love this one and it turns out one of the websites that they presented us to to it they presented us with was a premium WordPress theme that we were able to use and customize for their needs so we're still able to make it look different but the navigation that they love so much the style that they love so much we didn't have to reinvent the wheel this helped us just kind of grab a base to start with the next trend, ooh I better hurry up the next trend we're seeing is minimal photography so it's kind of that floating object look that we're seeing in a lot of websites this has been used in e-commerce for a long time but now we're seeing it used in more informational sites as well and it's a trick that really just draws the user's eye to a particular object this is an example of how we use it on our contact page again super simple just one image but it really gives that feeling of you know when you come meet with us it's friendly and it just gives a nice feeling with a very simple image so if you have an existing site you can just easily switch up a header image or a background image give a completely new feel to your site whenever we're working with images no matter what images you work with please for the love of god make sure they're good quality with no distortion because it gives a really bad impression that you're not paying attention to detail when your images are skewed or anything like that so make sure they're resized for you know mobile tablet desktop make sure you take the time to have good image quality so the last trend that we're going to look at is augmented reality this is not a website this is actually the IKEA app but i think it's worth showing because it's really cool and i think this is something that's coming heavily into design right now web design so basically the idea is you pick a piece of furniture and you get to explore what it looks like in your space we're already seeing this now on retail sites as well so this is the bone look eyeglasses website all their frames are actually made here in montreal and if you take a look you'll see lucas in the back sitting over there trying he's going to be trying on a pair of sunglasses for you guys looks good right so they're still glitchy they're not perfect in terms of how it works but it's fun it adds an element of you know excitement and engagement with users in your website so it's something fun to keep an eye out for so just to recap here's a list of all the different trends that we just went through and if we come back to breakfast so which one are we seeing here we're seeing the bold colors that neon kind of aqua we're seeing high contrast we're seeing the minimal photography and actually on the top it's kind of hard to see but on the top of this container the lettering is getting mixed up with that vanilla stick so it's in front behind we're seeing those trends everywhere and if you look around you i think you're going to start noticing a lot of those trends in more than just print or web you're going to see it everywhere as well even in the word camp banners so when you think of a user landing on your site i think it's important to think of the journey that they're going on and the fact that you're leading them on a journey you're you're trying to tell them a story so what are you trying to tell them and what kind of stops can you make along the way along that route to make it interesting and delightful for them that they're going to want to stay longer and keep going down that journey with you where are you guiding them so what do i think is next in terms of trends i think we're seeing a lot more interaction artificial intelligence chat bots and a more customer service personalized shopping approach we're seeing a lot of that and i think basically in terms of design we're seeing a free for all if you look at these sites none of them look the same they're all really different and i think that's exciting we're at a really exciting point in web development and design where anything goes so if i can give you any advice it's really not to be afraid to take chances try new things in your design experiment and if it works great and if it doesn't that's okay too because nobody will probably realize that it doesn't work they'll just think it's something new and different so don't be afraid try something new and just have fun with the web because that's what we're all here to do and that's it any questions that was a lot of content yes you know it's hard to know exact yes sorry so what the question was was how can you predict what the trends are how do you know what's coming next and you know i think even people that are saying they're experts in trends and forecasting and predictions they're just educated guesses you know at the end of the day nobody's going to predict exactly what's coming but i always think we should look at the world around us you know we can't design in a bubble look at what's going on around you in terms of trends and interior in packaging look to the pan tone color of the year how are those things being applied around us and just be inspired by those things but don't feel you have to follow a specific trend just because it's coming or it's out there doesn't mean it makes sense for your brand or your business to to follow suit with that you also don't want to end up in a case where like you know 1980s style right you see acid wash jeans the mullet the frizzy hair the big hair the hoops if you put every single trend that's happening in 2018 or 2019 that's going to come right into your design people are going to go oh 2018 website you don't want to do that so feel free to kind of pick and choose and make your own mix and don't worry too much about trends and worry about what looks good and what feels right for whatever project you're working on any other questions yeah um I think that's use yeah sorry he was asking if I think it's worthwhile for agencies or other places to make custom fonts to use I think interesting type is always great there are so many thousands of fonts out there I don't want to discourage type designers because we need you but do I think you always need a custom font for a project probably not it could be an interesting place to use let's say if you wanted to create a special font for a header but you want to make sure that it's going to be accessible and usable so google fonts are safe bet and things like that type kit just to make sure that when you put out this great font people can see it any other questions yes whichever one so the question is out of all trends which is my personal favorite um I'm really excited about the whole idea of um about just the fact that everything goes it's really a free-for-all for me that's really exciting because it means we can start to experiment and try different things and that's exciting I do also really like the minimalist photography I think that's really fun and inspiring and helps me think in a creative way because if you're only using a couple of elements on your imagery how can you make those images really exciting what can you do what colors can you try what objects can use how can you make it floating in space like that's fun yes that I don't have data on that but I will repeat the question so the question is if you do update the design and the look of a website does that translate necessarily to more sales or a better engagement or a more trafficked website the answer is I don't have information on that but do I think it's important for you know users that are more and more web savvy to see that you are taking that time and making that effort to keep up to date and give them a beautiful experience especially in e-commerce I I do think it's worthwhile yeah I definitely think it's valid yes yeah so the answer is are there alternatives to WooCommerce that would give a simpler more minimalist feel none that I can speak to offhand to be honest usually when we've done e-commerce sites it's typically using WooCommerce yeah yeah good absolutely those are two really great points so one point was regarding the WooCommerce so you you don't have to use the out-of-the-box model you can customize it to make it leaner and more visually appealing and the other comment was also awesome about ab testing to compare two different designs one x the other and get some data and user feedback on which one is going to work better for you anyone else with questions well thank you guys so much for coming and oh sorry yeah in terms of design of the comment section I mean the only areas that I can think of to make the comment section more interesting would probably be in terms of the design of how they're liking or sharing or that common boxes maybe there's some cool images or micro animations around it or something that draws the eye to it beyond that I haven't had much experience with customizing comment sections so I can't really speak more to that any other questions well thank you guys so much for coming if you have questions afterwards I'll be around at the after party