Let’s Redesign Web Design

I check check can you guys hear me immense so fair warning this is the first time I’ve ever done a talk so I’m incredibly nervous and I listen there’s a an exception for first-time speakers where you can’t heckle me so I’m gonna have to kind of invoke that liberty at least this time and today I want to kind of dive into a little bit of the history of programming a little bit of history of entanglement blueprint and hopefully get some suggestions out there to get you guys thinking about how we can think of the true future of web design not a year out from now or a pair months from now but maybe ten twenty years from now and I want to start by just telling you the story of two different decorators and you know they’re designers because they’re wearing you know trendy glass and these two so Sergey and Matthew are both designers by exercise they don’t code they can try mean they don’t read system they can and both of them had a very similar idea Sergey had his five years ago and Matthew had his 1 year ago and what happened with Sergey is that he he spent a lot of season doing missions and he would examine beings kind of in pain and met that he could do something to to ease that suffering and his idea was why don’t we kind of organize this this crowd-sourced way for other people to pitch in on other people’s ideas and and sort of crowdfund a direction to get people out of poverty to set up certain groups with you are familiar with some equipment it mostly do good work in the world so he had a bunch of schemes made this helped rioting brand generated this land sheet actually got it out there on something called open Rock started compiling emails went through the entire process of designing a site he knew exactly how gonna look how was gonna work and then he time touched a dead end he couldn’t find anybody to help him with the system he couldn’t yield he was in college so he couldn’t yield a make and development projects virtually died he went to work I had a bigger fellowship and then you know as season goes on he sort of make the relevant recommendations get go by the wayside and Matthew was in a very similar position after the 2010 shake in Haiti he had a chance to visit along his friend Brett and he saw this happening a ton of parties were displaced they had to they were set up in these what were supposed to be temporary tent metropolis that were supposed to last-place a duet weeks but they ended up living in them for years and parties still do the vast majority of people who are displays are still living this mode and like this is just one little minuscule area of exactly tons of parties being dispossessed and he “hes been gone” there and he had a heart for these people and just pictured that you know people living in these tents entire categories living in extreme heat he thought maybe there’s something that we can do about this but he’s he’s an apprentice at this UX agency in Atlanta he doesn’t really have designed I want he has design chops but he can’t code so he doesn’t know what to is actually so he observes one family and he has this idea why don’t we build one family at home and see how that works and if there’s like these basic brick builds that go up for $5,000 which is nothing compared to the homes that we live in so he has the ability to happen to be with webflow but he had the ability to create a test site that looks like a Kickstarter absolutely I’ll explain how this is done but it’s completely data-driven and content driven he only places up a family and what a family looks like a family as a objective a family has a description and like a an epitome and then each of the each of the families he firstly set up one and he started this video and it’s totally like you could say that it’s a bullshit website and he got one home funded in that while he was still working at this agency it only uttered him like this huge boost because now he changed the life of one family so they prevented doing that and doing that eventually one family turned into three then it turned it into five and then he said wait a minute maybe I can construct my like perhap I can make this my life’s work so he he built on Mort like he built more onto the site and they they proceeded from five families to ten to eventually a hundred and thirty six homes with over 800,000 dollars promoted directly to fund these homes they built an entire city and and changed the lives of at least 136 families in Haiti and now they’re moving on to Nepal etc etc so he was able to take this idea and evaluation it out very quickly without “il rely on” a developer and are benefiting from the influence of the web exactly by build for it directly so the main difference between Sergey and Matthew is just the timing Matthew had the ability to do this and work directly with the web while Sergey was a little bit early and so what’s the difference in both cases they’re both not coders they’re after talking to both of them they’re both afraid to Co they’re intimidated by merely a gigantic amount of information that we need to know in order to system and for the huge chunk of the world code is like this entirely different cryptic usage that is so far away from what they naturally understand it’s not it’s not the same as you know like what we think of like English literacy and we’re even boys elementary school-aged minors can sort of grok it and know what this is and do it naturally and we can teach it with simple hypothesis it’s not like that there’s so many areas around code that you have to get everything right for everything to work correctly and this is a scary slide to me this potent medium that that we get the privilege to build for is accessible to less than a one-quarter of 1% of everyone in the world so like if you went to a party with a hundred people there at that gathering like this much of one person would know how to code unless you’re in Silicon Valley in which case there’d be no party in the first place because everyone’s coding but everyone in Silicon Valley thinks that everybody knows how to code and should learn how to code because you know they know how to do it and and and me I was privileged to learn how to code in 1999 I had Dream Weaver I had to know like 20 HTML labels CSS didn’t even exist yet and as new technologies came out I kind of learned them piece by piece and a great deal of us in this room had that advantage and people starting today they get met with this like oh you want to design for the web learn like all these calls there’s a nifty defraud sheet this is all you need oh you want to learn CSS here’s like you know everything you need to know about layout and then oh you miss some JavaScript on that start you know here’s a duo volumes to be recognised that so then once you learn these three things boom magically “youre gonna” a network developer JK you uh you actually need to know a cluster of other substance and if you get one of these articles wrong good luck with that like perceive a make friend or you know start reckon all this nonsense out and for some of us that might not be intimidating but for ninety nine phase seven five percentage of the world it is practically intimidating we can see by the fact that code has been available for 80 years and still such a small fraction of the world knows how to code that’s a terrifying statistic to me oh by the way once you like situate all the stuff up you now have to design for like a thousand different resolutions so go learn responsive web intend and and once you’re done you make all these unique organizations so how do we get now like I web blueprint I think is just an extension of how we traditionally tell computers how to do stuff and the style that computer programming started is we would give these you know you eyelas machines instructions and then come back later and discover the yield of those we would say here are some regulations you do the computation oh and then show me the result of those and then beings are of the view that well maybe that’s too complex you know writing a machine code so they created something called assembler which moved it a little bit easier and they were like you know people who wrote machine code they said oh people who write assembler you know they’re not really programming because you know zeros and ones that’s programming this is not really programming like this is kind of cheating and so we have like this basic model and then you know brand-new computers come out and they get quicker we get you eyes but still the the process is still the same like we’re still writing code and then we’re coming back and learning what it does and then we developed something like C which takes assembly code like this and offsets it a little more human readable but then people who wrote assembly they were like no no no no this is not how you program this is how you platform this is for you know like you can’t have bespoke assembly when you’re writing this right so people actually attached to the way that they were working so now we have the same thing even today with almost all the programs we write for the web for for telephones for desktops it kind of runs this room we commit computers teaches then we come back and see is that what what I intended so the boundary to are the things that we’re creating is code and that’s not traditionally been true-blue for a good deal of mediums and a medium is something that you have like direct interaction with and that you have like this human tactile connection with and even if you might not instantly let’s say you’re you’re making a clay cup or you’re writing a novel you still have that direct connection to the word being written on paper that once they’re done that’s the creative work you don’t have to go through an intermediate halation process to to get your your crafting your and your work out there so we have you know painting you you coat immediately on a canvas when you’re playing music you you touch us touch the guitar you can already hear some tone when you’re making you are familiar with a whatever you rent you looks just like you instantly immediately operating that medium so this is true across all imaginative artistry shapes with certain exceptions of web motif because you know get to that and we’ve been in this situation so many times back in the time that sheet music was invented most composers what they did was they thought they constituted music in their leader and they they wrote it down they toy it in their principal and then they gave it to an orchestra to accomplish and all the people who couldn’t do that all the composers who wanted to play on the forte-piano immediately to kind of like get to a constitution by feel or merely by hearing they only appeared down upon because there are the ones that couldn’t see this entire you know melodic organization in their leader and then over day we really spawned it more and more accessible to learn an instrument merely by playing it and eventually get into some of the more advanced concepts same thing happen in desktop publishing it used to be that you would create these article organizations and give it to a periodical setter and such person or persons would make “whos working” and change that to something that a machine a princess them can understand and we had all this break-up between the artists in print scheme and the people actually altering that into the final product so there’s this whole translation layer that braked things down and today we have indesign where you virtually you press a button and you get a PDF that starts directly to the printer you “re making a mistake” you re exported a PDF you don’t have to like go to another person and get approved for some you know some misspelling or a character moving out of place same thing Apple and Pixar when Pixar was initially started by mathematicians these are you know people who were computer scientists they understand understood vector math they understood this thing called non-uniform rational b-splines NURBS of how like conditions structure and how light-footed moves off of them and how all the present working mathematically but then when aesthetic beings are entered into and started thinking about how do we get how do we tell stories through the medium of 3d animation and 3d modeling we created a direct medium for those imaginative people to work in that in that sphere we didn’t coerce them to learn about polygons we didn’t coerce them to learn about you know the physics of how life wonders glowing wonders off of certain faces and at times what we really needed to get technical we would bring in professionals to build things like mane systems to build things like you know particle systems and and those experts would build natural human UI around those systems to make it configurable and pluggable in a in a user interface not in a programmatic fashion so you don’t see things in like 3d animation software where we say oh this mane organization has its API and you have to write all this JSON to configure how it how it makes time doesn’t work that nature right now and in 3d living only work directly with with the artistry that we’re creating same thing was the case with with blogging in the late 90 s merely you are familiar with on the order of five to ten thousand people blog because you have to know how to write HTML you have to have a server you have to know how to FTP this trash you have to know how to sort of write all the code to shape that happen and those people who did that if you were to ask them is blogging hard-bitten they would say no I can do it it’s it’s not a big deal but the thing that I think we were missing at that time is how many parties are intimidated by even that small-scale tier of technical sort of know how to write something in a text editor and send it to a server and set up a region and make it happen so when bloggers came out it absolutely democratized the these best practices of personal publishing and it was literally orders and lineups and guilds of intensity more people that had both the privilege and the power to express their imagines on the web so this is kind of like a little little cheeky walk through other imaginative implements really to show you how other creative self-disciplines have moved sort of leveled up to create a direct interface to their medium like you have a 3d and I simply settled these in alphabetical degree really because web designers come last-place but try to notice the pattern here is that from the fact that they’re all dark try to notice the pattern we have like 3d animators 3d modelers they were immediately in in the medium evaluating masters you have Photoshop here illustrators level decorators you have particle accomplishes artists photographers they work directly with with the thing that they’re creating book decorators texture craftsmen video writers visual impressions masters you worded it and here we have web decorators I convey it’s a entanglement decorator and 90% of the time were in a code writer like that I think is is something that we have to at least question why is why is it the state of the art the status quo that that we’re the only industry that is a innovative prowes pattern working in a direct medium and we’re still writing code to express our thoughts so I want to show you a little tiny glimpse of a something that that we’ve created that moves us closer to to this world of instantly operating the medium of the web and precisely by way of example I want to show you this this place that was built by an busines there’s a sandwich video I don’t know if you guys “ve heard of” them but they make a bunch of startup videos and it’s it was has been established by an authority for like more than 20 grand five years ago it’s not accept they want to add more dynamic content to this thing with commendations and they want to make it legible on phones and the agency mostly says oh that’s not the direction was build we have to rebuild the whole of the entire thing so what we did was we rebuild the entire thing down to the database up through all the responsive blankets in less than three hours and the route that works is we rethought what it means to work with content and the and the fullest extent of that is that you express to a computer to a organisation like network flowing what structure of a content is and humans are like inherently wired to be considered objects and about like how things behave and less about giving instructions to a computer which is usually what we deal with with HTML and JavaScript and CSS so here for for sandwich video that you happen to have projects and companies and people and each of these things is hugely different so corporations have all these qualities and people have other qualities so if I was to say you know let’s say they want to add occasions to their site so I can just say happenings and I’ll have an phenomenon and happenings have a thumbnail image maybe they have a date and perhaps they are led by a person so all of a sudden I’m creating a relational data example being these are the kinds of things that parties currently do with bye-bye made like instantly generating database system or I think you guys heard recently where you have to bootstrap something like you know Drupal or WordPress custom post categories which you need like professionals to do that and it makes months and months of struggle so now I can create a new event so I’ll just say feature web design in New York and it happens to be today so I’ve just started prototyping out my material and this is the real content this is the actual database and once you have it that’s the that’s sort of the easy component once you have that right now we need makes to grab that data somehow like concern a sequel query move that to HTML loop over the data that you have determine filters on that data and then convert that to HTML and CSS we rethought that entire process and just said why can’t it be as easy as haul in a dynamic directory which is a inhuman primitive when you’re thinking about user interface and I’m gonna say this list is going to come from my inventory of projects and I’ll give it this scheme and just for sake of rally applies only to 8 items and sort them by most recently created so now now that I have these kinds of like the building blocks of that I can start building entire schemes off of that so I’ll say this image is just an epitome tag will actually have its root come from the thumbnail of such projects and I’ll add another image now that will come from a different it doesn’t come from development projects it comes from the project’s link corporation which when we’re talking about SQL this is like a join and you have to have an expert programmer sort of know the query that you need to write except now I’m just show the type of UI that I demand and you can see that everything reflows naturally like it would in a browser so I can just now give this logo a class and dedicate it a little margin and then go to the wrapper apply it a class and do the same thing that I would do with CSS is just yield it another CSS rule and then you know apparently I have to make this responsive so I’ll give this width of 33% in my tablet breakpoint and then now I’ll have two of them place by two of them side by side and in my phone things don’t actually let me make sure that everything looks fine switch to my phone and make sure that they stack so now I’ve created an part dynamic accept pattern as I get more data so let’s say I converted this this from newest to oldest right I have quite different data and as new jobs come in these manifest right away in the canvas I’m working instantly with a medium that I’m procreating for and to prove that I’ll publish this live and you can see if you go to the sandwich video at network flowing research that IO site here’s the organization that I procreated it’s completely accept and as I contribute brand-new programmes they’ll automatically appear there and I can go and pass a link to my consumer so talking about CMS’s by separating the content from the design but still preventing the link between them I can now exactly give my purchaser a method to say okay you have access to only the content you can add new material you can change content directly on the screen so I’ll precisely changes to one card and you can see immediately it’s manifested anywhere that that data is use so I’m working directly I never have to go back to a system editor I never have to think like oh how is this going to translate from the code that I write to how it actually appears on the screen I’m actually directly working with the thing that I’m tailor which is what every other artistic medium medium does and I’m not saying like this is the perfect solution but it’s one step closer to to realizing an idea that coincides every other every single every other imaginative penalize that they are able to that we rehearse as you know as humans and I think that’s a really powerful potent style to think about the medium of the web because we don’t know how many sergey’s there are out in the world like the only reason I know about sergey’s projects he happens to be my brother we I have no idea if there’s thousands of of people who had that mind before but really weren’t able to build it and it’s it’s super arousing for me to see like people like Matthew take their ideas and time run with them without having to rely on a middleman or somebody else telling them no you can’t do that or yes you can do that so you’ll probably check the move tomorrow I took that illustration in the San Francisco one so Jen Simmons says this after she talks about flexbox and you know float layout so we have to sort of change our thinking between float like because just like we changed from counters to move based organizations we should sort of change our thinking from float based layouts to flex chest and CSS grids and things like that but I want to challenge that even more and just say like why do we need to express our aesthetic ideas in what amounts to be instructions to a computer when there’s the potential of other other ways to to work more directly in the medium and this is another slide that I borrowed from Jen’s talk I recall the the reason that a lot of programmers back in the working day when machine code came out and then assembly came out and then C came out we’re just terribly protective of the job that they’ve done was because they they were afraid of new ways of doing things and I think that once we formerly we fasten that out of our minds like if we assume that code is always going to be the style that we interface with the web as a medium I think there’s so much potential that we could be missing out on because exactly by virtue of us being in that tiny little sliver of humanity that knows how to code it’s easy to kind of like pigeonhole ourselves into that into the the type of thinking that if I can do it or if I was able to learn then everybody should be able to do that and I think that’s something over epoch as we’ve seen more of these like code schools and you know attempts to get beings to code more pop up the actual percentage of people who know how to code as a function of the world’s population has sagged so people are learning to code slower than they learn it then they’re they’re actually being born and this is an interesting example that Brit Victor sacrifices this is what you used to know I used to have to know to do propagation in Roman symbols so this was like the de facto way that you did multiplication and the only people who could do do this type of multiplication were official mathematicians in the Roman Empire who like go through extensive civilize so like multiplying two figures like this would be a crazy process where you would have to you know like instead of carry the two you’re like carrying the triple C and like moving the L so to most people like when I picture my partner how I construct websites that’s what structure websites looks like to her I’m just moving crowds around I’m not really like it’s it’s hard for me to explain what an activity like what answer that has without prancing around from from place to place whereas if I see her something where I can directly influence a medium whether it’s 3d animation and I’m moving a ball up and impelling it leaping or I’m I’m working instantly in a browser through a entanglement supervisor or through through web flowing there’s a direct connection to the medium so I want us to think about whether we’re we’re like two two restrained to this you know to this thing that we call HTML and CSS and and the other privilege of opening a talk for the first time is that I was told you get to make up a word so I made up this one super medium hope it protrudes but I I simply had this idea this morning that the web is this crazy medium that can represent every other medium represent print on on the web we can represent film on the web but no other medium can represent the web like it can’t fake the web so the web is the first time that we have access to the part resource of human knowledge on kind of the read feature we can go read it but it’s also the first time that we have this this incredible privilege of being able to build something to create something to write something to to draw something and get the entirety of humanity to to be affected by that work and right now the thing that I’m afraid of is that almost all of that power remains in the hands of the privileged few and many of us are in that privileged belief and I think that it’s something that we should start thinking about how do we get this amazing power do we hold on to it or do we do we open it up to more beings so I deter I keep going back to Sergey and Matthew narrations like how many of these guys are out there how many people have ideas that are captured that that they are only completely discount the fact that they can do it simply because they don’t know the technical details to go from ideation to getting the actual product out there and I think this matters like you can see from from Matthew’s work in Haiti that this isn’t just like a website that we’re creating for a pizza place down the street this has discernible real-life effects on on other parties like the web has literally reformed the world and some sometimes you know for the most difficult but on the like in the vast majority of cases for the better and I anticipate when we open up this capability to this insane new medium to a lot more beings to the ninety-nine point seven five percentage to build like truly custom things that the things that they can imagine that they can already kind of map out on a piece of paper and describe exactly how they work in exactly how they gape if we give them the power to actually represent those things happen I think we can have a huge impact on the future of the web and if you think about one of the videos that was on the website for future of web design was the history of film was that for the first 30 times cinema was solely speechless and everybody assumed that movies are silent right and in people who attained speechless movies were kind of like this is how we conclude movies right and then we democratized the creation of movies firstly we added voice then we became movie gear cheaper and cheaper and cheaper and now we create hours and hours of video material entertaining informative video material exactly by virtue of uploading something to YouTube it’s it’s available to all of humanity and and how many people’s lives have been changed through that so that’s what I want us to start thinking about can we can we open up this this amazing brand-new medium to a lot more parties thank you

Brett

As found on YouTube

Share this article

Leave a comment

Related Posts