 Hello everyone How are you doing? Very good Okay, I'd like to start this session. My name is Joseph Todd and I'm a CEO of Mock Design I'm also a front-end structure for this DrupalCon Munich So I would like to take this opportunity to thank to all of previous speakers And also to you who came and support the speakers and wanted to learn some new stuff So thank you for making this conference awesome At Mock Design Mock Design is a Slavic based Drupal development company We build online communities for non-profit organizations and also for businesses and we are also very passionate about bringing Great design to Drupal We also do a lot of work at design work for Drupal community Maybe you can recognize some of the Infographics which we did we also Created a branding for Drupal 7 and also marketing materials for Drupal 7 launch and the parties which were happening around the globe I also have some of the infographics here. So feel free to come after the session and take some with you Alright, so I Told you something about myself, and I would like to hear something about yourself. So On account of three, can you please all shout your name? One two three Okay, I got some of his blood oh and his Martin. I know them because they were with me so okay How many of you are designers? Okay Themers themers are probably the biggest group developers Okay, and how many of you are business guys or project managers? Okay, anything else? Do we have any other special position here? okay, so Today I would like to talk about the strategy behind designing for CMS and in order To begin I would like to share with you my story and what different experience I have with design so Since I was kid I was always around Computers I was playing with them hacking Be us and Windows 95 or 3.1 I remember that I got a note from a teacher because we had a computer class and The computer was so slow. I tried to hack the BIOS and I screwed up some things so the teacher got angry but I became basically the guy that fixes computers for everyone in the family and It got actually so annoying that I wanted to start charge charging for phone calls which I got from my brother or father or whoever so Then next to playing Transport icon or Age of Empires are studied. I discovered Photoshop. So I was like hey, I can do some photo manipulations I did a lot of retouching. I really liked it. I'm not sure if others liked it, but I Ended up actually designing posters and flyers for different events and I got my first real job with a printing company I worked there as a print designer designing a lot of packages for different products and Eventually they asked me to design and build a website for them So this was something new to me. So I learned some HTML CSS and I put together something in Dream River so this was my very first experience with web and Then around 2004 I decided that this is something which I really like and I would like to Do it for a living. So I dive deeper in this I built some websites some static websites for some friends or local companies and After some time it got in way and I because they were always Getting back to me ask for changes do this do that. I don't like this I need to change this text and I kind of do so as I was thinking there must be something Something where they could manage the website for themselves So I found out about these CMS thing This was it was quite new for me at that time and I started to play with the many different CMS like Joomla or type of three or mottics and on the end I found some great article about how to build your first website in Drupal and Basically that changed my life So I started around time when Drupal 4 4.6 was Very fresh. It actually came out just and a few years later months later. I started to work with some Companies as a designer and a themeer and my first job with one of the that those companies was to theme three basically Exactly the same sites. They just had different colors and you know So I started working on that project in the first one took me about hundred hours to do that Then the second was about 60 hours. So I felt like okay I'm getting somewhere and then I did the last for about 35 hours and So I made some some progress and I was actually very grateful that they didn't fire me after the hundred hour project because it was certainly too long but It was great time I was working with some very Excellent Drupal developers who are many of them are core contributors or they Created a tons of modules which we use every day and I also got to the first Drupal come it was in second and in Washington we Had our first Drupal designers meet up. So it was wonderful. We Spend like five hours just discussing Drupal and talking how we could make it You know more nice because the one thing which I heard a lot at that time was that Drupal is ugly How many of you have heard this phrase? Sometimes yeah, so I knew that it's not actually true I knew that it's not about Drupal. I knew that Drupal can be used to build many wonderful websites So my usual answer to that was no, it's not Drupal. Drupal is not ugly, but the theme are so lazy and There was including me maybe but Anyways In 2009 I became I co-founded Mock design and I became a CEO in my responsibility shifted from visual design into business development, I also do a lot of user experience design and Sometimes my colleague let me also manage some project So I got yet another perspective to design so the three perspectives which I would like to talk today are From a designer from a themeer and from a CEO what I I would like to share some ideas and things which I learned and Things which I would like to know when I started to design for for Drupal Basically how to Create a successful design which is easy to theme which is cost-effective which is still Beautiful and it's meeting Clients need you know the words basically how to make everyone happy So I'd like to start from a designer perspective There will be several key points which I'd like to mention first one is the difference between print design and web design Many times Actually, it was my experience also one other design which we hire later Many come many of us come from the print design background And there are several differences which which I'd like to point out first of all first of that is that the There is a difference between the print canvas basically in the screen on which the web design is displayed the size of the print canvas, it's always the same you have the exact dimensions of newspaper or you have the poster or flyer and You can look at it in the straight at home. It always has the same dimensions But when you design a website it can be very different When you look at it on a large monitor on small when you look at it on tablet or on some mobile device So we need to Think about this perspective. How will my design look on across multiple? Devices in there and has there has been a great session about this. I believe yesterday. I encourage you to listen to that Another another difference is that For print usually designed with 300 dpi Which could be a problem if you design if you would design websites You know with 300 dpi because the files would be just very very large and it would improve affect the performance of the website also you need to take care about the Image compression you need to save the files for for the web and not you know just as a standard jpeg and Also, I encourage you to learn about the differences between jpeg and png files And I usually use jpeg when it's a lot of colors and different shapes And when it's less colors and or some transparency needed Always use png Also colors are Different for print you design with We call it SMIC in slakia But for web you design with rgb and many times You design something on a monitor and then you print it and you are scared how it will look on In the real life because the colors make the color profile of the printer may be different or whatever so You need to make sure that you use the correct formats for for what you are trying to achieve There are also some other problematic elements or things which might cause some issues and it's Shadows gradients or rounded corners or typography many of these things can create Some overhead when when actually trying to theme that and I know that with the current new technologies Might not be as big problem or it's much more flexible But it's still very good to learn about what the limitations are Another difference is When you design a poster you have the full canvas behind you the full space and you just Placed the limit elements somewhere where it will look good but when you design for a web you need to Be very precise about the positioning of the elements you need to end the best way to do that is to use grids and Mark Bolton who was a speaker at Drupal con and he also Spoke at several Drupal cons exactly about this problem. He has done a great work about it. I encourage you all to Read about it and learn about it. If you are not using grids, you are just probably in trouble Another thing which may cause problems is interactivity You usually don't How many many chances to use interactivity with interactivity when you design for print maybe you can put there some QR code or something like that, but a few years ago it it wasn't even possible But when you design for a web Then there are suddenly many elements like you can have animations you can have forums buttons you can have different jQuery effects and the key the key is to know when and How to use them and I will talk about this a little bit later So this where the difference is between print design and a web design I'd like to take some time and talk about what I consider a successful design to me it is design which where you set a goal and then you meet the expectation and How many of you are from Munich? Is there any? one for me, okay, so Maybe you don't understand this picture, but it happened in Munich and Sergio Ramos kicked the penalty and We weren't really high. So Okay, since we are in Munich. I thought that This is a good a good illustration of how the goal is not met. So First thing is you always have to think before you design Many times it happens even to me it's like okay when I hear the first for the first time about the project I suddenly have this image of this shiny website in my mind and I am in a mood Okay, let's go. I want to design. I don't want to do I don't want to talk I don't want to listen. I just want to design. I want to put this idea which I have in my mind on in the computer and work on that But it's really important that you take the time and Focus on what on the needs not on the picture in your mind Always do the research find out what is the most important thing for the client find out what is the core of his business? learn about What are the needs that he has what is the what is the even the purpose why he wants to design a website? Or why he wants to make redesign? What are the things which are not working on the current website and he wants to improve in the new version? also Find out what is the message that he wants to? To convey or to bring what is who is the target group is the website aimed for children is it for? men in between 40 to 50 years Find out what is the Thing which will eventually make the difference what will make the conversion or the point when For example, the product is sold another idea or advice is always designed for users Users are very interesting They don't like to think They basically act intuitively they scan the page and They click on the first reasonable Link which they find they're also impatient if there is something which is not working on the website if there is something where It's not working as they would like to work it if or if they say too long for them to find the information that will leave they also get very easily distracted and Your goal is a designer is to guide them and help them Keep their focus Another thing is They hate visual noise I call it a digital cost phobia and I know that my eye actually I'm very Affected with this and I feel much better when there's a lot of white noise a white space You know website. It's not very cost Coddered Users like conventional patterns basically they expect that The same task which they perform on different websites They will be able to execute on every website if they log in here They want to look in here everywhere if they have the navigation on top. They want to have the navigation on top everywhere so they are Sometimes users are like horses, you know, they have the Shields on the eyes or how you call it and they just run dire one direction which they help and The last advice which I would help for designer from the design perspective. Yes Think about Beauty versus usability Many times we think that the more awesome effects the more hot new stuff we put it to the website The more of summer it will be But in fact, it's in most of the cases. It's the exactly the opposite For me There are basically two Things which I kind of consider the holy grail of web design and that is a content Is the king and keep keep it simple stupid for me design is Just supporting element It helps users to focus on what is most important and Web its information is the content and our goal as a designers is to help them to find the shortest way to the information or to the conversion point and Use design basically to support the journey I'm not saying that you shouldn't be following latest friends or you shouldn't be trying out all the hot new stuff, but You need to find a way how to use that to support the actual user experience And one thing which we worry often as a designers for like to forget basically is that Maybe 99% of the actual visitors are not designers They don't care. In fact, if the website is In the using the latest design trends, they don't care about the colors many times about the latest cool fonts They simply want to find the information Which brought them to the website? So I would encourage you to learn about usability learn about how to creating wonderful user experience and Think about a visitor and notice a designer. So Just a real Go through again Paint design versus with versus web design What is the successful design we need to design for users? And we need to care more about usability rather than about a beauty. All right, so I'm gonna talk now about The perspective of theme er, what would I tell a designer if I was a theme er? There are several things one is there's this ongoing discussion if designer should be able to code his own designs if he should learn the CSS HTML and My answer to that is Yes Basically design is only 15 to 25 percent of the whole project As a designers who would like to think that design is the most important thing but In fact, there is this other 75 percent which from which the project consists of and in order For our designs to be successful. We must understand what the other 75 percent is So I encourage you to learn about Drupal Build the site for yourself maybe you can build your own portfolio there and Try to understand what are the the elements of Drupal? What is the theme? What are blocks? What are regions? Learn about all the new technologies that come out learn about how mobile or responsive work Talk to developers Talk to them and find I'm sorry find out how they actually use these new technologies and How they actually deliver the project how they how they operate on a day-to-day basis and Also get feedback from them Get feedback on design ask them if this fancy new stuff which you want to do if it's doable if You should change it or if it's okay like this According to Steve Krug Testing with one person a one person or one user is hundred hundred percent better than testing with known and It's true the more feedback you get the better your design can be and If you learn all this it will help you essentially to to put the elements on the place where they naturally would belong in Drupal which can make them seeming easier in many cases Probably the most common issue with designers, which I found as a teamer was in consistency Many times there is a for example a block on home page And then there is the same block on a secondary page and they look completely different Although it's the exactly the same information. It just looks different on different places on the website Or for example, just the book title has different font or different margin margin or border so If possible use the same layout for for views for blocks for headlines font size line hints and all the different Elements also try to design in a generic way For example, don't put to Don't put same block into different sidebars. It's easier when there is only one block and it's on the Same same place Keep try to keep things simple don't necessarily over complicate your design Another thing which we need to think is content navigation. How will user get from point A to B? How will how will he get from home page through? Some listing page to the detail don't miss read more links for example or breadcrumbs Also use standardized layouts Grids I use 960 grid with 12 columns. I found that working best for me Also be consistent in image sizes. Many times We just like that. There is some space. Okay, I'll fill it with some image and then on other place the same image is larger or it has a different shape and It would be just much easier if they they look the same and also I think For me as a visitor it would be also better if things look the same So the last advice which I would give as a theme or it's clean up your Photoshop file If you look at this too Pictures you'll see that there is a clear difference between the first where all the layers just have some random name They are organized as they came There is no logical Way how they are around or grouped so always name the layer always arrange them in a way how they appear in the design go from top to bottom and by specific parts header sidebar block and For example a single node also When you are designing with CS 5 or CS 6 then Maybe themers are having some older version of Photoshop and if you use too many groups nested groups The file can actually be corrupted and they might not be able to Open it all it will end up something similar like this So to summarize learn how to code your design be consistent and Always clean up after yourself. I'm getting to the third perspective, which is From the point of view of CEO of the company as a CEO there are basically two things which Which I am interested in in project. I of course want it to be successful. I want the client to be happy, but I Want that it would be cost-effective and I want that it would be delivered on time So I'll jump to cost effectiveness first As I said design is 15 to 25 percent of the time but what is important is that how the design will affect the the actual length or the time needed to theme or to develop the website To designs for example, they may cost the same amount of money, but the development can For one can be I can take double of the time if you make some mistakes or if you Do some things which for example some of the things which I mentioned earlier. It can just add overhead and Can be just more Expensive So what are the factors which affect the cost of design or theme? It's everything which I mentioned before Plus several others one is the first thing which we started to do is we always design a style guide for a project it's a page or it's a Photoshop file where you have all the all of the Drupal elements where you have all the HTML elements and you design them many times it's very easy to forget for example to design tabs for content editing or to miss out some details in the footer or There are many things which can be just missed and if you have this kind of design manual then themeer exactly knows What he should use and where Also what we found out to be very effective is to annotate the design with Kind of post it notes or descriptions Where you will describe What exactly which? Part of the page is for for example there is There is a block with some some notes some listing for example of news You can say that this is the news this it's coming from you know, it's a view view of news content type or this is Some slider on the home page and they should be Using separate content type for it and if you're not sure how exactly it should work Talk to developers or to project managers, but this can speed up the themeing where much Another advice is design only what is necessary many times There are pages which basically look the same They have the similar information, but for example, it's just different content type or it's different Category of the same content type And you don't need to design all of the pages just design What's what's necessary? Also try to use real life content only if possible Loram ipsum can sometimes be very risky because it can look very nice, but then also Think about what is required and what is optional content because if you put Optional content everywhere and you fill it and you design it looks very nice but then in real life the users don't feel this kind of information it can suddenly just look very broken and So keep this in mind and try to Use real life content when when it's just possible Also, it's much easier for a client to imagine or to Do accept design if there is a real life content rather than just some dummy images or text so another thing which considers me as a CEO is delivering on time One thing which helps is to define all of the terminology in the Bay in the beginning of the project Try to find out Exactly which kind of labels for example you should use for for different content pieces What should the button say what should be the Read more for example link also What what are the? Categories for example of the content because many times we design For example a breadcrumbs or some navigational hierarchy With some very short category, but for example category can be for two lines and suddenly breaks up breaks the whole design and If you define these kind of things in in the beginning then you can save a lot of overhead by coming back and fixing and Presenting and fixing again Okay, always try to QA your designs with a project manager or if possible so with client Get as much feedback as you can but don't forget to set some rules for feedback always set rules for for example a rounds of feedback or rounds of changes and Don't leave the project open-ended any times it happens that we are getting close to delivery and then We think we actually finish the project we started design it We start to theme it or develop it and we find out We forgot to design this specific content type or this specific page where it looks just completely different So always double-check that you have design everything because then it can again call some delays in production or when working So Cost effectiveness and delivering on time those are the two key things which I Am concerned about when I look at the design process from the CEO perspective I Also have some resources which I Which I some of them created and some of them I have formed There are several Drupal elements or style guide created for Drupal specifically and Feel free to get the links from the slides the slides are already uploaded to the session description page There are also modules Which basically will create you a page with all of the HTML elements so we can then theme them very easily And also, there is a video from LA Drupal With the title your design as a theme sucks and it's also a great Resource to understand how the worst thing can how Can be beneficial from you to learn So thank you very much for your for your time, and I hope that you have learned something and I would like to ask you to feel the To give me some feedback on the session and I would like to open up for some questions if you have any Yes Okay Yes, so the question was as the web is moving forward with responsive design if I found it harder to design a Photoshop And I think that you are asking if should be mobile first and design in a browser and these kind of things, right? Okay To be honest there are several or there are a few cases where I would be concerned about that and especially if it's maybe a small project and For example, I used to design some of the things in a browser even before The responsive thing was there but because it was just faster for me not to spend some time on in the first Photoshop, but just to create the design in a browser, but to be honest I From the experience or from the projects which we have right now We are probably not there yet, so I found it better to design a Photoshop at this point and This can change very very soon I'm sorry, we are we are using compass. Yes, but many times it takes Time to shift the thinking of the whole company, you know and all of the processes which are then tied to Yes, yes or the projects which we have are For most of the clients which we have mobile hasn't been the number one Reason or so, yes. Yeah, also we designed a mobile application. We designed it in Photoshop and then Tested it out in in some phone or whatever and then Came back to change some things We tried it on one project but we ended up actually going back to wireframes and design from them because It was a project where we've been working with some other company and they were basically building the design Building the website from the out of our wireframes and we've been waiting for them to finish and to design and Maybe it was from for a time reason. We decided to go to work from wireframes but I Don't know. I don't really have a lot of experience with this kind of approach Any other question? All right, I'd like to thank you to all and Hope to see you Sometimes next and also feel free to come and grab some infographics or Thank you