web design software python
hello everyone.this is web design for non-designers. extend a warm welcometo our speaker, tracy osborn. [applause] (tracy osborn)hello. all right, there we go. so, hi. i'm tracy. first slide, this happensevery conference i'm at. i'm actually @limedaring on tracy;just getting ahead of it this time. people think i'm lime darling,and i think that's hilarious.
and i have that twitter account,but i am lime daring. and later on i'll be tweeting outlink to the slides, and some linksthat i mention in this talk. so a little bit about me. about seven years ago,long story short, seven years agoi taught myself how to code. i launched an initial versionof this website called weddinglovely, and seven years laterit turned into a startup. i went through 500 startups.
and spoke about it a couple pycons agoif anyone was here for that, which was pretty awesome. and now i'm the developer relations -- i work in developer relationsat dreamfactory which is really awesome. this happened literallylike a month and a half ago, so this is very new to me. but this talk is really -- this whole part about design,i was a designer. i went to school at cal polysan luis obispo for graphic design.
and like i said,i taught myself how to code. and i wrote these couple bookscalled hello web app, which is like, super awesome. it came out -- really cool --so by the way, if you want to teach or learn about django web appdevelopment, these are my books. so i wrote about how to do design -- excuse me, how to do developmentfor non-developers, but then it occurred to me that thereisn't really a good resource out there designed for non-designers, and that'sreally where this talk comes from.
it's going to be my third bookand it's not written yet, but i'm using this talk as a wayto kind of figure out what's going to goin this future book. when i talk about design --the world of design is so gigantic. there's user experience designand visual design, and interaction design,and people who do ui; they have all of these specialties.it's kind of super overwhelming. when i say design,i really just wanted -- design is reallyjust making an interface,
whatever you're trying to design. by design i mean just makingan interface that works well. because, even if you're nota designer and you don't think you're going to become "a designer,"you still will probably in your lifetime have to design something like a home pagefor your project that you built. you know, something like thisor this, or node.js. you know, all of these are fairly simpleand they can be done by people who are not specifically designers. and, this is my biggest pet peevewhen it comes to design.
i'm not going to talk about thingslike the golden ratio. it drives me absolutely battywhenever it's an introduction to design, and they go over, like, "here'sa golden ratio", and i'm like, "arghhh." that does not need to bein a beginner talk. and i won't go overparts of typography, which is also my pet peeve.that shouldn't go in a beginner talk. it's super fascinating to figure outall the pieces and parts of a letter, but that's not beginning design. really this is just for anyonewho will be building a website
or building a home page for an app or building a formor building a little widget. how can you make that,whatever you're designing, look a little betterand perform a little better? so, first,let's talk about clutter. my favorite examplefor the ultimate cluttery website is of course godaddy of yore. [laughs] this is the faster wayto better looking designs.
i'm kind of goinginto the visual part first, not user experience. so just speaking about visuals, fastest way to a better designis to cut down on clutter. so to illustrate this,i made this little widget. now, not saying y'all are gonna bebuilding something like this, but it's a good example as we gothrough some design principles, apply it to this widget,and see how it improves. so the first principle we're goingto talk about is the grid.
we probably all have heardabout the grid. adding a grid to design isessentially just lining things up. pixel differencesare definitely noticed, like when somethingis two pixels off. there's always that storyabout the designer and developer that work together. designer gives the developerthe perfect mockup, and the developer implements it,and the designer's like, "ah, everything is up and downand a little bit off."
and the developer's like,"it doesn't matter, "it's only two pixels."but those little pixels -- if it's just something that's justtwo pixels off from a grid, it's one of those kind of thingsthat's unconsciously noticed, and it adds to the senseof clutter in the design. so you can implement a gridto whatever you're designing by scratch, but i recommend to take advantageof systems like bootstrap which have a grid systemalready built in. there's no sense in doing somethingcompletely from scratch
when you can use somethingthat helps you out and gives you -- that essentiallybootstraps your design. so, back to this little widget, if we just line things up, if we just take the columns of contentsand header and the form and the button, and just give themeven margins around the edges, you can see that it'salready a little bit cleaner. so the next principle is color. so to go into the overarchingcolor principles
which you read in all thesebeginner design books, they usually say, "you got to keepyour colors complementary." they don't really explainabout what that means. use mostly neutral colors;use one bright color to make things pop. there's a lot of good resources out therelike this article on smashing magazine which i'll tweet later,which really goes into color. in school, i took a whole quarteron color theory. and that's ridiculous,and i don't recommend anyone to do something like that when --
if you don't want to becomea full-fledged designer, you can just take advantageof shortcuts like colourlovers. i use colourloversfor anything i design. there is no way i'm going to builda color palette from scratch. because in colourlovers you can go in --people can submit palettes, and then other people can vote onwhether they love that palette. and then you can go in and searchby most-loved palettes of all time, and get these color paletteswhich are pretty much guaranteed to have complementary colors,and usually you can see ones
that have like a pop color. it's just a great shortcut,and you can scroll through all the color palettes on colourloversand find something that works for you. like, my website weddinglovelyis purples and pinks. colourlovers; it wasone of the palettes i found there. my books are oranges and yellows,a pop of green -- also colourlovers. so back to this little widget,which is kind of like black and kind of contrasting greens. i grabbed a color paletteand applied it to the widget,
and it's a little overly colorful, but it does work a little bitbetter than it was before. and one thing i want to point out -- it's not really going to show upin the slides -- but you, you know, the color palettesfrom colourlovers are not set in stone. the red of the buttonis a darker red than the onein the color palette in the top. so feel free to play with them,lighten things, darken things, but it's a great shortcutto give yourself,
you know,a jumpstart into building design and doing a nice-looking color palettewithout starting from scratch. next principle: fonts. so again, with the principles,people usually say, keep the number of fonts lowbecause lots of different fonts in designcan be a sign of clutter. use fancy/display fontssparingly -- excuse me. and that's -- a good exampleof all those fonts are the ultimate exampleof clutter --
are these display fonts i usedin the background here. so clean fonts also reducethe feeling of clutter in designs. and then if you want to addmore differentiation in your designs, when it comes to typography,you can then explore with italics, and bolding, and transforms --like making something uppercase -- to differentiate stuff. but as a shortcut,this is also what i use. because you can go to google fontsand try to pick out your fonts and get completely overwhelmedby the hundreds of fonts
scrolling through, and it's really,i don't know, completely overwhelming. so there's resources out therelike beautiful web type where people choose --well, they pick out the really beautifulgoogle fonts that are out there, google web fonts that are free to use,and they display them in this website so you can see how they lookon a real website. there's other sites like typewolf,which again, you know, curated collectionof the 30 best google fonts. so this is a great way to -- if you'rechoosing a font for your design
and you get overwhelmed by how manydifferent types of fonts are out there, just go find these resourceswhere people chose their favorites, and you can see it kind of narrowschoice, makes it easier to choose, and it's easier to find somethingthat you think looks professional. so, back to the widget. and then we added --this is two different fonts. it's a serif font and sans serif font. essentially means, serif fonthas little flanges on all the letters. but just two different fonts,and there's differentiation in here.
like there's italicson the headline, the form, the button has uppercase,it's a little spaced out. but it's only two different fontsand they work really well together. so the little widget hereis looking a little cleaner. last but not least: white space. white space is the ultimateclutter reducer. i always laugh at, like,hacker news, because -- i mean, i read it all the time,but it's a pretty cluttery design. all this text all smashed upagainst each other.
and a lot of designersalso feel the same way. so fairly often there'll bea hacker news post saying, "i redesigned hacker news." and it's something like this,or like this, and all of themare always more white space. it's like designerslook at hacker news and like, "oh my god,it needs white space." the white spacecan really help a design even if you havea super cluttery design
that has to stay cluttered,like a newspaper homepage. so the before is on the leftand the after is on the right. one further thing that new york times didwas that they reduced clutter by reducing the numberof colors on the site. so, instead of the headlinesbeing blue, they're black. but one of the biggest things they didto make their homepage look less cluttery was just to simply add more spacein between the columns of text. and just like,adding just a tiny bit more space allows the design to breathe more,
just look a little bit more open,a little less cluttery, even though they still have a ton of textand a lot of items on their homepage. and white space is definitelya huge trend right now. i went on to one of thesedesign collection sites and i took a random screenshot, and at every single one of theseis acres of white space. it's not saying you have to dosomething like this, but it's kind of handy that it'sthe current web design trend going on right now, too.
but it's not just a good thing to do just for like, you know --make it look nicer. it can drastically affectyour conversion rates as well. so in this example, the two tables --there's the links underneath the orange buttonsthat you can see in the left one. that was taken out, which addeda little more white space in between these two tables. and because the person did thatand they did a test, saw a 20% improvement in engagement,5% boost in products added to the cart,
and a 33% improvement in customerscontinuing through their purchase. so white spacenot only just looks nicer, it does affect how much moneyyour site can make and your conversion rates overall. back to the little widget,and we just add some more white space. the things i did here: i addedsome more space around the edges, kind of beefed up the marginsaround the edge. i also normalized the spacingin between the elements, so between the headlineand the content,
content and the form,form and the button. i also addeda little bit more white space in the form of line heightin between the lines of text in the contentso it doesn't smush all together. and the headline also hasa little bit more space added as well. so when it comes to clutter,and it comes to visual design, the things to remember is justto reduce visual clutter by keeping the numberof fonts and colors low, adding white space,and lining things up.
aiming for a clean design,which, again, is one of those big trendsgoing on right now, is one of the fastest waysand easiest ways to have a less clutteryand more professional looking design. but we can't talkabout design without, like -- we can talk about how the design looks,but really the most important thing about design is how it works. so whenever you're designingsomething, try to figure out what the most important action ison your design,
and try to make that actionor whatever the person on your design needs to do,make it easy for them to do it. this is why buttons ctas,button call-to-actions are usually a brighter colorso they can stand out, and so someone doesn't losethe button; catches the eye. someone knows that this isthe primary action of this form. so for the website that i builtfor hello web app, i had a little bitof a design challenge on the homepagewhere i had two buttons.
but the main one that i want peopleto look at and see and hopefully click is the "get the books" button,which is why it's bright green. now if you go to other websites,this website is a very subdued color palette,it's very dark gray and blues, but the action buttonis bright blue in the middle. it doesn't just have to be a homepageand a button on a homepage. the wealthfront engineering blog --you can argue that the reason why they have this blog is to attractengineers to join their company. so as they write about engineering,hopefully someone comes to their website,
goes, "hey, these people are pretty cool,"and then the sidebar, it says, "hey, interested in what you haveto see here? apply for a job." and that's the reason whythat widget is bright green, so it doesn't get lostand it's eye-catching. so essentially,pay attention to your goals. there's so much more i can sayabout user experience. but the main thing isjust to pay attention to your goals. make sure that whatever actionyou want your users to take, make sure it's easy for them take it.
i don't really gointo usability testing here, but a great way to testthe experience of your website is just simply to sit down with someoneand have them run through it. it's kind of hard to do thatbecause then the person can find some things that are wrong,and then nitpick, criticize your design. but if you can remember that it'sfor the good of the design, the good of what you're designing,making sure someone else looks at your design,tests it out, it's a great way to runa quick usability test,
and make sure your goalsand what your actions you want your users to do -- that those actionsare easy to find and use. so, to go back into cluttera little bit, i want to talka little bit about content. so when it comes to runningcontent for websites, a lot of people tendto write way too much. now, you've seen the "about" pageon someone's website where they're telling youtheir entire life story
and, like, paragraphsand paragraphs and paragraphs. no one reads that; maybe someonewill read it, maybe their mom. but usually people on the internet,they really skim. and big paragraphs on a websiteor a landing page are a sign of clutter. they're kind of intimidating. so, when it comes to content,less really is more. big paragraphs are a sign of clutter,and break into bullets if you can. try to shorten your sentences,make smaller paragraphs. if you can't do that,one of the easiest ways
to break something outis to break into bullets like this. so on the left, it's kind ofa big paragraph, it's hard to read. and just by adding some bullets, makes it a little easier to jumpbetween the important sections, because those bullets give the eyea bit of a landing place. but we can increase the readabilityof this by adding some bolding. so when someone sees this paragraphof content, they can read -- very quickly see the bolded sections,and the bolded sections highlight the most important partof that paragraph.
if someone is skimming -- makes it easy for themto see what's there and if they see something they'reinterested in reading further, then they can stop skimmingand read the paragraph in full. but, like i said, white spaceis the ultimate clutter reducer, and this is a great place to addmore white space if you can, by adding a little bit of spacein between those bullets. makes it super skimmable. so, i love read the docs.
i just spoke at write the docs;eric holscher is a friend of mine. and i was prepping for this talk, and i was thinking aboutultimate clickable ctas, and i was looking at this like,"everything is gray." so the button on the homepage is, on hover, bright green. so whenever you have a website,and this is what i would recommend to him if he asked my opinion,which he hasn't yet. i'm just talking about it on stage.
[laughter] i would say, "hey, this is somethingthat would be really easy to test here, "to see if more people search the docsif that button was a brighter color." but we can test other things,because i just talked about content. and that contentis really quite lovely. you know, "what is this place,"that paragraph of content. this is not as pretty,but if it was broken up, i would arguethat this is worth testing. by breaking up that content,the paragraph of text, into bullets,
adding some bolding to, again, highlightthe important parts of the sentences. i also -- that headline saying"what is this place?" i answer that questionright at the top so that people -- you know, a little bit quickerto see the important information. so again, not as pretty, but this issomething when it was like usability -- you lack something,like little improvements to this web pagethat i would recommend. but we can't just talk about contentwithout talking about headlines. so when it comes to headlines,it's often really tempting
to write headlinesand introductions to web pages as whatever you're designing for,what is it doing, but it is importantto remember that it's -- you should be writingfor your reader in mind. i think, whatever you're designing, what benefits you'll be givingto that reader. and also of course, keep it shortand use natural, friendly language because you don't want to talklike a machine; you want to talk like a human.
so for example, this istechnically what my book is about. it is an introduction to buildingweb apps using python and django. but this is what the homepage says:it's "learn how to build a web app." it's a lot easier for readersand for people coming to my website to see how this website,how my books might benefit them. now you can argue that i couldprobably update this and test it, but this is lightyears ahead of that. and changes like thisalso can improve your bottom line. this article goes overhow a simple headline change
improves conversions by 52.8%,and all they did was took their headline and talked more about the benefitsto the reader rather than the details of what something did. so we're not done with the widget. you notice that the headline here --"download my book on learning "how to program django" --that's kind of like, "ehh." what if we updated that to say,"hey, learn how to make web apps"? the button at the bottom,as well as the form -- i also -- everything i updated,the content too.
the content is shorter. the field, instead of just"email address" -- a little more human by saying,"add your email here". the button is a little more actionable;"download" is still an action verb, but "send me free info" kind of givesa little bit more information to the person looking at this widget.they're like, "ooh, free." so during this,we've gone from this widget, to this, by applyingsmall, little changes. principles, applying it here.
you can kind of see how this can makea cleaner, more usable design. quick sidenote about images and imagerybecause we've been really only talking about text and color and whatnot. in terms of some image principles,some guidelines, you can accomplish a lotwith just type and screenshots, which is whyearlier versions of this talk, i actually didn't talk about images. stock photos, there's a lotof stock photo websites out there, and a lot of them look like stock photoswhere the person's like:
[poses] someone coming to your website --and you want to have a photo of someone on there,they can immediately see it's a stock photo,and it's kind of like, "ehh." and then photos are also hardbecause you have to pay attention to the file size. on my website for my book,i had that gigantic image, and that was somethingi had to optimize a lot to make sure my websitewasn't horrifically hard to download.
little, little like design updatescan really make a homepage sing. these little icons hereon the stripes website are really quite lovely. so, designers are gonna yell at me. if you're looking forcustom icons for your site, i am totally okaywith anyone going to fiverr or crowdspring and just seeingif there's a designer out there, for not a lot of money,can build something for you. because i totally understandbuilding websites,
not having a lot of moneyto hire a professional designer, and i think thisis a great way to get imagery -- custom imagery for your site,without paying a lot of money. there's a lot of free resourcesout there that are really great too. so if you really want a giant banner -- this is actually unsplash.com;the name of it kind of got lost there. but unsplash has really lovely,big images that are free to use and download. there's also photopin which allows youto search for creative commons imagery.
and little designs, even if you can workwith a local designer or an illustrator. this is my friend's website.he worked with an illustrator to build these adorable illustrationson their homepage, which kind of takes their homepage,makes it look a little more special than just, you know,screenshot and text. so one thing i want to emphasizethat if you're designing, you don't have to be original. one of the things i tell peopleis that if you're sitting down to do this design and you startwith a blank piece of paper,
and you start from scratch,it's a lot like trying to program without the use of stack overflow;it's near impossible. i use inspiration -- i don't copy,but i'm heavily inspired by so many different sourcesfor anything i design. so, "a book apart"heavily inspired my books. and there's a lot of sites out thereyou can use to pull in inspiration. just find things --find sites that inspire you or things that you want to emulate,and use them in your own designs. so this is siteinspire,and unmatched style, and cssmania.
there are so many different websitesout there to just showcase good design. so when you find a design you like,you can kind of pick out the things you think are working welland that's something that's going to help youtrain your design eye. so for slack's homepage here -- i mean kind of just figure out,okay, why does this look so nice? one of things they're doing is addingthose little squiggles in their headline. that's something you don't really see,so that kind of stands out. they have lots of white space.
their form has a darker backgroundwhich catches the eye and they have that bright green"create a team" link. they have their text,they have bolding, strategic boldingfor the important parts. there's lots of thingsyou can go through and figure outwhat slack is doing well, and as you find thingsyou think are working well, try to figure out what is working well,and that'll help train your design eye. because, it is totally okay --
picasso says, "good artists copy,great artists steal." banksy comes along, says, "bad artistsimitate, great artists steal." there's full-on books abouthow you can steal like an artist. like, this is a thing:all of the artists, we just, like,get inspired by others. so don't try to design from scratch;find things that inspire you. last but not least, i want to givea quick overview of a design process just to show how i work. so if you're sitting downand get an assignment
or you want to build a homepage,first thing you have to do is go out, find the inspiration,and sketch your ideas. and this is my actual feedly reader where i can just go throughthese top design websites, scroll through until i find thingsi think will be relevant, and i can save themand pick out everything i like. i usually sketch them, and fyi,my sketches don't look like this. this person is totally showing off. like, it bothers meto see sketches like this;
i'm like,"that's not how it usually looks." my sketches are justsquiggles and boxes. it's just a way for meto remember important parts. things that i likeor lay out ideas i like. these are the sketchesfor that hello web app homepage. and then next thing,in terms of mocking it up, you can go straight to htmlif you're building something, but mockup stage is a really great wayto see something as it might look and have the ability really quickly,the ability to move things around.
so this is one ofmy husband's projects. this is not a pixel-perfect mockup; this was just an ideaof what the content should look like. decided that, instead of a paragraph,again, to use bullets. it allowed us to figure out,okay, we'll have a big form, we'll have the formjust going down this column, we'll have these two links. you can use a lot of different --you don't have to make something that looks like a full-on website.
just mock up whereyour content is going to go. sometimes i do do full-ondesigny mockups, but really it's kind of likejust doing a wireframe is good enough just so you can see your contentand see how people will use your website,or whatever you're designing. and there's a lot of differenceservices out there like balsamiq for wireframesthat are really great. you can use anything;you can use gimp, illustrator, sketch, balsamiq, anything,whatever system works for you.
create your boxesand lines and text. makes it a little bit easierthan just jumping straight into html. makes it easierto move things around. and then build it, of course,which is a whole other presentation. my thought process every timei sit down to design is this. every single time. i feel like every time i sit downand i start sketching, it's just, like,this awful, awful experience, like, "oh my god,i'm a terrible designer."
and i assure youthat if you sit down and design and this is your thought process,this does not mean you're a bad designer;it simply means you are a designer. so this is only the starting point. when you're working on buildingwhatever you need to build, remember to reduce visual clutter. you can do that by keepingthe number of fonts and colors low, adding white space,lining things up, making sure your contentis short and easy to skim.
make sure that your goalis easy to find and use. keep your content simple,friendly, and to the point. and definitely practice,practice, practice. because the more you work on design,the more things that you design, the easier it will get. so like i said,i'm doing a book on this. hellowebapp.com/web-designwill get to a form that is -- i'll send only informationabout this book, hopefully when it comes out,when i start writing it.
otherwise, thank you very much.
Tidak ada komentar:
Posting Komentar