Hello Web App Workshop

0 0

like you said I'm Tracy I'm lime daring on Twitter common mistake people say lime darling I'm not lying darling I'm like very happens every time so I put it in front so first off a little bit about me and my journey um some of you might know me I spoken at previous dingo cons about the process of teaching myself how to code and this is the sites that I ran I was running for about seven years and long story short I was a designer with no programming experience and wanted to build a startup I ended up learning a little bit of Django launched this little website this little website suddenly started coming like larger not a Cecily big big but larger than before I turn into a startup and it's been one of the most fulfilling things I've ever done in my life like learning how to code learning how to to do Django it's been wonderful over that process of teaching myself how to code while building this website I started thinking like why like I'll figure something out and I'll be like why was it taught that way when it could have been taught this way especially as a designer that's where the book series come about came about so I built hello web app to teach programming or what about developmental ease to non programmers designers like my books a lot I designed them I self-published them the dingo community in the Python community has been so wonderful my second book last year's junior con I was a fundraising Kickstarter for my second book everyone's an awesome so thank you everyone and Django for supporting me in this journey but as I've been working on these books teaching programming say to designers I've also been thinking about ways that I could teach design programmers because that's my background I have an 80 degree in art and I did graphic design and I worked so I designed her for a long time and the same thing I started looking at program excuse me tutorials teaching design through programmers and same thing as before I was like well I was a taught why is it taught this way when I clearly think it should be taught a different way why how do we how can I teach designed to people who have a programming background makes course since and then say hey some of these other tutorials exist so by design I don't mean this is crazy design the world of design just like programming the wrong design there are so many different fields within design UI design you access eye and visual design I simply mean design in that you helping you make an interface that works well is at some point in your career as a you know when you're programming or building open-source projects you'll probably at some point need to create something that other people use you know at homepage for your open source project so I want to be here to help you feel more comfortable jumping in and doing design I know a lot of people say oh I need to go find a designer help me if I project but that was like me when I was learning how to program I was like oh I need to go find a co-founder for my project I want to help you just be more comfortable work on design your own and some of the things that really give me pet peeves or not going to talk about here in this talk not gonna talk to goal the ratio that is I don't know why keeps showing up in beginner design Tharks not gonna talk about the pieces and parts of typography I know there's a typography caught I think tomorrow and I'll be awesome I'm gonna bypass that for now I just want to talk to you about creating better more effective designs so first and foremost let's just talk about the visual stuff and the number one thing to remember if you're becoming a designer or excuse me not becoming a designer but wanna do design is to simply cut down on clutter for example great example of the most like crazy cluttery website the fastest way to a better design is to cut down on clutter so for example I built this little widget and you know it's okay and we're going to make some design principles apply it to this widget and see how things slowly improve this little widget I built and make it a better design so first the grin you might already know about the grid because grids show up in things like bootstrap just think of the grid like adding a grade to something as simply lining things up because pixel differences are noticed like when something is like a little bit offset from something else those pixel differences can add to a sense of clutter so instead of thinking you're like working on a design project like oh my gosh I need to line everything up like I love shortcuts and when I again pet peeves this when people say don't use bootstrap everyone's using bootstrap use bootstrap seriously like it has all these shortcuts oh it's gonna make your life so much easier because it has a grid system built in I love these shortcuts I love like trying to use things I used to extract all of my stuff use things that like bootstrap you uh whose Drecker design make it better so to see lining things up in action add this a little widget and we just simply set up columns on the left and right side lining things up and you can already see that's looking a little bit cleaner it's a next up color again big overarching principles color principles keep your color is complimentary making them work kind of well each other get into a second what that means but a good rule of thumb is to use mostly neutrals and use a bright color to help things stand out now there's so much to say about color and this article on Smashing Magazine is a particularly good one what simple why developers guide to color like when I went to school is a whole quarter simply on color and it's kind of ridiculous there's so much to learn and understand in terms of like commentary color is etc and so forth can't do that here but I love again shortcuts so this is my favorite shortcut and I use this for everything I use this I use this for the color palette for my books for hello web I use this for the color palette for wedding lovely go to color lovers calm with it you I just moved to Canada so I'm like yeah use Kota loves a calm you can search for color palettes and other people have submitted and then people can vote on them so if you search by you know top most loves of all time you can find color palettes that are guaranteed to be complimentary to have a large range of colors you can scroll through here and find something that you think might work with your project and try it out rather than say starting from scratch so back this little widget say when the color lovers started pulling in some color palettes and applying it to this widget and just testing things out and sometimes they might not work if you try a bunch of different color palettes until something does but it's so much better than trying to like jump into some color program and like on that little palette and trying to pick and choose what works might as well just go to the place where you can find colors that already work well together well with each other and use those instead and Oh quick note about this one and you don't don't feel like scared to like update the color slightly the download button on here can't really tell the screen but the darker red that the one that's in the comic palettes you can still play around but this gives you a really good shortcut next up fonts again principles keep the number of fonts low it's just in terms of clutter it is the more different types of fonts out there adds this feeling of clutter so two different fonts is a good rule of thumb try to use this place fonts very sparingly if I display fonts I mean everything that's in the back here some things I feel very 90s those are also very cluttering so try to avoid using them and if you need to add more differentiation whatever you're designing you can add holding you can make things uppercase add italics you can use that tie differentiation rather than tapering in another another fun so again shortcuts love shortcuts so say google fonts i love google fonts they use it for everything as well but if you go on there there's like 200 something monsignor scrolling through and it's really overwhelming it's much easier to go to these websites like you website or type wolf which curate the best google fonts so instead of going through a list they'll say 200 fonts you can go into one of these sites and just have 20 to choose from and you're guaranteed to be working with a well-designed well of fun so back to the widget and you can update the font this is using a serif font and a sans serif font serif fonts just means a little widget on the end there's a type and probably you can learn more about that in a typography class I'd talk tomorrow essentially this is tutor for fonts and we did some differentiation the download button is all caps the input formats lower case we have some italics in there but it's looking a little bit cleaner and well put together last principle is white space white space is the ultimate clutter reducer I always laughed cousin hacker news we all know and love every mm three to six months there's always something that pops on Hacker News say hey everyone I'm a designer and I redesigned hacker news and every single time the main thing they do is just add whitespace no one thinks that well how can you use a super squashed I particularly like this one a little easier to read the white space isn't just like a person feeling like hey I want to make this all she's jumping ahead one more example as the New York Times redesign the New York Times as a as a newspaper has a lot information you can't just like blow it up with white space but this example left is before and right is after the right is a little bit less cluttered feeling and the main one of the main things I did to make it feel less cluttered it simply opened up the columns in between the text a little bit more give it just a little bit more breathing room made a big impact the white space is kind of a huge trend right now which is a little funny because if you go on to these like top design website sites I took a random screen shot and every single one of them has like acres of white space there's a huge trends and might go a little bit too far but not just a trend adding whitespace can also improve your conversion rate so in this example between these two tables the left table it just got moved a little bit farther down a little bit more white space was added in between the two tables and by doing this they saw a 20% improvement engagement 5% boosting products added to cart and a 33% and preventing customers continuing on through purchase so reducing clutter and using white space can affect your bottom line so back to a little bit we just let it breathe a little bit more and it's a space around the edges also normalize the spacing in between the blocks between the butt and the forum for content added some more line height between the paragraphs of contents so the headline and the content you can see units re looking pretty good at least a lot better than we were before so in terms of visual design the best thing you can do is just if simply think about how you can reduce clutter in your design and if your reduce clutter by keeping the number of fonts and colors low adding whitespace and lining things up like clean designs are really in right now and just aim for a clean design you'll get pretty far but you can't just talk about design without talking about user experience this is arguably more important not as arguably I leave it well hardly um how stuff works whatever you design how it works is better is more important than how it looks and whenever you're designing something just keep this in mind keep in keep in mind what's the most important action what do you want your users to do with your design and then focus on making that action easy to find and use I mean that's for example just a short little example that's the reason why widgets and forums won't not have a brighter color for the button does he want to have that button to be easy easy to see use and click I use that on homepage for hello web app and that's why I get the books the most important part of my design is a bright green but also another websites you know this one has a pretty grey Drive background but it has a bright blue button but not just for landing pages you can see this in work and other page other websites like wealthfront engineering blog you can argue that they have this blog specifically so they can bring in more engineers their company because they talk about engineering topics I think probably hope something comes over reads those interesting engineering topics and think hey this place looks like a good place to work and then bright green on the right they have a bright green blue hey do I work here button so you can say also again so much about user experience just keep that in mind I make sure that your goals are ease into finding views make sure you have analytics make sure you're looking at how well your design is working if you launched a forum or a website or whatnot pay attention to say like figure out a success metric if it's someone moving on to the next page we're submitting a form and see what you can do over time to make that better next up content this is a huge part about Web Design and a lot of people forget about this I see a lot of people who launch their website and they want to tell the SA of their life on the about page but the thing is they like large paragraphs of content or a sign of clutter no one like you there's people who read on the web but it's actually people are more likely to be scanning through your article or whatever your content looking for words and if they see giant paragraphs of content they're more likely to leave than read so when it comes right so in general it comes at content less is more I try to cut down simplify break down your words I think it's like good principles like two to three sentences per paragraph big paragraphs are a sign of clutter and if you can't simplify your content try to break into bullets this is a tactic I like to use a lot my content so on the left this paragraph of content is arguably kind of hard to use you can read it by going line by line but you can improve the readability but break Hansa bullets and then you have a visual point to skip between as someone again assuming someone's scanning and there probably are they can jump between they individual points in that paragraph but we can improve readability by adding some bolding so now we've like not only broke it up into points we added bolding over around the most important parts of of those paragraphs so again that person who is scanning can read the bullet parts and then see whether they want to read further and then we also just talked about whitespace you can further improve readability by adding some white space all right so read the docs um I want to give a real-life example of something that I would test updating I love to look at designs and see you know if I was on this or Eric Holder came to me and said hey Tracey what do you think us homepage I don't think you will me knows I do this I quote it what would you test what would you try to change and see if this increase conversion rate so I talked about making sure that you have an action and making sure that action is easy to find and use and this website is home page it's very gray I noticed that there is a hover state over whoo let's do this button that's bright cream so that is something that I would test I would test giving the eye some place to jump to just and that basically says like hey personal business homepage this is the most important part of this page now you could you know try making the signup button bright green or something but giving the eye like a path having those things easy to find and use if someone a path of what to like look at first let me just start talking about content and that content is this homepage is very beautiful and that content looks very nice at it far away but I was wondering you know how many people actually do read this and I would also test breaking that up into bullets so this is arguably not as pretty as a that block of paragraph from before but this is something that would test and see if taking the paragraph breaking the bullets making easier people to read those features that I want to read the box home page I'd be something I'll try and see about updating but I don't want to stop at just content I want to talk a little bit about headlines as well headlines are very important and whatever you're designing say a blog posts or a home page for a landing page from what time a thing of its hop in general it's better to talk benefits not details I'll give an example in that in a second just like content though make sure your headlines are not too long and then try to use natural and friendly language talk like a human not robot that goes in the content in general so this is technically what my books are about my books are an introduction to building web apps and Python using web building web apps using Python and Django but this is boring I mean it's very descriptive it says exactly what my books are about but this makes more sense to a reader something coming to my website this gal some exactly what the benefit is if they read my books and again this is not just like personal feeling like hey this would be great to do this headline changes the thing if someone sees first your website updating it to be more about benefits rather than details can improve your conversion rate and this one is simply they set up the æther headline and then improve their conversions by 52% so we're not done with the widget now you might notice that the headline is kind of boring the content is kind of long for just a small little widget we can simplify it make it easier make it more human you know shorten the headline make it more about benefits shorten the content add some bolding an important part of that sentence I changed the input form so it's more human instead of saying email address says add your email here and then the button changes with just a simple download there's something again a little bit more like you're talking someone say we free info so in this journey we have gone from here to here so you can see how small little changes through the principles can all work together to make something look nicer and easier to use alright quick note about images and imagery when I first gave this pocket and had a section and this is one things that people usually ask me most about in general it's nice to add images to your website you can do so much with just text and say a screenshot and boxes and lines you don't necessarily have to have images and using a stock photo or someone just like people can pick that out immediately and generally pay attention to file size that's where also images can screw it up and making sure you have retina quality images is also something I usually forget myself as I have an old MacBook Air but you know like images can improve how delightful per se a website to be so in this example is just right and I really like there are little icons and it and those little icons they do help out and if you you know I want to not go say that you don't need images but they can help out and you know these ones are pretty simple and I'll get into where you can find them and it's just a second if you want like a big image in the background there's not a little bit of stock photo unsplash.com is my favorite they say they upload beautiful kind of hipstery images but they're really beautiful and they say do whatever do with what you want with them and they're just beautiful really big really awesome images photo pin is another resource I use for blocking that searches for Creative Commons images in Flickr and brings them up for you can use and then this is where I get yelled at by my designers if you want icons like the one on stripe and you are launching your first project you don't have a lot of budget I think it's totally okay to use something like Fiverr and get something cheap and fast now as a designer like once you have budget and you have the ability to do so a professionally designed logo image icons will be way better than ink you can get on these these nights or you can pay very little to have to get images done really quickly for you but if you're just starting out I think this is a great start and Meo again another example of how images can help out my friends of mine do app Canary and they're in Toronto and they worked with a local designer again pretty cheap to just create these little illustrations for their website and this is a sleeve work there again what local designer made something and they turned their website from just simply you know text images on the screenshot this adds a little bit more delights their home page so don't forget those local designers you can work with - they're probably not as expensive si a big professional all right a little bit about philosophy if you are sitting down and working on a design project and you sweep your desk away and you pull out your piece of paper and your pen and you're just gonna start sketching something starting from scratch with nothing to inspire you nothing just just sitting down and trying to pull it up your brain is a lot like trying to program something without the use of Google or Stack Overflow this doesn't happen this is like it's giving yourself like a big shot that's fine like you're you're hindering yourself my books would not be I mean I'm not gonna say like they're the best design in the whole world I'm pretty proud of them though and I could not have made the design I did without the inspiration of a book of Freud's books I was able to look at them and see what they did and get inspired and that influenced my design I didn't steal anything but being influenced is not only good for you it's encouraged so if you're working on a design project again building a form which etc there's a lot of websites out there that showcase good design that he'd go to and just look through and see you can find things that inspire you and give you ideas they're a site inspire style.css mania there's so many these websites out there that just liked a good design and whenever you find a design that you particularly like try to pick out the things are doing well so for example this slack homepage you know lots of white space the forum has a dark background the button is bright green if he's a clickable that has some bolding and a Content default does information those important bits so when you find a design that's working well or even look at your competitors site picking out the things they think is working well is gonna help train your design eye and make it easier for you well you do better designs on your own and it's just kind of funny because it's totally a meme then design and then efan ski comes along and steals it there's books on this like seriously designers don't do a thing from scratch we all work off each other last bit I want to do some reassurance and tell you how my process usually go so sitting down working on a new design project first thing to do is collect inspiration like I just said and this is my fili and I just go through and I have all these sites all collecting into one folder so I can very quickly go through good designs and get inspired and pick out the things I like and want to implement in my own design now when it comes to sketching though this is this person is showing off like if you were like trying to sketch and keep ideas down don't feel like you have to think something like this this is actually the sketches I did for the helloweb homepage again like just really quick boxes lines etc just helping me remember layouts and ideas that I had so don't feel like you have to be in a most amazing sketch or just do it as much as you can to get your ideas down and then the second thing I want to say is that you can i particularly like mock-ups because it's easy to change and try different ideas your mock-ups don't have to be pixel perfect they don't have to be beautiful like this is a lay I did for my husband for an idea he had and all we did was trying to figure out with you know this is not gonna be like my white it's not gonna use those colors that allowed us to figure out a layout and things around and see essentially how the way it loves website would be used all the mock-ups can be cut to look like this and then build it but that's a hold on so again reinsurance every time this is seriously every single time I work on design I'm fresh whole graph designer I have a graphic design degree this is what happens I feel like like the ultimate impostor syndrome I feel like such a horrible designer every single time I start from scratch and if you are sitting down and you're working on your yet we're gonna design project you're going I'm such a bad designer I'm such a beginner you're not a designer everyone goes through this it doesn't think means that you are a designer kind of pressing I'm sorry but hopefully I reshares some - this is only a starting point there's so much to be said that I only do in a short period of time remember to view even you're working on something visually focus on clutter and reduce visual clutter and you can do that by keeping the number colors and font flow adding whitespace lining things up and keeping your content short easy to skim make sure that your goal whatever you're designing whatever your you want your action to be make sure that you're focusing on making it easy I'm easy to find and use keep your content short simple and to the point and practice practice practice this will be the topic of a third book hopefully and if you want to be on a dedicated mailing list just about book that's helloweb opcom slash web design and the rest I really hope this helps you out thank you hey Tracy thanks for the wonderful talk hey my question is like all of these separate topics make sense on their own but what happens to me very often is okay I create us some kind of design and then I see it doesn't look good but it's just overwhelming I don't know where to start like is it the font is it the colors is it the spacing do you have any advice on that like how to approach when you see it's like something's not working but you have no idea what what it is one thing I really like to do with design is that I mean design would necessary design is very qualitative and so it's really hard to pick out what's working what's not so try to make it as quantitate as possible so look at your design try to hook it up to analytics and see how people are actually using it and see if then you can start picking out maybe some things that change maybe one page is working to another and you can look at what's different but then you can also change a headline or and see if that affects how people use it by tying changes you make or decisions you make to analytics and data it can help a lot that's number one and that kind of relies on having something about traffic which is hard number two I don't really talk about usability testing here but simply this is so hard fast someone for feedback and see what other people say um but I do this in programming I get in this bubble and it's really hard to like figure out what's working with not and just like bring you to someone else and seeing the face maybe they think it's fine maybe it's just you maybe because I do that oh my god it's horrible it sounds like what are you talking about or they start pointing out what they say what they think you have to be careful because someone people can be sooo nice they're like oh it's fine or they could be like everything is horrible not giving a good feedback but just simply by having someone look who knows the science can help you you know get more information which is important then just kind of like going I don't know what's going on it's very overwhelming hope that helps Thanks who's this sorry I what are some differences if any between desktop web sites and mobile sites ah that's another differences between desktop and mobile why I like bootstrap like seriously I keep I saw at something like someone wrote an article saying how horrible bootstrap is but like which track is your grid and bootstrap gives you the ability to do responsive design which is awesome because a responsive design making sure your website works in browser is really important RC being that global in terms of differences uh I mean that's all gonna pin it on the website and what information sorry noise this information is there and it's very long talk I guess I want to say yeah I mean just like a make sure you have a mobile site be again and look at analytics make sure like if your website is performing so like at one point and you look at like Google Analytics and looking at mobile and like it's way worse that could be a good indicator that something is wrong and I you should update something in general mobile sites have to be a simpler unless elements because you're smaller um but there's also a lot of good books I think there's a whole mobile design book that's on by a public apart that's really good yeah well well sites very important yeah thanks I'm gonna use a four-letter word here menu yeah what's your thoughts on menu design in terms of top left side right side number of levels of indentation etc there's lots of a placing for the menu and for anyone who is say might think themselves that they are new to design I say follow the rules don't break them so see what other websites competitors or other websites you want emulate see what they're doing and I said follow that format don't create a new format I think usually I mean all depends on the menu how many levels are there but if what you're designing seems like it really works well with a top-level menu and that's what's people in your space generally are doing I say go with it don't try to do something new or revolutionary at least in the beginning so you always update it later yeah that's hopefully I helped yeah thank you I'm also new EX designer and it's great that you pointed out all the basics I'm gonna be really interested about clients from hell yeah code you will do deal with that in your process there's a how do the clients inhale there was a reason why I don't do freelance design anymore I'm just like can't handle it generally when it comes to clients uh in general this is going to a really general as communication is super important and that's usually where a lot of client problems happen either working with someone else and that's actually not just clients but say co-workers as well like they can make your life hell because they're not explaining what they need and then you also aren't doing a good explanation of why things are better or wife and decisions may be booted you were jumping into a freelance design I don't have a lot of feedback because I just left that world because I didn't I was working with one person and they very much insisted on a design which was gonna be terrible and they kept like making hands of themselves and eventually I just checked out and they never launched it thank goodness but it was a very frustrating process now I was like you know I'm gonna build a website for myself instead so I have a lot of good feedback on that but in general I find that a lot of people are missing a communication and that's why I would probably work on first if I had a client that's causing problems just try to be really really clear about the benefits and try to win them over in my side so the way that I learned most programming related stuff is go find a good tutorial and go through that and then after that just kind of read the docs yeah so until your book comes out have you have you found any things like that where it's kind of a guided here's a concept you try it now here's the next concept now you try it like a way to kind of practice coming in with kind of no design formal design is why I'm writing the best I mean there's a lot of summer articles out there that my kid my big thing about design with waste hot and it's same thing programmers is that designer is a teaching design as if they at the same level that they are and I feel like that's okay also programming that you don't teach best practices you have to teach the shortcuts and I don't see that a lot in the design world because this designer is teaching best practices to design stuff especially my good singing like that web developers has guide the color um they haven't other articles on there they do a lot so I think there's some they're not great but they have a lot of good things too a lot of good writing on on web design in general and then book apart I've seen it listen apart has lots of great very high-level articles the same people who do a book apart they're good to read to understand what their people are doing those ones are a little advancements a one more question that are you thanks Percy what's your thought on mobile first design as opposed to let's go with a go to a desk up for my website and then figure out how to break that down for robot yeah and so MOA first design now such the title of the book apart book just really excellent I am stuck in my old ways and I always do desktop first and I'm not saying that's a great thing it just works best with me uh the way mobile first when you're designing for small screens the reason why it's so great is that you were working at less information you have less space you have let's face it fool around you have to be more concise and that applies to all these principles he did for big design so if you start small and have to create your stuff from scratch on a small screen that could make your larger screen when you move it over like cleaner and easier to read and one on oh so that's where mobile first can help out a lot I encourage people to try it out and see if that works for them because it all depends on versus process I'm an old fuddy-duddy that like the new world of responsive design still throws me off I keep doing that's not first alright thank you so much Tracy