Building an Award-Winning Website with Webflow & XD (Design Process)

what's up youtube in today's video i'm going to go over my design process for this website i recently launched so this is a website for crush editorial which is a creative agency i built it completely in web flow and right after launch it was featured on muesli's interactions of the week next to some really cool projects and then it also won the site of the day award one css winner so i was super excited about this because it really showcases the power of no code tools uh like webflow and what can be done in them so um this client that i worked with was super awesome to work with really understood being a creative herself the design process so the first step that i took her through is i sent her this form and asked her to select a bunch of keywords that describe your brand and then also send me a couple examples of sites you like and why um and then a lot of the brands i work with don't have very established brand guidelines typography colors they may have a logo and not much else so when i'm designing a website and an art treatment for them i'm really working on the brand as well and building out elements of the brand so i really had to dive deep into some of this uh some of this work up front to make sure we're aligned together and this helps but it's by no means like the be all end-all so i'll show you an example of what i mean by that um so the top three keywords that were selected were authentic playful and competent and then a quote from the client was i like designs that feel like magazine layouts lots of white space with clear visual elements variable type sizes that draw the eye to important words so that gave me an idea of what we're going to be working with in a little background is this creative agency mainly focuses mostly on content and it's uh has sort of an editorial feel so they get me a little bit of direction but i knew playful was one of the key words selected and also one of the sites it was this time capsule site which i thought was really cool um has inspiration so i kind of built out a couple of different examples in this mood board like just pulling inspiration from enhance from dribble um and showcasing like hey this is one possible direction that really leans into the playful creative side of things and what i found out later is this was actually too playful and this was not going to be the right concept um so playful can mean a lot of different things to a lot of different people and even with this playful design style of the inspo that was sent she was more so talking about the interactions of the site not the visual elements of it so this is where it's really helpful to do mood boarding first because i didn't have to spend a ton of time designing anything only to find out it wasn't going to work i was able to quickly cross that idea off the list so the second example i sent um and i sent these all together she liked a lot more um this one leans more into that like authentic side of things um so again we have some open space we have a lot of grids this was actually another example site she said that she liked so i built out some examples around that like what are other sites that have this sort of grid layout and uh that have a lot of open space very uh light themes so this one was a little bit more um interesting she was a little bit more interested in this one and the great thing about this is using xd she was able to leave comments on each uh item and tell me what she liked or didn't like about each one of these so it's not just hey i like this overall direction or i don't um so every piece that was included in here was helpful in some sense but this last direction uh the client absolutely fell in love with and this is very much that light very classic um editorial feel a lot of serif fonts um open space kind of things broken up and crazy grid layouts and this was the uh i would say the clear winner so we knew what we needed we had a direction planned and that was super helpful when diving in another thing that was a little bit different about this process is i worked with a content strategist so our client provided most of the actual content the strategist was able to uh sort of organize that content and let me know hey on the home page we're gonna have these two headlines we're gonna have some sort of intro text we're gonna have this call to action um so i was able to go through here and that really helped with not making the design look like a template because so often uh we're given not final copy and we'll say we'll have a headline that's about one to two sentences but then we can't decide all right how do we want to pull apart these words or animate them and do different things like that if we don't know what the words are yet so just having that content um before i even started design was like a lifesaver on this project was super amazing so i'll take you through some of the uh initial designs when i started designing i kicked around a lot of ideas these never uh made it to the client the client never saw any of these but i was like all right big open headlines i was playing with different shapes none of this was said in stone yet this is like me just trying to get as many ideas out there as possible onto the table to have something to work with um so i even decided all right what if we broke these headlines up into two separate headlines we're gonna have some intro copy i didn't know quite what to do with this yet i knew this was too busy um i knew it needed to have two headlines in a paragraph and a hero and i felt that was kind of a lot uh plus a cta so i knew i still needed to solve for this problem so i started deciding right what if i kind of designed this a little differently and this is where it's really helpful to have that content and then what if instead of having that intro text in the hero i can break it up into the next section um and even have the cta underneath and a cool thing about working with prototyping tools like xd is i'm able to actually prototype interactions so i'm thinking about like what would my hover state be for these how would it sort of work um without having to build these out of webflow and i'm even thinking maybe i'll have custom a custom cursor of some sort um some sort of underlying state this is just kicking around a bunch of ideas very quickly and then i thought uh what if the photos would if i have two photos that overlap and i have two headlines like i break out the two headlines on some sort of animation that loops and uh you'll see i'll come back to this idea later but this ended up being like a pretty cool idea for the hero concept so continuing with that i was like all right what if i have the two photos um rotate out the two headlines but keep the paragraph text in the lincoln view it was still a little busy but it was definitely an idea um and then i started breaking out these sections underneath like these different um calls out the callouts i would need to have and what hover states would look like for them and then i knew i needed a testimonial section started playing with some designs for that and then even the final cta i had no idea really how i was going to animate this yet i was just playing with it uh and seeing what i can make so this next one i really this is where it started to come together i kind of established a brienne font that i really liked um i knew that like center aligning this text looked really clean with lots of space uh having a big photo here was helpful and then i for the first time i pulled that paragraph text out under here and i started playing with different hover states that could be kind of cool and the client actually later said well what if we make that hover state into like an organic blob kind of like some of the other shapes i was playing with earlier so again playing with different interactions different layouts and still i spent a lot of time on the hero just kicking around different ideas this is where it really started to take shape and i knew i wanted to have these two headlines that sort of rotate out like this i was going to have these different shapes and i started bringing in some of that grid that we liked from some of the other concepts but i was able to still keep some of the open space in other sections and this was working a lot better um and this was the concept that i landed on for that home page just lots of open space kind of broken layouts i decided that it was too much to have those three different uh blobs like write-ups all in one screen so i put it in a slider and uh that really brought this section to life a lot better too started aligning things better working with different layouts so um and that's where i landed on the home page so before i did anything else i sent this to the client for review and this doesn't happen too often but she absolutely loved it uh didn't have any changes design wise any changes we had were to like photos or copy um was super awesome so we were able to just quickly move from this we had the home page approved and start designing all the other pages and again i followed the same process of all right i knew i needed this headline on the about page but how can i make it more interesting how can i maybe throw in some shapes that i can animate pull it all apart like crazy and sometimes you have to get the bad ideas out so you can make room for the good ideas so don't be afraid to just try different things and if it doesn't work it's okay and this is where i ended up landing um and again just having this content in advance helped to design something interesting and unique um but yeah that was kind of the process so once we had the internal pages approved we went into developing and the development was done in webflow and a lot of these interactions i kind of talked about in advance what we were going to do so we knew we were going to have some sort of custom cursor we knew the shapes would probably be moving we need had some hover states planned for xd so the development uh was pretty straightforward overall this project took 66 hours that's all planet calls emails revisions uh actually finding inspiration making mood boards designing and um 33 hours of that was the development and web flow and updating based on those changes so yeah it was pretty like it was a pretty fun project i would say definitely would want to work on something like this again and i mentioned before that there was only a couple parts that needed custom code the majority of this was done with webflow interactions so the um cursor where the svg is kind of warping and moving that was done with custom code and then the last piece was this animated text and what i was able to use for that was this animejs.com so they have a warping svg animation you can use and they also have staggering so you can stagger each letter one after the other and there's actually this pretty cool moving text library where using animate.js has all these different effects pre-made ready to go and you can actually just select any one of these and just plug in your code right into your project to make this effect happen so that was the process that i took for building out this site um thanks for tuning in feel free to like comment and subscribe for future videos and updates see you later

Channel: Timothy Ricks

Views: 19,483

Keywords: website, awards, award-winning, adobe xd, webflow, xd, process, design, systems, moodboards, style, art treatment, art direction, development, freelance, behind the scenes, client, progress

Id: 9doNsnqriKI

Length: 11min 56sec (716 seconds)

Published: Fri Oct 23 2020