Episode 178 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews Giovanni Difeterici (@giodif) about his new book for SitePoint, The Web Designer’s Roadmap.
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
SitePoint Podcast #178: Web Design Process and Creativity with Giovanni Difeterici(MP3, 26:02, 25MB)
Episode Summary
Louis and Giovanni talk about what the book covers, and how Giovanni interviewed a number of great designers to get a wide breadth of views and methods of working.
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/178.
Interview Transcript
Louis: Hello and welcome to another episode of the SitePoint podcast. This week on the show I have an interview with the author of SitePoint’s latest book, “The Web Designer’s Roadmap,” Giovanni Difeterici. Hi and welcome to the show, Giovanni.
Giovanni: Hey, how are you, nice to meet you.
Louis: I’m very well, how are you?
Giovanni: Great, great, we’ve been having a lot of storms here lately but it’s been a good time to work.
Louis: That’s good. I wanted to have you on the show mostly because you have a book that just came out and I wanted to talk about it a bit because it’s a little bit different from a lot of books that’s SitePoint’s had in the past and I thought there’d be a lot of material for conversation there.
Giovanni: Sure.
Louis: So the book is called the Web Designer’s Roadmap. Do you want to just explain a little bit about what the title means and what people can expect to find in the book?
Giovanni: Sure, we went back and forth about the title a number of times and settled on the Web Designer’s Roadmap because the book is about all the way up to the point right before you do your markup, everything from discovery to mockups. And I like to think of it as two things, as the practical, procedural steps that you take to get something done so you can communicate effectively with clients and with other people that you’re working on, but at the exact same time you’re doing this creative process whereby you’re trying to invent interesting ways of communicating ideas and interactions and all of those things. So there’s these two simultaneous processes. I wanted to write a book that talked about both of those things and how they work together, so that’s really what the book is about.
Louis: Right, I remember talking with some of the people in the SitePoint office while the book was in development, it was just called the Process Book, and I guess it didn’t have a title at that point.
Giovanni: No, well like I said, it really evolved kind of like what the book was about evolved as we worked on it. I think the first working title was like “Digital Inspiration” or something like that, and it became much more a deeper sort of book about ideas, and as that changed, the title went through a few iterations and eventually settled on the Web Designer’s Roadmap.
Louis: Right. We’ll talk a bit more about the book itself later, but maybe for the moment we can just start off by talking about what are those key elements of process and how do you view the way that you do design.
Giovanni: I think that it breaks into two sort of broad phases. The first of which is an information gathering phase, it’s the pre-design phase, and that has everything to do from discovery where you’re learning about your client and their competitors in the industry and the information and related to it, to putting together content with the client, to gathering design materials. So everything from producing materials that you use to communicate, design ideas with a client like mood boards, and some of the stuff that Samantha Warren is bringing in, she has style tiles. So we’ve started using style tiles and I really think it’s an excellent way of approaching system design as opposed to mockups.
Louis: Sure. I’m not familiar with style tiles, do you want to describe a little bit what is meant by that?
Giovanni: Sure, yeah, so first off all, it’s Samantha Warren’s idea, not mine, so props to her for kind of pushing that in the industry. But basically it’s sort of a marriage of a formal Photoshop mockup and a mood board. Instead of designing a page layout that incorporates multiple elements like the button treatments and text treatments and specific design elements that will work through it, it’s a formal document that is structured so that it shows all of those elements without actually being a specific layout design.
So it kind of takes the idea of something like a mood board where you’re just sort of showing people design ideas and directions and the tone of things and different elements in a completely unstructured way, and having a mockup which is completely structured, incorporates content and is an actual quote unquote pixel perfect representation of what a page will actually look like, and it takes the good qualities from both of those things and it allows you to create a system for designing pages in the future. And I really, really think it’s a great way of approaching something like web design.
So traditionally you might do a homepage mockup and a generic subpage and then some specialty pages like forms or some specific functionality, and you use those and then if you have other pages or somebody comes after you has pages, they would extrapolate from those, they would pull different elements out of them or maybe when the design is marked up, it’s done as specific template pieces or something like that. So you’re taking these elements and you’re pulling them out to make new pages.
Well, style tile is basically take that idea and put it at the forefront, that there are all these little elements, text treatments, button treatments, interactive elements, tone, all of that stuff, and there’s a formal structure document that is consistent from project to project that explains how all those things are used.
Louis: Right. And is the idea in the step of gathering feedback for example, either from either team members or from clients, to sort of divorce the treatment of any individual item or general feeling or tone from questions of layout or content or page structure and really try and focus the feedback on the one item at hand?
Giovanni: Yeah, I think all the predesigned stuff, for me, is you’re creating documents and visual representations of ideas so that you can effectively communicate with other people. And yeah, I think that you want to divorce design, tone and content choices from specific page layouts. I think that early on, you want to get all the pieces right and the page layout is secondary, I think that a lot of designers tend to focus on laying out webpages above all else. I think that that’s a very small part of what it takes to actually be a web designer.
In my mind, I’ve done a bunch of interviews with people, and talking to Daniel Burka especially, and a couple of other people, but the idea that a web designer or that a designer in general does more than just make things look pretty, you’re basically a product designer. So every aspect of design from communication to tone to the actual product itself, and generally the product is a website, all of those things are really important, the structure of the website, the architecture of it, all of those things are as important as the visual elements.
And so yeah, I think that a lot of that communication is that so everyone gets on the same page about what it is that you’re actually designing. Because the page layout and the prettiness of it is completely secondary to the actual product itself.
Louis: Right. Okay so that’s what you were referring to as the early, first phase, discovery, communication, gathering information that you need in order to make informed design choices. Where would you usually go from there?
Giovanni: To me, once all of those decisions have been made, once there’s a clear understanding of what it is you are actually trying to design, then you go into the formal design process where you can really start thinking about page layout and interactions and things like that, which are equally important because once you have your message, you have to be able to communicate that message properly. So I think thinking about the design process in that way, you have your deciding what your message is, and then figuring out how to communicate that message properly. So the second sort of general, large phase is actually design the stuff.
Louis: Right. That’s interesting because it’s sort of, I’m not a designer, I’m a developer, it’s sort of the opposite direction from what I would think to do if I were sitting about, trying to design something, which is that I would sort of start with putting things on a page, then gradually working towards the detail, rather than getting all the detail hammered out and then assemble those finely crafted pieces into a design.
Giovanni: Well, it’s actually like, in the early phases when I talk about figuring everything out, it has more to do with figuring out not all of the necessary specific little design elements, but I mean the product itself, what is the content, what is it that you’re trying to communicate, what are the goals of the website. All of those big, fundamental questions, you create a bunch of things just so you can communicate back and forth with the client and with each other about figuring out all that kind of stuff.
And so, at least for me, design is about really understanding all of those key elements, the message and the content, and the intent of the website and its purpose, and what are its goals and objectives. Those things are fundamental in terms of gathering information about what the site is actually about. Then the second phase is about figuring out how to effectively communicate all of those things.
So I think that, I do development too, I would say 30% of my time is spent developing, but I think it’s important to figure out, even with development it’s important to know what it is that you’re making. Those are the kinds of questions that I think are key to answering. I don’t think it’s too different. The processes are similar it’s just that the goals of those processes are slightly different, so there are some differences.
Louis: Right, so you were talking a little bit there about the idea of collecting information, figuring out what the content needs to be and how it needs to communicate with the users. At what stage does user research or early prototype, user testing fit into your process?
Giovanni: Well, I kind of believe that you want to get things out as quickly as possible, but I accept the notion that whenever we’re designing things, we initially have to make a lot of assumptions what we think users are going to want and do, and then sort of after the fact, no matter how you approach it, you’re going to have to test those assumptions.
Honestly, in a very practical way, it has a lot to do with whether or not your budget allows that sort of thing. I think that most times for even small shops, medium shops and sometimes large shops, there’s not a lot of user testing before you actually launch something. I think sometimes you have to make a lot of assumptions, build it and then see whether or not those assumptions are correct.
So with the book, there’s not a lot of discussion talked about testing within this specific process because I think that for most people, the testing process is going to happen once there’s something built that people can actually use. And I think that’s okay, because in my opinion every website is a living document, and just because you “finish it”, it’s not done, it’s just the first iteration of it. So ideally you’d even be testing content, things like that, as soon as possible, but I don’t think most people actually get that opportunity.
So the way I try to look at it is from a practical standpoint. Most designers, freelancers, people like that, will generally have to make something, complete their design, get it out on the web, and then try to document how people use it from then on. This process can be repeated iteratively to improve on those things.
Louis: Right. Another thing I wanted to touch on, this is shifting gears a little bit here, but in recent years, obviously the work of web designers has changed considerably because we need to spend a lot more time thinking about the mobile user experience, and I was curious to know what your views are with respect to how that fits into your process and what your approach is when working on something that either needs to have a mobile component or needs to be a responsive design.
Giovanni: Well, my basic opinion is that everything needs to be responsive or mobile. If you look at statistics, more and more people are viewing websites from some sort of mobile device, be it a tablet or a phone, and most designs intended for screens don’t function that well on smaller devices, so I personally believe that these days most websites need to be responsive. But there are some cases where there needs to be some sort of mobile site as opposed to a responsive site.
I work at a web shop called Period-Three, and the way that we work is to basically assume that every website, it’s just part of our client services process, every website is responsive now. And so we always try to consider that when designing. The way that I design is to sort of design the full screen layout, but then when I mark it up, I start with the mobile design and kind of work up.
We use men with media queries so I always start with the mobile site and work it up. But I try to think about everything so that you’re never dropping content out for smaller screens or any of that kind of stuff, the only things that gets dropped out for smaller devices is ancillary graphics and things like that, because I think that any content that belongs on a full screen site belongs on the mobile site as well.
I think that some people are still at that point where they design for the desktop and then they think about mobile afterwards. It’s like something they tack on. But in my opinion, it can’t be something that you tack on, it has to be an integral part of your process, from the very beginning you have to acknowledge that there needs to be a mobile component and it’s very likely going to be a responsive design.
But again, when it comes to responsive, a lot of considerations you have to make are technical and they have to do with layout. And I think that when you’re in that first phase and you’re discovering exactly what it is that you’re designing and what its intended purpose is and who its intended audience is, and what the message is, those technical considerations aren’t as important in that early phase.
But it really becomes very, very important when you actually start designing the layout of the page, because knowing your markup and how it’s going to flow, and how break points are going to affect it, is actually very important. But it’s not as important from the early discovery phase, except in the sense that you have to know what it is you’re designing and who you’re designing for and how it’ll be used, because if you have a website that will be used primarily on mobile devices, then that becomes a huge, huge consideration even very, very early on.
Louis: Right. And do you find that this approach of thinking about the mobile experience or the responsiveness of the content earlier on in the design phase rather than tacking it on after the fact, does that result in design decisions, one way or another that affect the final product that you end up with even for the desktop?
For example, do you find that you’ll omit pieces of content from pages or thinking about what’s going to go on this page, the fact that you’re thinking about the mobile experience early on means that you sort of have to pare that down and make your page a little more focused than you would if you thought you had all the space in the world.
Giovanni: Yeah, honestly, I’m of the opinion that if you have some sort of desktop experience that is just terrible for mobile then it might mean that your considerations for the desktop experience are actually maybe not as focused as they could be. So yeah, I do think that it makes a great deal of difference. I think it has affected people aesthetically just because there’s sort of this belief that one page, one topic. I don’t necessarily agree with that but I do think that there’s sort of a trend now of reducing the content on pages so that it is appropriate for mobile. But it’s tough, we’re at a very tough position right now. Honestly, no one is very good at this, everything is a little wonky, even some sort of responsive design patterns feel a little contrived to me. They can be a little hard to understand for people who have approached it for the first time.
But it’s just kind of tough to be in a position right now because we’re still trying to figure out exactly what it means to design for multiple screens. And now we have a high-pixel density monitors that are even bigger, the disparity between mobile and large desktop is so incredibly massive now that yeah, it presents these problems. But I think that really considering the mobile experience early on will affect your decisions for desktop design, definitely.
Louis: I’m going to shift gears again and maybe ask you a few questions about the book. You did briefly mention that you did a bunch of interviews for this book and I thought that was interesting because it’s not something that you hear about really frequently with regards to web design books, a lot of times it’s just people sort of writing about what their opinions are with regards to design or what their process is or some basic theory about design practice. But in your case, you went out and talked to a lot of people to gather information about how they approach design.
Giovanni: Like I said, I wanted this to be a book about ideas, I wanted it to be not only about the practical design process, but also the creative process. I have my opinions about how that should work and what works for me, but I have a particular skill set and I think a lot of other people have very different skill sets, and their approach to things can be wildly different from mine, but just as effective.
So what I decided to do was to have a set of questions that I could pose to a bunch of different people who work either differently than I do, or in different capacities from what I do. And so I did about a dozen interviews, I just did video interviews with a bunch of people, some of whom are mobile designers exclusively, Shaun Inman, he does games. I spoke to Don Norman, who is the author of The Design of Everyday Things, and a bunch of other incredible books.
He basically is a consultant now for product design, he doesn’t really have anything to do with web design these days. His partner, Jakob Nielsen, really deals with web design but I wanted to talk to somebody who doesn’t specifically deal with web design, that’s why I spoke to Shaun Inman about his game design stuff. These things are all related, but it really pays to take a look from different perspectives.
So I wanted to talk to all these people because I wanted their ideas to either inform my ideas or be a counterpoint to it, and I wanted to make sure that this book was not just filled with my opinion, that it was filled with a lot of ideas and a lot of other opinions, and I wanted to kind of show how all of these ideas kind of work together.
So I thought it was really important to get other people’s voices in there. I have very strong opinions about how I think things should be done, but doing these interviews really changed some of those ideas and I thought that was great and I wanted that same experience for other people.
Louis: Right. Can you give an example of something, maybe an answer that surprised you or something that changed your thinking in regards to a specific question?
Giovanni: Sure, for each interview I had two questions everyone. And then I had specific questions for each individual based upon their work or their field. And the two questions that I asked that were the same, were “What is your production process?” I wanted them to give me a blow by blow of exactly what did they do to get things done in a very practical way.
And then the second question was all about, “How do you think about problems? What is the internal dialogue that you have when you really think about these problems?” And from a few different people, I got this response which was basically, “What’s the difference?” Which really surprised me, because to me those things are very, very different.
The practical to-do list that I follow to communicate with clients and to be organized and to get things done in an efficient manner, has very little to do with my sort of internal, creative dialogue when I’m trying to figure out what it is that needs to be said, and how to say it, and how the artwork, and what is the aesthetic and all those things.
And when I spoke to some people who, like I spoke to Jessica Hische, who’s a type designer, an illustrator, and she was one of the people who was strongest in the opinion that those are exactly the same thing. That really surprised me and it made me realize that there are probably a lot of people who just from a very fundamental level do not even think about those processes in even the remotely the same way that I do.
Which really strengthened my resolve to get other people’s opinions, because I thought that that was very fundamental. The fact that the creative process and the production process are so segmented in my mind, but are completely the same thing in other people’s minds, I thought that was very fundamental.
Louis: Right, that’s truly interesting. You said you had more specifically targeted questions to each individual, can you give an example of how that would play out or what sort of information you were looking for?
Giovanni: Yeah, it really depended on who I was talking to. I talked to Shaun, Shaun Inman. He was a web designer and then he did Mint and now he’s pretty much exclusively an iOS and desktop game designer, he produces his own indie games. He came out with a game and iOS called The Last Rocket and it’s very streamlined, the aesthetic is very specific, the interactions are minimal, but sort of complex, and I found it interesting. On an interaction level, I found it really interesting.
So some of the questions I had for him was, how did he develop this set of interactions for this game, because the game has specific mechanics that make it interesting to play, but on a screen-based touch device, you’re sort of limited to gestures and apps and things like that. I just was curious how he sort of arrived at his final solutions.
And it was interesting because he just basically told me that it was trial and error, he said that he wanted to focus on a single input method, where you know there was like one input that the user could use to interact with the game, and he wanted to see what could actually be done with that.
And so there’s sort of this game that’s very narrative, specific game with a kind of really cool aesthetic and everything, but his primary interest was this very low level user interacting with a touch device where they can do one thing and it produces a set of results.
So I found that kind of interesting that he would think about it that way. It was honestly a little hard for me to understand because I tend to not think about things that way, but I think he was mostly interested in experimenting and the game was the result of his experimentation.
Louis: Right, I guess that’s a little bit less available to most web designers doing client work, to sort of just to do websites as an experiment about one method of interaction.
Giovanni: I don’t actually agree with that because I have found that designers and developers alike have this tendency to be highly invested and interested in new and emerging tools and processes and technologies and stuff. If there’s a new kind of interesting jQuery plugin that’s being passed around Twitter, then people will find a way to fit it into their project.
So that’s them wanting to learn more about something and experiment with technology and just sort of shoe-horning it into a project. It may be totally appropriate for their projects and they may be good at finding good use cases for this new thing, but I think that a primary interest is just being able to try it out.
So I think that there are some similarities between Shaun’s approach to that game and other designers and developers. Those are the parallels that I’m interested in. I think that understanding fundamentally how we think about things and how we approach them is as important to figuring out a really good process that is effective and allows you to be creative and try new things.
Louis: Right. Well Giovanni, thank you so much for taking the time to talk with me today. If listeners want to catch up with you, do you have a blog or Twitter where people can go?
Giovanni: Yeah, on Twitter and Dribbble, I’m giodif, and that’s pretty much me everywhere now. I also have my portfolio site, it’s gdefeterici.com. Oh and I’m on Unmatched Style all the time. I’m the Content and Style Editor at Unmatched Style. We put out stuff all the time and I write there all the time.
Louis: All right. And if you want to have a look at the Web Designer’s Roadmap, it’s available at SitePoint.com/books, it’s right at the top of the page.
Giovanni: Awesome.
Louis: All right, thanks again, Giovanni.
Giovanni: Thank you.
Louis: And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s sitepoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict.
The show this week was produced by Karn Broad, and I’m Louis Simoneau, thanks for listening and bye for now.
Audio Transcription by SpeechPad.
Theme music by Mike Mella.
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.
Karn Broad
