Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
so hello everyone welcome to Portland of you guys are really enjoying drupalcon I know I love Portland I've been here a few times and liked the food and beer here is amazing so like I'm just really excited about that um it's also crazy that there's
so many of you guys and you speak in the microphone play this microphone yes 30 there's so many of you guys here to see this this is crazy I thought there'd be like five people showing up for this and because it's not like core development so this
is awesome um so I'm going to try to keep things pretty short and to the point since I'm sure everybody's got beer plans afterwards yeah or we can we can just talk about brewing beer instead if you won so this is the Zen of HTML prototyping and
designing working wireframes and the browser so my name is josh Josh Riggs I am a senior user experience designer at lolla but if you haven't yet come by and see us in the expo hall we did have some really awesome screen printed posters that we were handing
out i'm not sure if they're still available but we have all kinds of goodies and you know we're just a fun group of people so come by talk to us and hang out with us if you're not familiar with all about we're an interactive strategy design
and development company we of course specialize in Drupal and most of our work involves creating large scale responsive websites for enterprise clients with very very specific needs this of course creates a really unique design and user experience challenge
for us and this presentation is basically going to be what I've learned and what we learned as a team from the mistakes and successes that we've had in creating wireframes and HTML prototypes so I have kind of four fundamental goals that I'm hoping
to accomplish today the first is to remind us of why we actually wireframe in the first place why is it in the design process I want to convince you guys that static wire frames are useless and creating HTML prototypes are the bee's knees I want to show
you guys that getting started with prototyping is pretty easy and I want to talk about some of the options that you have available and then I want to talk about how prototyping fits into a modern responsive web process and how to get your team and your clients
on board so I have a couple disclaimers the first one is that what I'm going to tell you is not a be all end all set in stone process it's a constantly evolving process it's largely trial and error it's not going to cure cancer it's it's
not going to like shoot rainbows it's gonna be I'm going to discuss basically things that I've done and things that have been a success for me in the real world i'm also going to discuss some things that haven't worked so well disclaimer
to is that i am a designer I come from kind of the old school web design days when the job of a web designer included user experience information architecture wireframing design comps HTML all that stuff and out of today that front end development has gotten
really really extremely complex and so now that it's it's own specialization I tend to focus mostly on user experience in design but i still have solid front and development background we have our own front of development team at loll about that handles
a lot of like the really really detailed stuff so i'm going to keep this at kind of a higher level ten thousand view talk 10,000 foot view talk excuse me focus on more why we should adopt HTML prototyping into the design process and of course if you want
to talk to me some more please find me at drupalcon i'll probably talking your ear off about it so first thing i want to talk about is what's the difference between wireframing versus prototyping versus HTML prototyping you've probably heard these
terms used interchangeably wireframes typically refer to static documents that describe the actions of a website or an application they can be made with you know illustrator fireworks on the graph balsamic I I've even seen some Microsoft Paint wireframes
and they were different Theory horribly ugly um they can also be sketch on paper and then in contrast HTML prototypes are clickable demos of websites or apps that are actually made with good HTML and CSS and they run in a browser so since we cleared those
things up never seen this movie yet me either so so a long time ago in a galaxy far far away or maybe it was last week at an agency near you we used wire frames as a first step in our design and layout process and it makes sense it seems like the right thing
to do because you know we would make a blueprint before we build the house right a website is in the freakin house um as websites become more complex and responsive static wireframes just don't cut it anymore so in our hero the HTML prototype or if you're
Sally young it's HTML she's British and she makes fun of me every time I say HTML so if you know any British people its HTML um so this is a static or excuse me this is a screenshot of a working responsive HTML prototype looks like a wireframe but
it's made with valid HTML and CSS I tend to use ZURB foundation or create my own HTML prototypes and they're completely responsive cool so let's talk brief about why we wire frame why do we do this thing in the process in the first place it's
been part of the design process for a really long time and how many of you guys have created a wire frame of some sort in your career that's pretty much everybody it's like as common as beards in Portland so why do we do it we need something cheap
and ugly and this is not a your mom joke what one goal for wire framing is that we need to create something cheap and ugly that helps clients focus on making good UI decisions we need something cheap meaning lightweight and quickly produced not spending a
whole lot of time on it an ugly meaning mostly devoid of style and they should be somewhat disposable even though we're supposed to be cheap and ugly with our wireframes don't you guys like me have sat at your computer and like torture yourself over
pixel perfection on a wire frame come on in the design process we need to separate the user experience from which is the layout the content structure component hierarchy functionality etc from the pretty stuff the typography the colors the textures photography
illustration those two should be separated so that we can focus on getting each one right in my opinion we shouldn't be talking about color texture and typography when we're reviewing wireframes so assuming that you've already done the work and
in your process to understand purpose to understand content and structure and priority wire frames are just a way to further clarify and test things so if you've gone this long creating static wireframes why should we put the extra work into making responsive
HTML prototypes instead when i'll just keep doing the same things when I just draw websites instead of actually build them I'll give you several reasons traditional wire frames are static documents but we try to use them to describe multi-dimensional
user experiences the key word is described these are just blocks on a page and we're attempting to describe and communicate how website our app will work so prototyping is rendering ideas to understand the matter that's according to jarod school I'm
sure you've all heard of him prototype is an early sample or model built to test a concept or process or act as a thing to be replicated or learn from this is directly from Wikipedia an HTML prototype is essentially a working wireframe created with HTML
CSS and JavaScript and viewed in the browser and this creates a living breathing environment for users to interact with the goal of prototyping is to discover and solve design problems early on in the process by iterating testing implementing and refining
and we all know that the earlier the earlier on you find a problem and solve it the less expensive it's going to be if you can get this done when it's more of a conceptual thing versus later on in the development process when you've already built
ninety percent of your project it's just going to be so much better it's really hard to do that with us at a PDF wireframes and this this is kind of the reoccurring theme of this talk here if a picture is worth a thousand words a prototype is worth
a thousand meetings this is true I like I've had meetings about meetings about meetings about meetings about wireframes and if you if you give a client a prototype that actually renders in a browser then that leaves far less up for interpretation so prototypes
show real interactions wireframes describe when you need to demonstrate a complex user interaction to a client or developer describing these interactions but the static wireframe just creates too many unanswered questions so here's an example this is a
traditional wireframe we've been living on this illusion that static wire frames are cheap they don't cost that much an effort in time to produce but if you ever tried to use a picture like this of a website instead of an actual website it can be really
[ ... ]
Nota: se han omitido las otras 4.534 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.