Web Design Basics Overview (2019) – With Ran Segall

what is up everybody on today's show we're going to learn how to design websites in three easy steps it could be done I don't know but Ron Seagal is the man who's going to show us how to do this you may know him from his amazing YouTube channel called flux Ron Segal welcome back to the show up graded okay nice trying to pimp up my live stream and set up your gonna outdo us right now so the game is on okay so without further ado let's just get right into it web design graphic designers why do you need to do it are you leaving money on the table when you're not doing the web design Ron take it away all right so I've been talking with so many designers later lately like even freelance designers but both agencies especially you know graphic designers that are doing branding and in all types of design and a lot of them I found out are not designing websites which is just like so weird yeah yeah it's like imagine that you're you're going into a restaurant then you ask the desert and then they're like oh go to a restaurant across the street it just doesn't make any sense I mean everybody you know every client entrepreneur business owner who comes to you and needs to read and obviously the next phase he's gonna need a website it just doesn't make any sense not to offer website as a designer mm-hmm and I just realized just from talking to other designers that a lot of them just find it intimidating they think it's so complicated with everything that apt to take they hear all these like crazy terms like UX and you are and they're just like blown away at how complicated it is and so I'm here to share with you like how to think about this it seemed really really simple I want more designers to build a website because here's the thing you know everybody's now talking about UX and UI and it's all like the rage but an in product design you know how to design whatever apps and dashboards but when you think about it like there's so many like there's few companies that need product like digital product design and whatever dashboards apps type of thing right so it's kind of like a pyramid because every business in the world ends up meeting just a website so there's just like crazy demand to it and nobody talks about this word or teaches this and so Matthew I was talking to Matthew and he kind of challenged me he was like can you put into and kind of cover like five to ten steps on how designers can get started about this and I was like thinking about this and I was like okay let me do it Wow where were you and I started designing ran three steps that's that's how the awesome yeah that's it's it's kind of like let's go through it I've prepared two presentations so let's let's let's get into it you are you saying go again hold on yes what's wrong forgot to add audio on that one okay hold on take it back to the beginning of this what is web design what what yes there we go okay go ahead all right so basically what is Web Design right so basically it's content there's some text there's some some thing like a story that you want to convey there is creative direction which is how you visually present this how do you make it appealing how do you make it pretty and then there's technology like how is it implemented into a website like how is this literally built and this is basically web design and but I actually think like if you think about this I actually think this is true for every design because if if you take anything like let's think about package design so if you're you know I've seen your show right now you're doing like packaging for beer so obviously there's content there's need to be whatever ingredients the name of the company what's inside there's the design of it how does that look and there's the technology right it needs to be printed in a certain way or you have kind of technological constraints right if you're doing book design then it's going to need to be printed on paper on a certain size from certain material so in every design that we implement in the world there is technology involved and it's just the web is just a different technology so basically I think this is the framework to think about any design but if you go through these steps which I'll try to break down to you right now basically you'll be able to figure out how to build websites relatively easy I think please get started mm-hmm so let's go through them like one by one basically it's it's three steps so first one is content right so basically how these are some questions that we need to ask ourselves when we get like a website project so first one is what is the goal what are we trying to do and this is very similar to what you cover in you know discovery sessions or strategy session whatever you want to call this this is also super true for any website project you need to know who are you doing this for who is the customer why are we even doing this and for a website there can be all types of you know things that you might wanna achieve or you're applying such as you know getting more lead or selling something actually on the website or educating people or getting engagement and you need to understand this because if you don't understand this you don't know what call-to-action to put in now that's it's I think so many people don't understand this I've been going through a lot of you know designers portfolios which are basically websites and there's simply no call to action it's like they didn't even think what I'm trying to accomplish with this website obviously they're trying to get clients to call them but they didn't even make it easier on me a big like putting their you know a big call-to-action contact me or here's my idea so you need to wait up first understand what are you trying to do here like what's the call to action what are we trying to accomplish with this website now that you have this you can ask yourself the question alright so what's the story here right so most people leave websites like most when I say most I mean more than 85% leave every website below in less than 15 seconds this is kind of like most people don't understand this but if you ever opened up any analytics you'll be blown away to understand that most people left your website in less than 15 seconds so that you really need you be very very clear and answer the question within less than 15 minutes you have to answer the question what is this website who's this website what are they doing and for me if you don't answer this really quickly people are going to leave you need what is the story how do I answer these questions now some helpful frameworks to tell stories couple that I use is first one is called story brand which is a book that you can get basically it breaks down how every story in the world works so it's something like there's a hero they have a problem they need kind of a guide that guide gives them a plan and then you know they go through the process and then they solve the problem and this framework actually explains that this is how most you can build them and story for aim work and that really helps you create a story for your own website website that's really really simple another popular framework is the why how what that was popularized by simon Sinek I think he's called which is basically answering like why this company exists and how are you doing what you're doing and we actually so these are frameworks to kind of understand what is the story that you're trying to say and that story helps you together with your client or with a Content writer to write write the content write the story of this website and again that can be applied to all pages that it's a long story every story can be very long told like in in a very long form and a very short form so this story has to you know work within 15 seconds first 15 second you need to get snip it out of that story and then very long form so you know let's say star wars right I can say it very shortly like a guy his cousin's got killed he met the Jedi he destroys the evil forces right I told that in like 10 seconds and also you can watch three-hour movie about this when you have kind of a story you can stretch it and expand or tell there's four three now one thing about this is that words are important I mean copywriting is important I know that we read designers are very much like to focus on the visuals but when it comes to the web and in general I think in advertising in anything words are very important so you need to learn how to tell the stories both visually but also in the words and I personally think that designers can really benefit from learning how to write also in sides doing the actual dis so now now you have the story basically now you need to structure it right now in the web you know you tell stories very similar to how you tell stories in other formats right so in a book you tell the story every page is the next step in the story so you have page 1 then you have page 2 page 3 and that's how you you structure the story if you're doing the presentation then you have obviously slide one two three when it comes to website you basically have sections right so you have the top second then you scroll down you get to the second section you scroll up so basic a page is basically like turning a page and that's how you tell the story so you tell the story section after section and you can think about different pages in the website like different chapters in the book so that's how you need to basically structure the content on a page and one thing I want to say about structuring the content we designers won't we love to be creative and we love to innovate and that's good sometimes but sometimes it's not very useful and when it comes to the web you know people we ever and every one of us is using website and browsing website all day long so we know how that works and we have certain expectations of how things should work near the designer and you're trying to read the wheel sometimes it just creates more convenient and helpful though you need to basically understand like what what are the best practices and how things work and there is a great book that called don't make me think that basically kind of gives you kind of pointers about what you should or she but you need to understand basically the the medium in which you're working on so that was basically step one and step one as I said is dealing with the content and the outcome of this step is you need to have something that's like wireframes now you you get started with you can see the image of Bob kind of like what's called low fidelity wireframes which basically kind of depicts the structure of the website so we're gonna have a page about this and a page about this and it's going to have this in that content that helps you kind of you know facilitate the discussion where your clients are about is are we going in the right direction and then you create like more high fidelity wireframes which is basically just kind of like a black and white kind of like the content inside but you don't put colors in it you don't put visuals in it you just want to see that the content is structure the right way and you don't use colors because you don't want them to talk about design you just want them to approve and see that the content is accurate so you use this this is basically a tool to to collaborate and get approval these wireframes right alright Rhonda wanted to jump in there on the image there at the top he also had what do you call that the sitemap right on the job right yeah so yeah you can call it a sitemap something like or flowchart or whatever but this is basically just means it's kind of a high-level look at or the website right um you basically would have that also on the on the one below which is just like a higher fidelity one which also includes kind of like the real text hmm and by the way when I do this I actually write the text myself I'm not a copywriter not even a native English but I've put something there to try to help them tell the story and when there's something on the table even if it's crappy it's it's good to get feedback so I put the first version and it really helps them to iterate on it and improve on it rewrite it I think it's much much better than just I see some designers are doing kind of using like lorem ipsum which really I can't really understand what you're trying to do here with the story and even you when you later on you're gonna meet to create visuals here how are you gonna know what to visualize if there's no text right so I suggest you get down to real actual text that tells the story again it doesn't have to be final final but you should you should really try to put this in at this point right okay you guys ready to move to the next step we are yes thank you alright okay so step number two how do we actually design this how do we make this look great so I get started by asking the question like what is the best let's call this art vehicle to reach our goal right and this is pretty much similar to what you guys are doing with the style scapes basically I want to I want to show the client different approaches to things that might work and try to see you together with them again it's a discussion what might be the best fit for their goal now I think that it's very important to show many different styles and I think a lot of designers are opting to what they would call my style which is basically what they know what to do and that's not not necessarily the best thing to solve the clients you know to help the client reach his goals and to best communicate so I try to show everything even stuff that I don't know how to do myself you know illustration 3d photography topographic whatever and I use a website called lappa ninja which is basically just a collection of a lot of landing pages and it's really always updated so I always go there collect reference I like throw them into maybe you know folders like 3d illustration and total feel whatever to collect references and then we use this kind of as a discussion to where where we want to go so that's that's basically the first thing now based on the decision that we make here I usually collaborate with other creatives now and this is a photo of redeem Olynyk he's an awesome art director from London which I just really recently collaborated with because honestly you know you can't master all every possible style right you can't do it all yourself and so to really make get the best results for your clients you need to be able need to have kind of a network and and you need to have friends or people that you work with that are very good at specific things that you you want to collaborate with so you might call it subcontractors or whatever or flu dancers but basically for me it's basically a network with friends that I know that every one of them is good with something else and we work together on project depending what is the best thing for the client and again I don't try to do everything myself because that's not necessarily going to be the best thing for the client all right the next step is talking about typography and grid and kind of stuff like that now on the image on the right is a Google search when I write free UIKit there's just and tons of actually really great stuff there and I kind of look at it as kind of like an open source for designers so open source if you don't know kind of in the development world there's there's a lot of project which is called open source which means that people put them out there for other people to take them and reuse them as kind of a starter point for their own project and designers are starting to get into that with like it's so you can find really for whatever software you use you can find really really great UI kits which are basically a starting point they already set the typography with you know different sizes in a way that makes sense that free to the grid for you now you're gonna take this you're probably not gonna use it as is right you're gonna change to your own typeface for the project so you're gonna need to make a little bit of adjustments to the sizes and to the grid and everything but it's a great starting point and I I think a lot of designers are so overwhelmed by trying to think about everything themselves and you don't really need that you can you can get started with you know kind of a library that sets the general the general structure and and work on that you know use that a point and just go from there I think that will really simplify now next point on that is there's something that's called accessibility which basically means that you know mm some people have disabilities of all coins and like some people don't see well some people don't see color as well and we need to take that into consideration when we're designing so I'm not gonna cover everything but I think there's a really great post by by Pablo Stanley which is called designing for accessibility is not that hard and basically he covers the key principles which he should go through before you know you finalize your design it's things like you need to have enough contrast in your colors on so that people can actually see what you did there you know we designers we like the subtle subtle gray font that turns out that people age of 23 can't read um so you know we need take care of that so just you know read this it's on pause it's pretty short and you're gonna see it's not such a mess but you need to think now the most common question that I get all the time is like what tool should I choose and there is not so many tools for for designing for screens or a sketch figma xt studio and every day and people obsess over this as if if they just got the right tool now they're gonna have an amazing website but honestly guys they're all the same I mean you know oh thanks sir it's just like tiny features okay some you know but it doesn't matter don't over think about this and all of these tools are if you already know or InDesign or those are much your tools which are basically drawing up rectangular Wow you're giving them rounded corners you're throwing in images and that's it like it's it's a no brainer so just pick one whether it is you know if you're on a go way you're gonna get a text e for free or if you're on whatever you choose one of them if you want collaboration go with figma but it doesn't really matter so don't get stuck there on you can just move forward with the design ready all right are you ready for step three all right so technology so I think it's really important to understand the medium for which you're designing for and what are the capabilities I always think that you know you can't really if you're a print designer and you don't know the difference between you know what's RGB and CMYK you're gonna be really disappointed I mean you use that shiny green color and it's not gonna print that way because hey you can't really print RGB colors so you need to understand what's possible so one thing that you what you want to do and because that is always developing with such a fast pace you always want to stay up-to-date and there's you can browse websites like like awards or or code drops or code ban which basically shows you what are the latest kind of like experiments or or cutting-edge innovation that are possible for the web and I know I've heard or I saw Ben's tweet Awards where he will dude those website I'm so unpractical and it's true but you don't have to design them like this but you need to know that it's possible that it's possible to create this animation it's possible to do this effect because you might want to use it at something so you just know what's possible so just educate yourself I was aiming by looking what other people are doing now the second thing is again as I talked about you know the difference between RGB and Ceylon cake you need to understand key concept now let me super quickly go through key concept of the web so websites are built from HTML pages that's basically the content right well actually what we talked about in in step 1 it's basically like the texts and you know the how this is structured CSS which stands for cascading style sheets is basically styles and basically it's very very similar to InDesign or for any other design software you have a Spile aim like big title and there's a definition like ok a big title is always black 37 pixels and this font so this is basically the definition of how everything on the HTML looks like that's that's basically how the structure works now the main difference between how designers usually think about their designs and how it's really implemented on the web is that there's a mental frame or mental concept I don't remember how to say this but basically it's called the box model and the box mark like so when we designers use design software to design and we're used to layers right you have a stack of layers and basically it means what's on the top is on the top and what's at the bottom is on the bottom right that's how it stacked together but on the web things are dynamic the sizes change and there's relationships what actually happens is that it's not something on top of something it's actually a box within a box within a box but everything that you see on a page is actually a box that has some properties but those CSS properties that we talked about like this box has a red background and all the text in it are you know Green is sort of fun and inside of it so this box might be lets say a section inside of it there might be another box which says this is a button for example and so you need to understand how this model works so you can decide define you know the spacing and how it react when the screen size changes so that's kind of like a different mental model but he said you're so familiar with it really again not that difficult but it's just a different way of thinking that you need to read now but basically the one of the last things that you need to consider is you know not everybody has the same screen obviously you know mobile everybody who's designed for mobile and actually what you see on the right is actually Facebook on what's called today a dumb phone which is what a lot of people in the world are actually using no not like we take smartphones for granted but it's not the case for everybody but what I put this for here is that you need to understand that you know not everybody has the same screen so if the color is the uniform yet screen doesn't mean that everybody's gonna see it that way not everybody has the same internet speed so you need to think of it that some people are gonna be on older browsers which might not support everything so you have a little bit of considerations to do and again it really depends on who are you designing for who your clients customers are so that that's kind of things that you should think and obviously be sure to test it on relevant devices before you're going live so basically the last thing now that you have the the design ready is now you need to think about what's the next step like how do I take this beautiful design that I did how do I get this to to a live website and basically you have a few options to do with that um so the first one and I've been spending a lot of time about quarter a lot of my career I've used to outsource my work to developers I used to send the design and they would design it they would develop it each one of these options obviously has pros and cons so when you're when you're outsourcing to a developer one of the cons is you don't have to do it yourself right that's something good con of this is that first of all it costs a lot of money so sometimes it's up to like 50 percent of the cost of the website sometimes even more just go through the developer or building the website right and also communication like explaining to them no no this is not what I meant this is not how I want things to animate this is this takes you a lot of which again time time is money is the second one is that you can do it yourself and there's a lot of possibilities today there's tools like wakes and Squarespace there's plug-ins for WordPress the elementary is one of them there's another one that's full DV and those solutions the good thing about them is that they allow you to do it yourself so you don't have to depend on a developer to do them they're also relatively I would say he who learn so it kind of like I would say for dummies but a lot of them were actually designed not for designers they were actually designed for clients to do them to do the work themselves so that you don't have to know about anything now the problem with those solutions is that you're kind of limited because you're working within templates so basically they they kind of designed more or less components for you and you have to work within them so if that fits your design that's good and well but if that's not what you wanted to achieve then you're kind of in a problem here I'm kind of limiting that the third option which is obviously my favorite or not obviously but it is my favorite is web flow which is basically a tool a development tool that was build for designers so you actually do the development yourself without writing code now the good thing about that is first of all you don't have to depend on the developer so you don't have to pay somebody else and usually the time that it would just take you to communicate is the time that you're actually getting the site done so it helps you making money you're going to charge for the development and you save up time the con of this or why this is hard for a lot of designers is that there's a learning curve here and takes time to learn this because you need to understand all those mental models that I've mentioned earlier you need to learn to think like a developer to understand how to do it yourself and wait efficiently so that's kind of like why it's hard for for some designers but obviously I'm I'm a very bit a big advocate for them I've been working with them for like almost four years now it's literally changed my my freelance career so I'm a big fan of this option well whatever you choose I think the most important thing is you just get started because don't leave money on the table just like and as I said before there's just like every business in the world meets the website every business in the world meet their website updated consistently so that's a good opportunity to do interesting work to detain or work on to bring a lot of value to your clients so yeah just just get started hey that was fantastic yes I felt like a little value oh no it was and just as a little personal story because you guys might think okay so we're so Ron loves clothes of course and all roads lead to web flow but Ben burns leading our digital web team and the marketing team has evaluated many different options and we now have fallen in love with web flow and we've used well flowed to develop sites for for Hamilton brewery yeah yeah so that ties into building a brand the series so people who are fans of that who have gone to their web site that's a web flow site right and the future site is going to be a web flow site so this is like exciting things and we're hearing from the people who are using it there is a learning curve but it's not steep it's not horrible it's a couple of weeks worth of work to figure it out then there are at least three members of our team who are already using web flow who aren't even say classically trained as web designers right it's pretty fantastic tool they don't have any coding backgrounds they're just visual designers visual designers and doing the coding work and I do want to share some of the pain points before we open it up to questions so I'm prompting Matthew to get ready with the questions for you Ron from people who are watching and tuning in live saying hello to everybody is that I feel the pain because when I was getting started and doing web design I didn't know half of what you know now but I would hand it off the developer and the pain points that you talk about a really true I want to spend a moment here to talk about that weight and and this probably one of the reasons why some designers don't get into web design because we can design it we can think through the problem but then there's this technology gap and then we outsource it and then there's all this frustration like I don't know if I'm over selling or under selling something if I'm being overcharged or under charge I just don't know I have no control over it and this very thing did happen to us we outsource our coding almost all of it the development and some developers were really slow and getting back to us and it was creating a some tension between us and the and and the client because the at this point it was in the hands of somebody else and we couldn't make it go faster we couldn't make it more high fidelity or we couldn't control all those things and I'm not saying I'm a control freak cuz I would love to just give to other people but they're not mind reader's there's a gap there and so there's definite pain so and honestly I've been talking with I have a few friends who own agencies and big agencies here in Israel and so it actually splits into people who have totally given up on this because of this and two people who are doing this but they're actually losing money yeah so they're like I'm gonna I'm gonna do their website just because it's part of what their the contract is if I'm if I want to get this branding and I'm gonna make the money back on the branding but actually if you kind of like calculate the money on the web design project they lost money on that project and you know they're losing money on it just to get the clients but it's they're losing money and and and basically I've helped a few agencies turn things around by you know training their their teams with left flow and helping them do it in-house and it came back in from being a profit Center mm-hmm okay let's jump to the questions I there's a lot there's a very active chat going on right now a hard time keeping up so Matthew what kind of questions should we elevate to the top yeah I think one big one that is because in our audience we have designers and some people who are really deep into web design and development Ron do you have a stance on what something like web flow is really good for like the types of sites that it's really good for versus things it might not be good for okay so I think like the ideal use case at least for me is what I think it's being called as a marketing website so a company has a website that tells about the company whether whether it is you know a tech company or a restaurant or whatever every business the kind of the business website I think that's the ideal use case obviously there's you know there's blogging platform on it so you can create content websites on it there's now ecommerce so you can Freight ecommerce website on and I think that the core strength is is for basically business websites now what I don't think it's ideal for is a lot of people think this is a lot of people confuse actually web apps and web sites so let's take an example like when you book flights online mm-hmm you feel like you're browsing a website you're actually using an app you're doing you're performing searches you're you're you have a booking system you're maybe iterated with few different websites to pull data from you're actually using an app and so a lot of people are trying to use web flow to build apps and it's not you can make it do it you can hack it your way through but it's not ideal people who are trying to go and like maybe subscription websites or portals where you have users and passwords and user management all that type stuff you can do that by integrating third-party services but if that's not like the the ideal use case I would say hmm okay yeah that's I have a question for you why do you say that the ideal website to build is a marketing site because it has it has almost little logic to it no coming back what's called back-end you know in development where you need to have the server performs you know whatever calculations manage database like that again you can include use the CMS which is content management system but which which is basically databases but it's it's basically website that is most of its content and then this content is designed using you know front-end development the back end is pretty lean let's say and then the core use of that is what I call marketing website but that's basically I would say like 80 to 90 percent of the websites on earth you know right mm-hmm I see what you're saying and you have some you have several years of experience designing and then now also building websites just for us to kind of get a sense of budgets when we say we're leaving money on the table by not offering our clients to design and build their website what kind of budget range ranges can we expect for these marketing sites that you're talking about so obviously obviously you you know that you budget really depends on who the client is but just like the recent example of over the website that I did and I did a king study on this on a website that was $25,000 of a website all right so and I did as I've mentioned I've collaborated with really artists to give an animation for me so that's not all profit but most of it here and this is yeah yeah so but that's the type of clients that I work with I work with tech companies so that that's that's a budget that's the range of budgets that I work with I can tell you that most of my students right so I have now 1,000 students in my web flow masterclass course mm-hmm I would say from what I hear and talk to people that the budgets the typical average budget ranges between maybe five to ten thousand dollars of what you know I see my students are doing yeah and for a site let's just say ten thousand so we can keep the numbers around here per site that's ten thousand dollars how much of that would you have had to spend having a developer make you think at least fifty percent okay these five at least yeah okay again I just I just I just had lunch with with the you know with the agency on her friend that I had like a couple of weeks ago and he told me like and they're they're not working with web flow but specifically on this one big website that they had the the client insisted and after they build it with a flow it will be translated to WordPress and he told me that the developer charged $20,000 for just translate they already build the front-end in web flow and they exported the code for them so just plugging that code into WordPress cost them $20,000 to me that's like craziness but oh well Rhonda there was a question that had come up here in the chat and this is from Fran Giotto chick and he asked I'm scared that the man for a web design might go down just with all of these tools making it easier and easier what does that trend look like to you do you feel like Web Design is actually growing in terms of needs for clients or is it shrinking because it's getting saturated okay so what am I feeling about this is it's true basically for a lot of the design world it's not only website it's true for branding and for other in marketing design as well I would say that if there was a pyramid let's say of high level designers mid-level designers and level designers my feeling is that the middle is getting squeezed out by its new technological tools right so now clients can design websites or buy a template they can also go to a website like your brand or whatever and have the logo made in like 15 seconds from $100 so those are and my feeling is that these tools are hurting the middle of the market or yeah the middle of the market but it so there will always be demand at the top right there will always be people who need premium brand premium websites you know premium design in general right but the truth is that the the majority of the people in the world are bad business sense that brands bad whatever everything so I feel like there's more opportunities at the top now but some of them are dropping to at the bottom that's true and I think that you as a designer have to make the move to make sure that you're going up and you're not you can't stay in the middle anymore that's what I think you have to start moving upwards and bring more value and have to be premium because you can't be average anymore nobody needs average you can get average for 50 dollars now you know average like a $50 is very very good in terms of it it's good its average good right yeah so you you have to be you have to be you have to bring strategic value I think and it's it's true for branding it's true for for web design and that's why a lot of the value is not only in the execution it's a lot in the initial stages of the strategy and what are you going to do with the website and what are we even going to put there how are we going to structure this and hey let's and when you are designing it's not just hey let's grab some tender stock photos let's do something creative there we go illustrate or we go do something 3d or we go do a creative photo shoot but you need to do something that's worth standing out you know mm-hmm so I have a question for you because we've been following what you've been doing for some time now and you said that you have a thousand students in your web flow master class and and that primarily is a class to teach you how to use web flow how to make money off of it how to connect it to design are you going to start teaching people how to design the front part and connect it to the technology part cuz you said there's three parts right content basically design and technology so as far as I understand the web flow master class is the technology component are you developing something to handle the second part the design because that's where a lot of our community is coming from I'm sorry just neck next I want to say next months but it turns out that next months is next week right so next week I'm starting work on my new my new course which would be about web design in general which is actually going to be I think it's going to be one two three because web flow is only part of the execution and I'm teaching people how to use web flow but I'm not teaching them how to think about interactions how to think about what to do with the technology so I think that a new course I'm aiming to cover one two three yeah and basically I'm doing that because that like that's one of the most common thing that I heard for I hear from my students they're like yes now I can build websites but now I want to be able better websites because I also want to move up to that premium premium place where I can charge $10,000 plus for a website and I want to know how to bring that value that unique value mm-hmm fantastic so do we get a sneak peak or at least the outline of what it is that you're going to be teaching in this design class I think that was like the like when I created that presentation I was like I think this is a good framework to think about the course right huh honestly I again I always start next week but so I didn't have time to spend on thinking about the structure yet but when I was preparing for this talk I kind of came up with this structure and I think it makes sense to think about it this way obviously there's things like you know how to manage the client relationship and how to manage the project and all sorts of stuff that we didn't cover today probably we all cover but I think when it comes to the design itself I think that's what you need to understand you know how to create good content and structure it correctly in in a useful and beautiful way and then you need to know how to design it visually to make it beautiful you yeah and then think about how your are you going to develop it yeah I want to address a comment from one of our I think longtime in in very loyal followers or our subscribers so Channel Tony Alves he says I love Ron but because there's always a but in the I love statement I love Ron but I'm a developer and I'm feeling some bad vibes with this discussion do you agree about the apps but there are better ways and options for making sites now let's address this comment and I'm gonna take a stab at it first Ron is really speaking to designers not developers and he already told you guys that web flow is a tool specifically built for designers to cross that digital divide the coding divide if you will to help you kind of bridge that gap and it may be threatening to some developers like they don't need them anymore that will also cause developers to to level up and go up and not give average but I think for people like Tony who want deeper stuff don't worry about it this is not a discussion or a talk that's designed for you per se you want to add to that run yeah so a few weeks ago I was I actually I went to Kiev Ukraine to do a team training for an agency to teach their designers how to use web flow and basically this agency does a lot of landing pages and stuff like that and right now their processes they would design it and then it would take four days from that when they finish the design to when they'll they'll put it live by working with developers and I told him guys you can do it in one hour and so they brought me there and I was there training the designers but the front-end developers were in the room oh well and to kind of see what what this is and and everything now I could see on their eyes and in their questions that they are are scared and being scared sometimes lead to being angry yeah but I think basically you said it and I said it even earlier right these tools are going to make average not necessary and when it comes to web site the the front-end development 85 I would say to 90 percent of the web sites on earth requires average capabilities 10% of them are requires unique development that you cannot do with web flow or that you have to using custom code right like I would think that a brand like Nike perhaps maybe just an example that does custom crazy that is you know you would see on an award because it it is cutting edge and doing some like stuff that you know web flow might create a feature for that next year but first somebody needs to show that it's usable before web poll is going to be a bad feature so somebody's going to be at the cutting edge of development and to be in the cutting edge of development you need custom development so if you're a developer you do want to be in the cutting edge of development in the upper as I just like I said for designers you're gonna be at the top premium there you're gonna be in a really high value unique work there is no use for you to do the average look because if there is if if there are developers listening so there's you know something like something that's called flexbox which is kind of a layout property of CSS now do to write that it would require like ten lines to write how want to position something and you can do that in web flow with three clicks so you can't beat me on that you can't write the ten lines faster than I click three buttons you just can't but there's no use for you to do that right now I'm not saying you don't need developers I'm saying for a lot of things you don't need developers you're saying ID you don't need developers and then one second later you're like what you don't need a lot of things you don't need okay and I've used developers for a lot of web flow websites to extend capabilities and to create something even web folk can't do right but that would be simple I was like I need this one tiny hack and then they would solve it in an hour but it's just when you need it you don't always need it you don't just do things because that's how you used to do things like ten years ago yes yes yes so let me let me let me channel my inner Yoda I'm gonna channel my inner Yoda and say fear leads to anger anger leads to dark side okay so you guys that are afraid let's look at this when desktop publishing was invented as a viable solution for the mass market it put a lot of typesetters out of business right and when when the laser printer was invented it put the the dot matrix printer out of business and the dot matrix printer put put out put the Daisy wheel printer out of business so there's a jump and every time there's a technology push you got to just jump to the next thing Guy Kawasaki calls it jumping the curve that's how you innovate so technology displaces people it's happening all the time think about the things that you don't have to do anymore because of technological advances when was the last time you went into the field and planted your own food and harvested it when was the last time you went into the field and hunted for an animal to then have protein to eat well technology is displacing lots of things so I think we just got to learn to go for it because change is inevitable but progress is a choice so you guys let's just get to it let's get to it people if you're watching the future it's not called watching the past it's called the future so let's think about where we're going that's it Jaden that's a cut down I want to go back to the questions cuz there's a couple that are posing yes sir so I wanted to ask as we were just talking about features like you said the the flexbox neora asked a while ago what about integrating animations and then like can you talk to us about some other like the fancy features that are built into web flow that make it very easy to make these gorgeous looking sites so basically you could do well I do I know I want to say you can do everything but you can do if you're in you know if you know what CSS animation is which is basically animating the properties so prop you know animating position scale rotation all that stuff that you can do really really fast and natively so you can you can create those animation very very fast up until now one thing that is very very common in recently it's called SVG animation you know you might know that when you're in a website and you see these the illustration drawing themselves you see the line drawing themselves and something like that which is basically just there's a vector or a nose you know the the stroke is going through it or something like that so basically there is something that's called Lodi it's a bit technical but it's something that was developed by Airbnb that basically allows you to export animation from after-effects into code if those are vector animations and then you can use it to in a website to animate you know the illustration and that you that would to integrate that into web flow it would require a little bit of hacking it's possible but it requires a little bit of hacking and hitbox I don't know if I'm allowed to say this but it's yesterday I got an email from the guy said where's my breaking news stuff ah freaking honey I can't find it never mind just do your thing that's gonna do breaking news go ahead yeah anyway anyway yeah it's there I I already have the better of how you do this integration now natively so I'm gonna play with this next week I didn't experiment but now it's about to be super simple as well to integrate Claudie animation which is something that's really really a lot of people were excited about mm-hm yeah so that's going to be easy-peasy there was a question here Matthew that you can answer for us somebody was asking about how long it took to develop the Hamilton brewery site yeah - so we had our intern do it we had a high level designer do three days it took her three days to build from scratch like from scratch and she doesn't have any code coding background so there you go three days yeah exactly yeah wintering yeah that's right and we're gonna get more into that in the series as you'll see but it's a it's pretty interesting I mean that's how easy it is it's like you said it's very much like Photoshop so I'm just watching our designers play with this I haven't touched it myself but I watched them do it it's like oh that's it you just click click click and then things are animating things have parallax and it's beautiful it's gorgeous mmm gosh dang okay so we're coming up on an hour here on the show what kind of things do we need to hit before we end the show Matthew let's see uh I mean a lot of these are like technical web flow questions I just wanted to talk about maybe some people have concerns about the hosting on web flow yes like how do you deal with clients and I know web flows actually has thought a lot about these things and how to address them so maybe run if you want to quickly talk about hosting because I from our experience it's lightning fast yep so I love hosting with web flow but I do agree and I've had the experience as well that some clients don't want for several of reasons they might not want to host with webflow some of those reasons can be um they want to post it on their servers might be I don't know security might be they want to connect it to some kind of a back-end might be that they want to you know whatever for several reasons right and in this case in this case web flow and allows you to export the code and then you can do whatever you want with it I usually try to discourage clients from this but again at the end of the day it's the clients position it's their website and they get to make the decision so either if they need to export the export they need to set it translate the web flow website to something like WordPress that's also possible so yeah but again the the reasons why I usually try to tell me that it's a good idea that it makes future update and maintenance super super fast seamless which usually save the money you know the the content management system which is how they update the website and his like top top-notch which is what a lot of clients are frustrated it in with limits to WordPress websites yes speed wise a lot of clients are just you know they have some kind of a hosting yet whatever GoDaddy or something and web websites are hosted on Amazon top of the line with most expensive most fast whatever servers so you know it's good you know it's dependable so that's how I usually explain it yeah and I wanted to share our experience too like handing off web flow sites to clients it's been pretty fantastic to see that I think in the past when we were using WordPress sites it would take hours to train them I was like here's the backend and if you want to update this you go here and you do this drop down and you click here and it's like multiple steps to shows about that intuitive it's not that intuitive it's it's kind of wonky cuz we're always hacking it to make it look good all right use lots of plugins to make it look good versus webflow because it's like a visual designer it's very easy for them to just click on something update that type and then it's done and it's it's already published and and that's it it's it's one click for them and it's been pretty amazing to see that training process shrink down so significantly for our clients the handoff processes well we read another comment here because there's another developer in the group unfortunately the name is so hard for me to pronounce I think it's called El bit tum mo but this person is saying I'm a developer and I think it's great because I know its limitations and what can be done as an actual developer this is exactly how you use tools you don't fight it you use it and then you either create custom code or you hack it or you you push it beyond its initial conception which I think that's the way you do it mm-hmm all right what else Matthew what else do we need to talk about um I think a lot of those are the the major ones I think Ron if people want to continue learning web flow can you talk to our audience about your course because I think you have a very unique positioning for your course and maybe could you illuminate that for us right okay so basically you know I used web fold myself again from the initial early bettah of web flow and so I I started using it with relatively simple and funny things expended but I always thought you know if I could learn it myself probably everybody can learn it themselves and actually web flow themselves have an amazing amazing you know web flow University so they put up a lot of videos and still I was getting tons and tons of questions about how to do things and how to work with clients and how to take the process from start to finish to actually building it and so I think that when I built my course I was more focused on the real process that I use with clients and not just because I think that a lot of the videos that web flow are doing or very they're great technical videos they're like how to use a specific feature but what I found out that most people struggle with is how do you actually think about this and how do you go from start to finish from planning it to what are the first two how do you hand it off to a client how do you work with it how do you do the training how do you how do you explain the pros the cons how do you deal with the hosting what happens you know obviously web flow and teach you how to convert it to WordPress because it's you know against their religion which is okay I have to deal with the limitations of real-world designer that actually works with it for client work and have to deal with the limitations that you know sometimes things are not perfect sometimes you need to hack them sometimes you need to do things that way or there's there's you know a faster way to do things or a more efficient way to do things so I think that's what I tried to to achieve with the course and from from the comments and feedback that I get from my students a lot of them have seen the free videos but they just wanted to shortcut you know they wanted to to spend even a weekend and bam being able to build their own website or client website or take on a project and and we have an amazing supportive community that helps you solve problem that shares trying to work that project so it's it's it's been incredible hmm yeah okay okay I want to tell you guys a little personal story and then I think I know how to wrap up the show today okay here's the personal story my son comes in to work with me from time to time he's 12 years old and yesterday I told him go clean up the stage and at the end of the day he came home with me psyched had I'm so tired I know why I'm so tired it's like well you were up all day and you were working and I was a little bit of work he's like no dad so how long did you take to clean up the stage he said one hour so hard and I'm sweeping the floor I'm disinfecting surfaces I'm spraying for breezes I was instructed and wiping down the walls it's a lot of work for this little boy he was like it was hot in there had and I said well that's what you get for doing manual labor because prior to this time he's been thinking when he comes of age and he's able to work he's gonna go work at McDonald's cuz he thinks it's gonna be easy I said well working for your dad and cleaning up the stage is nothing compared to working for McDonald's you're gonna be over the hot burner of the probably the frying station or something like that then he's like why is everybody at the office using Webb float and can I build a website using webflow and I said yeah you can why don't you watch the torus and learn how to do it people are saying it's relatively easy to do and you could charge your friends how to do this and in fact we know people who need websites built that can probably do it for that can probably afford like fifteen hundred two thousand dollars that you can do as a kid as a twelve-year-old kid you can build a website for somebody because they need this thing done your friends need this people need this and he's like Wow so yesterday I made five dollars working for an hour sweating just grinding away at it you say I can make fifteen hundred dollars and he's like but what if I'm not that good what if I'm just not that excellent well okay that's a problem if you're not that good then you'll just suck and nobody will hire you why even ask the kind of question you have to be good so here's what I think here's what I think let's say you're a designer and you don't want to do well flow and you're just really reluctant but at least now you're gonna start selling websites as part of the services you provide you can team up with another designer who's pretty good at web flow and help you make this maybe that's a bridge or you can learn it yourself that's entirely up to you what we try to do here at the future is we try to teach people and share with them as many options and avenues as we can knowing that for some it won't work and for some it'll be like what they needed here today because they keep saying that I needed to hear this today so you're stuck if you're backed into the place and you feel like selling the Lugg was just not gonna be enough and you need to do more but you're afraid of the technology I encourage you just give it a peek take a look what I love about your community run is that you talked a lot about website and web design and how to make money doing that and managing projects and then there's our community and the two communities come together to make a beautiful child call it getting started in web design in three easy steps and I love it you gave me a really high-level overview of web design and I learned some things today and I'm an old dude and if I can learn something this is good I'm like really oh thanks everybody for saying how young I look thank you very much I love it thank you very much so we want to encourage you guys that are webflow curious for you to experiment it's okay it's okay you can dabble in it it's all okay and if you wanted to take the class you can tell like runs are really good teacher he's very passionate and he backs his up with real life real world experience he's not some kind of hack he's not some academic person who's like here's a good theory he's actually done these things and so you want to take it from him but I just want to tell you take his class but use our link user link below please use our link and that's all that's all we got man so Ron thank you very much for coming on the show do we have any last questions and give us a good body all right everybody please help me thank Ron Segal for coming on the show guys [Music]

Channel: The Futur Academy

Views: 33,434

Keywords: web design, web design process, ran segall, tel aviv, webflow tutorial, graphic design, ux design, the futur, charging for design, clarity, cutdown, disrupt design education, entrepreneur, entrepreneurship, futur brand, how to, webflow review, no code, web design basics

Id: l3Wu0uhY3b0

Length: 64min 33sec (3873 seconds)

Published: Thu Jun 27 2019