 So while we're while we're waiting for people to filter upstairs on a scale of beginner intermediate advanced How many people here are beginners in Drupal theming and design? awesome intermediate advanced Okay, that's actually a really good cross-section. That's exactly what we're looking for And given the choices designer, themer or developer How many people here and you can be more than one how many people here are designers? Okay, themers All right developers Cool. All right developers. This actually is going to be pretty relevant to you because it's going to give you some insight into into what we do Quick poll this is sort of unrelated to what we're doing here, but I just like to ask people this from time to time How many people here? Hear the word themer and and immediately understand what that means and what that involves Okay, how many don't How many don't have a clue what a themer is and what that's supposed to mean? Okay, cool I think that that is and Adam is is one of them raise my this is just sort of an aside It seems that the role of themer is kind of unique to Drupal and that it requires a cross-section of skills And that cross-section is something that we're going to be touching on Just a little bit. So we've waited a couple minutes. We should get started Welcome to don't design websites design web systems Very quickly. We'll introduce ourselves. My name is Todd Neinkirk. I am a co-founder designer and developer at four kitchens. We're a small Drupal and an open-source consulting shop in Austin, Texas, but we make big websites. I'm really into Drupal. I love Drupal I love coming to events like this. I'm primarily a designer. I'm also a developer and in a previous life I was a writer and editor My name is Adam Snetman. Can everyone hear me? Okay, by the way using this lapel thing and it's not probably It's as loud as the the hand mic, but hopefully if somebody's listening they can raise the lapel mic Okay, good. Maybe not. I'm a design director at a branding and design agency in New York City called think so creative and If Todd will advance my little icons. I'm very into design. I've been doing it for many many years User experience is something. I'm really passionate about content strategy also and information architecture and I'm an unrepentant cat person. So I hope that's okay with everyone in this room So the the designer and the developer or the the themeer and the developer are the Batman and Robin of Building websites. This was actually not chosen because of tonight's event, but rather in general Depending on where who you are and where you're coming from you might pick yourself to be Batman or yourself to be I don't know who would pick Robin, but the other person is usually sort of seen as the Robin, right? So together we form some kind of a dynamic duo and in this case we're going to be talking about designers and Themers slash developers and Adam in this case is the designer and I'm going to be the Drupal themeer slash developer in this presentation So what do we mean by websites versus web systems? So in the old days who remembers the old days of the internet websites were measured in pages Who remembers this my website is five pages. How much will it cost for you to make an eight page website? And this was because each of these pages were single files. They were HTML files that had to be Maintained by hand so it made sense to split it up into pages because that was the scope of work You knew how long it would take you to make one page as opposed to ten But today's websites are dynamic Meaning that they're always changing the content in them changes not necessarily along with the files that run the website Today's websites allow maintainers to create and edit content directly through the website So you click edit on a node you're on the website changing the website itself And they generate their own output and that's because today's websites are actually web systems today's websites are Software and that's a big distinction. So things have changed quite a bit in only a few years The big point we want to make today is that designers are Incredibly powerful and a lot of us don't know it, but with great power there must also come great responsibility Designers Designers determine a site's functionality not developers And we communicate this functionality to the developers who implement our designs through various tools and and products of our trade Through site maps wireframes site comps or design comps things like process flow diagrams all kinds of things that we give them that explain What's in our head? So let's consider the login link right the humble login link on a design comp It's six characters two words But it tells an incredible story because in order to log in users have to be able to create accounts They have to reset passwords They have to update account information and then there's all kinds of other stuff like permissions now that you have users Some users should do things that others shouldn't There's privacy issues some information should be publicly visible some should not You also have to deal with an email system if you're doing Password resets you have to have an email system that interacts with that user so that they can reclaim that password now You have to worry about having your website on a server that can properly send email And what happens if that server address is blacklisted and it's going into spam filters and things like that These are our serious issues that we have to contend with all because we put those two words on a design comp Log in right we forget how much power we are placing in a design by doing something so small So we designers are a site's primary architects Thank You Todd. Thank you So we're gonna talk about what what? So we're gonna talk about what we Mean and what the different steps that we take when designing a web system and thinking systematically thinking about websites in that way and the first Step is to stop and close Photoshop, right? It's not time to Push pixels around you wouldn't paint a house before you build it And so there's no way that you would ever try to design a site without doing all this preliminary Architecture and thinking before you're even ready to start deciding what color anything is How's that is that better? Okay, thank you Step one would be define the site right and this step is is divided up into a lot of pieces a lot of key questions that you Need to answer at this phase of the game Here's for them. What's the purpose of the site, right? That's something and everyone needs to know before they set out to Build a website. What is it going to do? We want to know who the audience is and who the site is for that's going to influence a lot of the decisions We make down the road We want to know what the content is going to be and how we're going to organize that content And we want to know how people are going to experience the site and interact with it, right? This is everything that has to happen before we actually design anything So to talk about the purpose of the site the what you're trying to do to answer this question is to start gathering goals and requirements and the way we do that is typically in Kickoff meetings with the client or doing interviews of key stakeholders to try to sort of gather all the important people in the room and Make a list of of their business goals, for example, which might be things like Generating buzz for a new product. It might be to raise awareness for an existing product It might be building a community around a topic or an initiative. It might be to make some money It might also be making more money than the money They're already making and you might want to throw in a few little other bits of money That seems to be on a lot of people's mind how to make money online But once we have sort of those goals We can start to think about what the requirements and constraints are going to be so that when we go into later phases of the design process We know what we're dealing with Things like brand guidelines. Are you working for an established company that has a set of guidelines in place that dictate? typeface color logo Grid system things like that There might also be SEO requirements that you're going to need to think about what what sort of strategy might they have in place for that sort of thing There's also accessibility issues. Are you working on a government site that needs to be accessible in Ways stricter ways than a new product launch site might be What's your strategy for mobile devices? Are you gonna? Build a responsive site that adapts to whatever environment it's in or are you gonna do the sort of split way of doing things where there might be one Mobile site and one desktop site There's also infrastructure issues any any kind of server or hosting or technology Platform issues that might influence design decisions that you make down the road And there's also things like performance and browser compatibility. We all deal with browser compatibility It's sort of that the ugly stepchild that rears its head on every site that we end up making. It's definitely something to think about So once we've gathered all those things we've made our big list We've talked to stakeholders we can sort we can decide who the audience is for our site And this is a really important step that That can can get left out and can't get left by the wayside and the way we do that is to create personas Have everyone has anyone this room worked with personas before? All right, good. That's a lot of hands. So what is a persona? This is what you do when you make a persona the first step for us is to make a list of the target audiences and describe Who we think our visitors are going to be? And what you want to do is you want to create one persona for each of those target audiences And you want to give that persona at least a name an age a face a reason for visiting and a wishlist of tasks They're gonna do on the website So here's an example All right, here's a persona This is a random person. I don't know who this person is But I've created this persona the audience type that I'm considering here is new york city based graphic designers I know that they are going to be ones that want to visit this site I know that this person is 34 years old I've given them a face I know that they're coming to the site that I'm working on called sweet plaid shirts.com because This guy has 80 percent of his wardrobe comprised of these shirts He buys them regularly. He was recommended To shop at this site by a good friend and his wish list when he gets to the site What are the things he's going to be doing? He wants to be able to sort available shirts by criteria like most popular newly added He wants to see what shirts his friends have purchased You don't want to make that faux pas of buying the same shirt that your friend has and wearing it to the same event That's really embarrassing And uh, he might want to sign up for an account to save preferences Uh, so now that I've made this persona What this lets me do is as I continue the steps in the design process at every step of the game I can make sure refer back to my persona as I've created and see Am I satisfying the needs and reasons for all of my target audiences? And it becomes much easier to do that especially when you're talking directly with clients If you can talk about Adam who's 34 who who loves plaid shirts instead of the generic target audience of new york city-based graphic designers Right, it makes it makes this nebulous concept of the target audience into something concrete That's easy to discuss and easy to keep in mind Oops. Sorry. We skipped one there. Hold on a second All right. We're in step three, right? What's the what's the content and how is it going to be organized? And the way we do that is we define our content types and create a site map So in Drupal along with any other content management system different types of content are content types And uh, these things are defined by the different pieces of information that they contain Here's an example if we are doing a site with a blog as a component We know that the blog post is a content type and because it's a blog post I know it's going to have these sorts of elements. It's going to have a title author date published, etc If we were talking about a product site like in our shirts example A shirt is going to have a name a description a price These are two examples of products. I can go ahead and list the the different Information elements that make up that product type and once I've done this I have a really good idea of The the basic building blocks the content building blocks that my site is going to be dealing with And then we can take that information and start to make a site map with it So site maps should do these basic things. It should list sorry It should list all the sections and pages of a site and it should illustrate how those sections are organized Site maps are pretty basic. I'm sure everyone in this room has dealt with and created Site maps in the past. Here's an example of one the important thing that To note is that everything that's an actual page that can be reached to the url needs to be represented In some way on a site map sometimes we take shortcuts for Things content that is very similar like a blog post for example We would represent as a stack of pages instead of a discrete box and that that is a shorthand way of saying These are all the same type of thing. There's a lot of them But I'm indicating on my site map where that page is in the overall hierarchy of the site Once we Got the content under our belt we can sort of create our wireframes And what do wireframes do for us? So they're supposed to they do a lot of things actually they illustrate navigation And layout. That's the time to do that They're going to demonstrate functionality and show how elements of our user interfaces are going to work They identify static versus dynamically generated elements that are on each page And they can help us identify all the unique layouts We're going to have to consider when we actually get to visual design Here's an example of a site map very simple site with a lot of dummy content in it But you can see how we're starting to Frame out and and answer all of those bullet points in the previous slide So we're indicating some main nav here in this wireframe We're also hinting at some of the ui we're going to use I can see here that I'm going to have some sort of search Interface there and I'm also going to have a tabbed interface to kind of view the same type of content according to different criteria I have an example here of dynamic and curated content So I can I'm pretty sure from that list over there that those Articles are going to be dynamically fed in that's not something any editor is going to have to be responsible for maintaining And I can see in the center here that this is something that an editor would be Responsible for for maintaining its hero articles featured articles I can also see from my wireframes the different layouts I'm going to have to contend with us any site you do will probably at least have these two things There'd be a home page layout and an interior page layout Of course most of the sites we build being as complex as they are Have many more layout templates in this but the wireframes let us Put all these these different templates next to each other and get a sense of how how large A set of things am I going to have to be designing once I get to the visual design phase? As far as tools for creating wireframes, we're going to we're going to insert a few tips here and there This is something that Todd introduced me to and I have grown to really love it's called balsamic mockups Has anyone used balsamic mockups to make wireframes? Okay, awesome. We won't spend too much time Explaining it but for those who don't know what it does. It's uh, you can use it in a desktop Version and it also has a web based version that I have not used But that fosters kind of collaboration between teams and let teams easily work on the same Uh, the same set of wireframes, but it's cross-platform. It's got a lot of plugins that even have a free license for do-gooders Which is great and um, there are Drupal components that That what are those do you talk can you explain that better than how the Drupal components work? Okay, they're pre-built ui components that sort of plug directly into Drupal and are made to work very well with it Uh, and time and budget permitting This is sort of an extra step that we love to do with our clients But not every client we work with has the time or the budget to do it We do some usability testing And the the purpose of the usability testing is to validate all the assumptions that you've made Up to this step, you know, you're doing site maps. You're doing wireframes You're making a lot of assumptions about how The target audiences you're trying to reach are going to think about your site and interact with it And uh, it's great to make sure you are right about those assumptions and the way you do that is with testing and Uh usability testing sounds kind of big and scary and expensive, but it doesn't have to be right there There's a continuum of usability testing And it can be everything from a very quick sketch drawn on a napkin and shown to someone It can go as far as paper prototypes, which we'll talk about a little bit later You can also develop keynote prototypes, which are basically using keynote to simulate the interactions of a piece of functionality or your interface or the navigation of an entire site And you can go as far as doing real live html and css prototypes for what you're doing And uh Now we're up to you Thank you This thing is very sensitive Choose your platform. Okay, so now we've done all of this architecture stuff, right? notice at no point so far have we said Drupal or Jumla or expression engine or anything like that because we want these initial phases the initial phases to be more independent of a content management system So at this point knowing all the things that you need to do and all of the kind of navigation and UI that you need to perform And the goals of the site that's when you can make an informed decision about the platform that you're going to use Uh, Drupal isn't always the best solution. So before you get angry I want to explain that if you're doing something like building a simple blog and it's just going to do typical blog stuff And nothing more and it won't have users WordPress is probably better for something like this if you're doing, um I won't get into others. There are other content management systems out there But be careful about what you choose because Drupal is great. It's really powerful But as we all know it can be very complicated So we want to make sure that we're making the best decision platform wise for the project based on the goals that the client has outlined Once you've chosen this platform you need to translate everything into Drupal speak or you know insert content management system here speak Uh, every content management system has its own jargon and its own way of doing things So we need to start translating all of these goals UI elements navigation components into things that uh speak to Drupal Very quickly, uh, this is very basic stuff for everybody here But as a reminder most Drupal sites are comprised of just a small handful of things So there's this notion of content, right? That's easy, but it's not always a node We need to think of content as views, panels, user profiles, forms, admin interfaces, contexts Anything that appears on the page is essentially content There are also blocks, menus Primary and secondary links stuff like that typical theme elements, typical UI elements in Drupal That's part of your Drupal speak vocabulary and you need to start translating wireframes into uh into these terms and these concepts So now Now we've done all of this other stuff. It's time to do the visual design. So go ahead and open Photoshop Now you can make an informed decision about how to create a compelling and effective design You couldn't really do this before because you didn't know the goals You didn't know how the users would interact with the site. You didn't know who is using the site You didn't know what platform you were using if you started doing design before this point You're just gonna have to redo it all Some things to consider when you're building the visual design you need to consider how type color imagery will translate A client's brand to the web. In many cases clients don't really Feel comfortable on the web or they've most of their materials are physical So they they understand the physical world or they understand print But they don't really understand the unique complexities of the web and it's up to you as the designer to help them translate that Uh, one of the things that we do that's really helpful is we want to generate this kind of discussion We want to generate um A little bit of brainstorming with a client using some tools such as mood boards and style tiles And very quickly and this could be a presentation unto itself and I highly recommend that you look up, uh, samantha waran Uh, I'll have a little link later on. She's with phase two. Um, she does a lot of stuff with style tiles And they're really neat and I'll explain what those are in just a moment uh Using mood boards and style tiles Are faster and much cheaper than doing a bunch of iterations of comps So if you do a comp you have to do, you know, two or three different page layouts And you have to fix all these little things and there are all these little details Uh, and then you show them to the client and they come back with 20 changes Then you have to redo it and you kind of cycle back and forth with these large bulky documents But mood boards and style tiles give you some insight into what they're what they want to do before you actually start building it Uh, it's going to involve the client in the design process. So they feel more attached to it It's not like you're some distant designer who occasionally drops in and gives them ideas and they kind of like it Or they don't or you know, they don't really understand what's going on It involves them. Uh, it's going to increase their confidence and the uh, the chance that they're going to buy into what you're doing And they're also really fun to make So here's an example of a mood board. The idea is really just a collage. You want to create a collage of color Type imagery ideas feelings Uh, here's another These two evoke Very different moods, right? This feels a little edgy new You know, here we have mtv wired john stewart And here we have baby You know this to me this seems like this would be a baby boy, right browns and blues and things like that There's a little robot. I mean they just sort of I tend to feel that way And of course it says boy right there Um now a style tile is a little bit different because it's not a collage It's a sampling of graphical elements and a color palette and type And the idea is still to evoke a mood, but now you're moving more towards a website This this looks much more like a website than this, right? This doesn't look like a website This looks like somebody's having fun pasting a bunch of things to a piece of paper Which is exactly what we did to get here But now we want to take those elements and start to move in the direction of the website And these style tiles which samantha warren at phase two uses quite a bit are really interesting Here's an example of three of her style tiles for one project each of these three look very different right But these three are given to a client and she asked the client Tell me what about each of these speaks to you and your brand and your goals and what does not And then they iterate through these small things. These are single pages They iterate through these smaller things and eventually arrive at a proper visual design So it's more faster. It's more agile and you get the big stuff out of the way type colors Without having to build a full comp Here are three links that are very useful They all begin with bit.ly and they end with collab with clients mood board style tiles And this presentation will be available to download on the london site later So if you don't want to write all this stuff down right now, you can Wait just a little bit longer And adam Okay, so we we spent a lot of time in theoretical world and we're gonna now move into the real world and We put together this case study for a client of think so's and four kitchens called expeditionary learning And we're going to sort of show you how this whole process played out for this one particular project So who are these people it's going to help you to know who they are as we go through expeditionary learning They're an education reform organization in the u.s. And they partner with schools And districts and school boards to reform the curriculum of schools and retrain teachers and basically From top to bottom they they orchestrate the entire learning experience So if you have a school that's not working how it should or it's a brand new school That's being founded You can bring in expeditionary learning and they will reform the entire process of learning at that school And el who I'll call them from now on to save myself From saying expeditionary learning They partnered with think so And brought in four kitchens later to relaunch their brand and redo their website So for some background, this is the previous logo for expeditionary learning The name was really long. It's those five words I don't I don't think I've ever seen the name of organization take up this much space They were An offshoot of a u.s. Based organization called outward bound which is all about developing Leadership in children by taking them on camping trips and basically doing things outdoors So the expeditionary learning at first had this reference to the compass rose Which is an important symbol for outward bound In their original logo But a lot of sort of problems for them with this logo not just the length of the name But it was very hard to reproduce and a lot of printed materials because the logo has a lot of fiddly and tiny details But this is where they started And this was the website that they started with It's not it's not the most terrible starting website. I've ever seen but it's it's clearly From the 90s The nav is is not too It's not too long the architecture seems to sort of make sense at first glance It's it's clean. I guess you could say but it definitely doesn't project the sort of professional and practiced and established image that expeditionary learning wanted to Convey to the outside world So here's the results of the rebrand we did for them. This is the new logo we developed it's The key symbol in this logo is this chevron shaped Crimson signpost we ended up calling it and this signpost symbol was A forward-looking arrow It it has all those connotations of building for the future and training the next generation of students Kind of baked into it. It's it's also supposed to be reminiscent and allude back to The outward bound legacy or the roots that el has as a part of their dna Because it it kind of would resemble perhaps a sign you might see on a hiking trail at a trailhead that's pointing you in the right direction You want to go? We also baked in some tiny details to the e you can see the the The inside of the e and the point of the e is kind of referencing a half compass in there It's not something that anyone who sees this at first glance ever notices, but el had a few hang-ups about Distancing themselves too much from their heritage and that was a nice Way that we could bake that in without having it be to kind of hit you over the head with where they came from And the the type base we chose is a lot more modern and progressive. It's din condensed And we used it in all caps for the name and it was set just like that I just want to show you a couple applications to kind of give you a sense of how the design system evolved Here's their business cards and these are sitting on top of a folder So we we took that symbol and blew it up and used it big where it made sense It's kind of varnished in some clear varnish on the top of this folder and the symbol kind of got to stand on its own And be celebrated kind of decoupled from the name on the business cards And it also kind of handily points the way to the relevant contact information Which was a good thing We also got to make flags if anyone's ever made a flag Or hasn't made a flag. It's awesome. It's awesome to make a logo That's eight feet wide and flies up in the air with wind rippling and dramatic music And it sort of translated very nicely Into a flag design and and we showed this to them and they immediately glommed on to the idea that they could fly this flag On the staff of the schools that are part of the el network and the el organization Now we did a launch brochure So when the brand first launched we wanted to create a piece that really celebrated it and introduced the new brand to all of the teachers principals school Designers it's a their term for the the people who actually go train the new teachers Everyone in their network basically that would would be part of the this new el that we were developing Get them excited about it Show them what the new messages we were creating the new I guess the new dna that would make up the el brand We made this launch piece that was a it was like tabloid newspaper size and it went out to everyone in the el network And we also created some field journals and these got passed out to the students in el schools the thing that is really unique about their approach to learning is the example I use is is In my public school Growing up we would learn our sort of bird anatomy from the biology textbook But if you're a student in an el school what you do is You go outside of the classroom and you do your own survey of all the birds in your immediate area You take that data back You meet with ornithologists or people at the local museum to kind of Help you process your data and you pack that all together and eventually present A field guide of the birds of your immediate neighborhood complete with drawings and paintings It sounds really awesome And maybe you want to go back to school every time that we talked to them about what the student experience was like And we made these field journals for the students because it spoke directly to that attitude of Let's get out of the classroom and go experience things and and learn in context Instead of just reading from books But then we had to address this website and what were we going to do? And how did that work out? So we have our our handy scale of theory versus practice Here's the theory side. This is the steps. We've talked about it all made sense. It seemed to proceed logically from Beginning to end everything was built on the thing before But unfortunately for this project what happened was We're starting at okay. We're defining the site But then we're doing visual design. We had to do We had to sell the brand and develop directions visual design directions to get el to choose which way they were going to go We ended up doing I think three different directions before they settled on one and part of that was Doing a lot of visual design up front to show how the different options we were showing them would eventually be applied For the website specifically We didn't yet have a development partner at the table or a cms in mind So we started on visual design first, which has definitely made it harder down the road as you'll see Then we chose our platform Then we translated into Drupal speak with the help of four kitchens and Todd and his team And then we went back and revisited some of the decisions We made in the site definition process And some of the decisions we made in the visual design because we ended up because we didn't have Drupal in mind And uh, we didn't sort of do things in the right order. We ended up designing things that were either Not possible to do in Drupal or really expensive And would not have been the best use of el's budget to actually execute So i'm going to take you through uh step one We defined the el site and and we talked about goals and requirements These are the basic goals for the site we were setting out to do It's mainly to communicate el's mission vision and methods We wanted to of course translate this new brand identity that everyone was excited about to the web and do it justice And uh, we had another mandate to create and design secure online tools for all of el's teachers That would help them collaborate with each other and plan their lessons and and basically implement the unique Approach to learning that this organization takes We then decided on the audience so these are just some of the personas we developed. I think we ended up with seven The important thing to notice here is that we tried to Represent all of el's audiences in these personas And that meant using people of all different ages genders races backgrounds we had a mix of students teachers principles Policy makers public figures. We ended up with sort of a very nice representative set of personas that helped guide us through the rest of the project Now we then moved to content Because we didn't have a partner at the table yet We we kind of skipped the content type step, which is something that would be have night would have been nice to have done at this point But we went right to Site map and here's the side map we created and as you can see it was very uh large and complicated As far as how it tracks to the goals we mentioned previously sort of all of this stuff over here was all about communicating the mission to el's core audiences And over there was the secure online tools Another kind of pitfall of this process Was that what looks like a very simple column of information that looks simple secure online tools There's six things how hard could that be to execute and build? Well, it turns out if we had fast forwarded we would see that just one of these tools Which we called the planner is actually more accurately represented by these These 15 boxes interconnected boxes over here, and that's just um We just didn't know at first What we were going to be getting ourselves into and so it would have also helped to have been able to see that Before we proceeded So how are people going to experience the site we wanted to do wireframes of course and we this is a look at What our wireframes look like These are we're mostly concerned with content But I can see that i'm doing those things that I need to do And defining those elements I need to define I have my main nav sort of Demonstrated here. I have some section nav over here. I have second secondary nav up top There's not much user interface going on on this particular page I know I have a search bar up in the secondary nav But aside from that this example doesn't really have much user interface elements determined I can also see from here that I am Developing a hierarchy of information on my page. So I have my page title and intro I can assume that on pages of the site. There's going to be some sort of large Big picture introductory message when I get to a page of content I have my main content underneath and I'm going to have some sidebar ancillary information over to the right So that those wireframes were for the Mission and vision part of the site we ended up in this process Actually working on the online tools and the mission and vision stuff separately And so we did another wireframe process that was only dedicated to the interactive tools we wanted to develop And this is literally how those tools started before we came to el These were the tools that their teachers were using to plan lessons, right? They were actually pieces of paper they would print out and they would fill in all the boxes um All the red scribbles were my notes from Hours of conversations with people inside el that that basically had to explain to me how they used these what their terminology was How they fit within their usual process This is what they look like and they're the way el structures its Learning is that you have what's called a learning expedition. That's the big long-term thing students working on You have a project A learning expedition might be made up of three different projects And then you have an individual lesson that tells a teacher what they're doing on a particular day And so these things have a hierarchical relationship to each other Now here's a look at what the wireframes look like for these tools. They're they're a little bit more detailed As you can see from the others from a user interface perspective We ended up Creating a whole deck of these That basically represented every screen and every interface you would see While you were using these project planning tools And the reason we did that Is so that when we eventually had our development partner We would have a serious handbook that we could sit down with them and say This is exactly what we need to build and we need your help to build it So it was it ended up being really useful for four kitchens to have this kind of bible that they could refer to when it was Time to think about how they were going to approach the project and actually to guide them through the actual build phase We also made some process flow diagrams Todd alluded to these earlier, but we didn't really touch on them in any detail We just created some diagrams that Gave a little bit more background on some of the aspects of the wireframes that might not be totally apparent on first glance So we wanted to for example Illustrate how when a teacher goes into the tool to create a new learning expedition These are the steps they would follow Just to help the developer and el understand the workflow From logging in to yes, I've created a new expedition We then were fortunate enough to get to do some usability testing and for this client We ended up right there on the continuum paper prototypes We we had this handy Deck of wireframes we created and we just printed those out on large sheets of paper And went to their national conference and sat in a room with EL teachers between the sessions and gave them a list of tasks to do you know create a learning expedition Link this project with this expedition you already created Email a link to this project you made to to someone else in the network And we observed what they did And we would act as kind of the human computer basically putting down the new sheet of paper That corresponded to the screen they would see and they would use their finger as the mouse pointer And sort of talk talk us through their thought process out loud And it ended up being really valuable to do we sort of were validated And got to see that a lot of the decisions we had made Were actually corresponding to the teacher's mental model of what the experience should be And the feedback from those sessions was really really positive There were also a few pitfalls that we didn't notice or assumptions we had made That they brought up that were really great to know about and That's something that seems to always happen with usability testing something you you think is really obvious Because you're so close to the project and every aspect of it ends up not being obvious for a real person That's using your stuff. So Fortunately, we were able to correct those mistakes early on So we We defined the site. We have our complete definition now. We can actually do visual design This is this became step two in our kind of not so smooth process But this is what the site looks like and you can see our Kind of branding goals how these are tracking to this visual design We have our logo nicely and prominently positioned at the top left We have our typography figuring prominently in the main navigation We ended up using the Signpost a little pointer as a prominent element on a lot of design Like you saw before but on the website in specific We used it to contain the tagline that we developed for expeditionary learning We get a sense of the imagery here We we knew we wanted images that would communicate the emotional experience of students at el schools We thought those would be The best way to sell what el is all about. Let's show the kids in their environment Learning and show sort of the joy and the actual pride and what you're doing that comes from being in an el school And this page also gives you a sense of how we're applying Color throughout the brand crimson is a very signature color that came through Actually because el was originally conceived at the harvard school of education So we wanted to sort of make another nod to that part of their legacy and this heavy use of crimson, which is one of harvard university's signature colors We also developed a grid so we knew in a design this complicated and robust with The many many layouts we're going to have to execute We want a nice strong grid in place and that's what that grid looked like Something that I did for this project that I don't always do is Create a baseline grid also and try to have every every element every image every piece of typography every bit of white space kind of conform to Lines of this baseline grid to really set up a nice strong rhythm as you move down the page it's something that Is not easy to do online and it's it's not something I always end up thinking is Useful or the better said you might spend time better this time better spend on other aspects of the design Than implementing a strict baseline grid because the web as we know is not print. So some of these Things don't always translate in the web world. I'm not totally 100 convinced that um, it's necessary But for this site we did it and ended up being good, uh, though it was it was hard to do And I wouldn't necessarily do it for every site that um, we work on Here's a look at the different layouts. We ended up creating. So we have our home page here on the left We have a landing page layout on the right and sorry in the middle and we have an interior page Layout on the right and you can see sort of what we're starting to do with the signpost in particular Is it it stays on the page as we move to different levels of the site But it's it's performing almost a wayfinding function for you So on the home page, it's very large on the landing page It's a little bit smaller but still containing the title of the page that you're on And then when you get to an interior page, it's actually used as the highlighting element in the sub navigation on the left So it's this reinforced signal along with the red Of this is exactly where I am in this site. That's comprised of a a whole bunch of content Uh, we also do kind of a step down thing with the imagery to sort of indicate that you're getting Deeper and into more detail oriented areas. So I have big image on the home page I still have an image on primary landing pages But once I get inside the site that image goes away and we just have the title So sort of at first glance These pages look like the level that you're on and your sort of web reading navigation experience This is just a closer look at how that landing page Works and looks like here's more of the imagery I was talking about we try to Emphasize college readiness. That's one of el's real themes. They they want to show that their Way of learning which is kind of unorthodox Actually prepare students for college Just as well as as any other approach would or and even better in many cases And so we wanted to sort of incorporate that idea into the imagery we were using I can see here if I check back to my wireframe I created that I'm tracking pretty well to all the elements I've already laid out so because we did A kind of detailed and good job with these wireframes making sure that all of our Tees were crossed and our eyes were dotted that I know when I get to visual design This is exactly what I have to account for and And so I can just see that yes, I'm doing that In addition to those three main layouts we had other kind of unique Unique interface elements or types of pages that needed some additional Design work we couldn't we couldn't have just handed off those three comps to developer and say go build stuff because we had things like a blog with extra categories and the the Different pieces of information that a blog post needs that a regular page doesn't need that we have to account for what do comments look like Where are categories housed? Is it in a footer? Is it off to the side? How does that navigation that the blog would use that other pages wouldn't use appear on the blog pages? now we also had a image gallery so This part of the site was a showcase for These student projects that el students have done They they really felt that that part of their curriculum really shows off their approach So we created a special section of the site to showcase that work and this is what the galleries look like And there were other elements and graphics on the page like this data driven Stuff charts and graphs that kind of reinforced that yes our approach works that we had to decide What do these things look like? And we had those online tools we talked about those those needed all their own interface work in addition to all the stuff we already showed and This is what one of the landing pages on one of those tools look like with easy ways to browse and search a library of documents And you could of course click in and see information about particular documents and share them and rate them et cetera And at this point we ended up choosing Drupal for el we weren't Totally sure that that was how it was going to work out But after initial conversations with those trusted people that you call up and say hey, I have this site i'm working on This is what it's about Who do you think I should go to for this? It ended up more people than not said this is a perfect Drupal project And that's how we ended up choosing Drupal and eventually finding Todd at four kitchens So as you can tell um Think so adam and think so did a tremendous amount of work before it was handed off to somebody who now has to implement all of this Stuff that you've seen it was It was great for us Because it gave us a lot of materials to work with we had very few questions for them because they had already asked all The questions of the client we saw all these Decks of wireframes and visual designs and process flow diagrams and all of this reasoning and all of this thought And we knew that we were in good hands So everything was well explained and well defined So what was left for us to do besides building the site was translating everything that they had just done into Drupal speak So now we're going to have to think about everything that they've done in terms of Drupal Ideally, we would have done this throughout the process, but uh, we had to take a step back And look at the wireframe So we saw these things across the top and we asked them Hey, what's what's going on here and think so came back and said all those are the sections of the site Okay section so I hear sections right I run that through my little Drupal filter And I know that it's probably going to have the primary menu item That'll probably be the primary menu item somewhere And that we may use say the context module to define The a context that is the section So when we're in a section of the site a certain context is active A context is a is a module for Drupal by the way if you're not aware So we took another look at the site map and we said what are these things down here below the the section titles And think so and yell came back and said well those are the section landing pages So each section has a landing page of some sort without exception So we heard section landing pages and we run that through our little Drupal speak filter and we think well, maybe it's panels Maybe it's a view But we do know that it's going to have a secondary menu that is specific to that section So when you land on a secondary when you land on a section and you're on a section landing page There's going to be a unique menu to navigate just that part of the site And here's an example of one of those landing pages So Looking up here, um, you know, we're looking for Drupal components of this part How do we how do we translate this visual design into Drupal speak? We see the logo, right? Everybody knows the logo variable Uh breadcrum they'd put that in the design. There's the search box So we're going to be using the search module or Apache solar or something like that Uh, we take a look at the um These links across the top and we know that those are our primary links because they correspond to the section titles that we saw in the site map We see this thing on the left and we know Looking through various design comps that these are changing these items in this left hand nav are changing So these are unique for each section. That's our secondary menu or secondary links Uh across the top, there's another kind of menu, but it's the same throughout the site no matter where you are So we decided that that's going to be a menu inside of a block If we scroll down the page a bit, we start to look at the content And we see this thing at the top and then there's this thing And that thing And it looks like a whole bunch of blocks Maybe So who here knows what we use to assemble a whole bunch of blocks? There's lots of options these days, but what's the most popular one? Panels anybody, okay, so we thought this is a panel, right? This is a panel filled with blocks That's what the section landing pages are going to be So let's pretend we're clicking on what we do Here's an interior page and we look at this thing and we don't really see anything all that special about this Interior page. We see a lot of text. We see a little pullout quote here But that's that's pretty much it nothing all that special. So we think this is just a page node easy So to break this down We know that this whole thing This this top level item the landing page all the content below it is what they call a section Which means we call it a primary menu item within a context They say that that is a section landing page We know that it's a panel because we saw the wire frames in the visual design These things below it are the section sub pages and we translate that as secondary menu items And we know from talking to them that they're all going to be static content. So they're all page nodes Uh, and finally we uh, we had to revise a lot of the site definition and a lot of the elements in the visual design Because they had chosen Drupal at a stage that wasn't necessarily optimal But sometimes that's just how life is so we went back and did some short iterations on how we can Drupalize this This design so that we can implement it faster and and cheaper So speaking of faster and cheaper. Let's also try to make things a little bit better I want to give everybody some practical advice on some of the things that we do in order to accelerate the The design and implementation phase of the process Uh, the first is to design on a grid If you've been to design school, this is obvious But a lot of designers come into the web design world and have not heard of grid based design I want to give you an example now How many americans are in the audience? All right, do you recognize this? No, how about now? Have you ever been to a national park? It's the unigrid system. It was developed by Massimo Vignelli An italian designer This for the national park service in the united states The idea was to create a reusable Unified grid system to print out brochures on the thousands of national monuments and parks in the united states to minimize cost So the idea is backing up here You could have the washington monument the lincoln memorial the grand canyon all of these things printed in one unified design But there's tons of flexibility here You can make all of them look different, but they're printed on the same press on the same paper with the same size And you can cut them into halves and quarters and eighths and all kinds of stuff They wanted to uh, create something that was very efficient to print Here's another example of uh, well, this is an example of grid based design on the web This is the personal homepage of koi vin who designed new yorktimes.com And uh, he also does a lot of work with mark bolton who did uh, who's responsible for the design for drupal.org and the rebranding Um, and this is an example of this pink here represents the columns within a grid based design Grid based design is going to save you time It's going to save you money and it's going to reduce frustration and what I mean is it's faster to do Uh, it provides a a very specific restriction to work within so that you know your design is going to be of a certain width You know that you're going to have units of measurement of certain widths You don't have an entirely blank canvas to work in The restraints in this case free you So therefore it's going to save you time and it's going to reduce frustration because if designers all use grid systems We can pass our work among each other and better understand Uh, what was done so that we don't have to go decode all of that css and all of that markup that was written a year ago By somebody else and it's going to be a lot easier to revisit your own projects if you stick with some kind of a general grid design philosophy So for just a moment, I want to meditate on on this picture This is one of my favorite examples of of constraints So here the shop owner has embraced the constraint of having a small space above the door to put a sign And instead of putting some smaller open sign They've done something creative and they're still communicating open But it makes passersby stop and think because they see those letters and they think oh, I get it open That's that's clever. That's funny Imagine how many more people are likely to be interested in that store because that shop owner Embrace that constraint so constraints are going to narrow the scope of the design and encourage that kind of creativity Enforcing a grid accelerates design while maintaining order Very quickly a good example of this is the 960 grid system 960.gs. There's a Drupal theme You probably recognize the 960 grid system because that is what powers Drupal.org Don't start at zero start at Drupal And what I mean by that is we need to increase our Drupal speak vocabulary Earlier when I was talking about translating things into Drupal speak if you have a larger Drupal speak vocabulary You can translate visual designs and wireframes much faster because you have more words to describe that And what I mean is understand obviously all the things in core But there's all kinds of modules in core that nobody ever uses So maybe they would be useful to you if you'd enable them and play with them and understand what they do Understand default blocks and menus and theme regions and variables and stuff like that do some research Understand the default output and styling of Drupal It's very easy to take a look at the default markup in css in Drupal 7 because of the stark theme It's in core. You can just enable this thing look at the source That's all the stuff that Drupal and contrib modules is spitting out by default So before you have to go override anything understand what it is that It's doing by default you can download it for six Here and again this these slides will be up later. So I'm going to kind of blow through the links This is what it looks like. It's ugly. The important part is not on the left The important part is on the right the source code. That's what you want to look at and understand Something that a lot of people forget about is that little little tiny modules can save you all kinds of time So if you're running into some kind of a theming challenge chances are other people have done it And they've solved it and they put it on Drupal.org But the trick is having to find it right and there are thousands and thousands of modules out there I want to give you a quick example So back in the Drupal six days and this is still sort of an issue in Drupal seven We have this thing called cck which is fields in Drupal seven By default it outputs all of the the stuff in their own divs And so they just stack on top of each other and that's not particularly all that interesting You can do inline, but then you just have a bunch of spans What if you want to do, you know comma separated stuff? So if you wanted to do a comma separated list you'd have to overwrite Overwrite a theme the field template file write some php to iterate through all of those items in the array Spit them out do an implode With a comma separation and it gets even more complicated if you need to do comma and right this that and the other What if you want that kind of list then you have to have a counter and then you have to insert and at the end And it just gets complicated php wise There's got to be a better way right and there is it's called the text formatter module It's this tiny little module that you can download and enable and it gives you all these cool options So now instead of the default plain text trimmed you also get commas commas and commas and period unordered list ordered list This seems pretty easy right, but you enable this in display fields. You change it to commas And you're done It's just a tiny little module, but if you didn't know to google for text formatter or whatever It would be very hard to find right and that's a challenge that we have in the Drupal community Um There's a page on Drupal dot org Drupal dot org slash project slash modules That's the main modules listing page the two takeaways. There are is that there's a pretty decent searching and filtering system there that you can try Apart from just using google, which is the obvious solution You can try using this filtering system, but it also lists the most popular modules in order So if you go to that page, you're going to see all the popular modules And chances are all the big ones you're going to need to use to increase your Drupal speak vocabulary will be on that page Also lullabot does a cool feature on their blog called module mondays So every monday they talk about a module and you can learn all about what it does and what it can do It's part of their main blog. Unfortunately, there's not a link to go directly to that term or that category But you can just read their blog every monday So the the last thought we'll leave you with before we wrap up is about designing for change and um The main rules for designing for change are to minimize your templates The el site had a lot of templates that we worked with Actually, there were there were three main templates those had a lot of variables within them, but because we Minimize that as much as we could it meant there was less maintenance Going forward when we had to change something or implement something new It also is a great thing to have consistent styling and this goes to todd's grid system point And also writing your css in an efficient way and doing visual design on elements that repeat Having those things all be in sync and reference each other and building on the same systems So you can quickly create extensions of layout patterns or or individual interface elements that you've already done It also lets people see a new thing on the site and Instantly have an idea of how to use it because they've seen it somewhere else before or something much like it Part of that is of course creating a robust default template Something that happens down the line is the client or site admin wants to create something new that you might have not have accounted for So if you as the designer make sure you have Come up with design or specified rules and guidelines for all of the elements that might happen down the road You won't run into an issue where someone wants to create something and oops. There's no design for it Other things that might happen is you want to consider accommodating content of any length It's great when your design is robust enough to handle titles that break to two lines Or even Navigation sorry about that. We're going to expand navigation If your navigation increases by an extra item if you started with five you have six what's going to happen to your design If you haven't been thinking about these things ahead Then bad visual things happen The sometimes the answer is navigation can't increase But the important point is that you as the designer have anticipated that that might happen and have come up with an answer for it And these all these things happen because these sites we're designing are No longer pages right we talked about at the very beginning. It's not just six pages Of a site the site is a very large system Of all interacting components and software This is the the main point Todd made at the very beginning and because everyone in this room is a designer We're really the ones responsible for that system where its primary architects and all the decisions we make End up impacting everything down the road. So thank you for your time Looks like we hit an hour exactly. So if anybody has any questions We're going to be up here for just a couple of minutes, but we're going to have to run somewhere else pretty soon You can catch us in the hall or if you just see us Grab us ask us questions and you can follow us Do you have a twitter account? I don't even know. Well, look us up somehow. Thank you