There are many designers with no or little coding skills making web design decisions. Some are veterans in print design, just now taking on the web and cutting corners with the hope of not having to learn code. There are the good designers who are currently learning UI/UX responsibilities and Front-end coding. Then the Ballers; These are the Full-time Front-end Developers, UI/UX Designers and Website Directors who have a solid background in print design and/or art direction. Regardless of your role in web design, shit must get done. You must be ready to communicate visually and verbally. If you do not know some basic terminology, nor have an understanding of how code works, you are double-screwed!
What defines a Web Designer today is loose. I have felt like I could not claim the title in the past because I do not have good coding skills and cannot build my designs without a partnering developer. Nonetheless, I have to obtain an interest in the current advancements of the web and technology to stay relevant. I read Smashing Mag and Net Mag on my free time. There are tons of great resources online. wpcity is a new fav! know some basic HTML and CSS. I have even learned a little bit of back-end development so I do not have to rely on others for simple alterations and maintenance needs. I have a good background with Wordpress, recently even learning more best practices for search engines to crawl content of Wordpress sites. Learning how to use my Google Search Console has been very useful. Google provides so many awesome sources to better understand everything from Rich Cards to Security Issues that can influence design. So overall I am trying to hold on to an understanding of current web practices, but I am not trying to adapt in-depth skills. I just need to know enought to design for the web tomorrow and I am not alone in my boat.
My focus is on creative ideas and aesthetics that function and work, not necessary the details of how to make them function. I am not a full-time UI/UX Designer, nor am I a Font-end Developer or Website Director. At least not today. You can’t be great at everything, but you can try to build stronger communication with others who can own the areas of the project that are your weak spots, and utilize some helpful tools that make it easier for you both.
A couple of months ago I was working on the design of a custom website. I invited the Front-end Developer to review the design plans early with me so I could apply his insights on what designed functions were attainable and to make sure I was on track with the best practices that he was currently working with. When the budget allows for the developer to be a part of the design planning, I always push for it. However, most of the time they don't really care. This is odd to me. Why wouldn’t developers want to have a say in the planning so they can control the plate that will be placed in front of them to clean?
What I have found is that most Developers are not used to communicating with Designers on open ground. Designers are not asking questions like “Can you build this within budget?” The lack of collaboration between the two is such a waste! A Web Designer who has strong Font-end development skills may feel that they have enough in-depth knowledge to not include the developer for insight. But that doesn’t mean that you should leave them out, the final product is a result from the work of both Designer and Developer; Therefore, both should be involved in the planning.
I have received different answers from each developer for simple questions. “The client has requested this not be built in Sketch, what dimensions do you want to receive the .psds?”, “Can we build with SVGS?”, “Are you good with using the @face-font Kit Generator on this project?” If you have been working in a tight-knit group with the same team over an extended time period, you might already have these answers. You are fully aware of what the developers can do in certain timeframes and budgets. That’s awesome! For the rest of us who do not have awesome front-end development skills and/or working with a new team, communication must be part of your creative process for better web design. You do not want to pass over a design to the front-end development team that they will not be able to build, rather it be because it is too time consuming for budget or the design did not nurture healthy functionality.
I made that big mistake eight years ago back in 2008 when I was an Intern at a Web Startup, The Horton Group. I handed over a client-approved website design for the CMS Drupal that was impossible for the Developer to accomplish. I had worked with the Account Manager throughout the project. I remember one meeting early on in creative development with the Back-End Developer who was taking on Front-End too for this particular project. I did not know the difference between Front-end and Back-end at the time, the descriptors were not even being used internally from what I remember. I showed him my designs and described how I thought it could function. He was like, “cool.” That was the end of feedback.
I was so excited for the site to go live! I went back to school in the Fall for my Jr. year of college and followed-up about three months later when the new design still had not been launched. The developer then told me it was an impossible design, it would have run over budget and the client couldn’t afford it. It had been scrapped! The lack of communication allowed for this circumstance to not be addressed in the early stages of design, resulting in an unhappy client, frustrated developer, disappointed designer and a financial loss for the company. As an intern, I did not know the right questions to ask. As a Back-end developer taking on Front-End, he did not know what to expect. Neither of us was involved in the quoting of the project and neither of us ever met the client. I learned the hard way that continuous transparency is a necessity for the design process.
This past summer I working on Weatherford Aerospace, a simple, template-based website. I provided the Front-End Developer with a PSD labeled with HTML Tags, Achieve of Creative Assets that included links to Google Fonts, Formatted Images, and a CSS Cheat Sheet. He approved delivery and moved forward with development, later giving me the biggest compliment! He told me I made his job easier and provided more than most designers do. My first thought was, “I have fooled him. I have no clue what I am doing. Or do I? Am I good at this?” I tried to hold back the blushing to get more insight. He went on to explain that many Web Designers ignore CSS direction completely.
Well, that's a bummer! So I have decided to let you guys in on my secret: Typecast™
Typecast™ allows me to design with web fonts and preview in browsers. This is important because the fonts in your Photoshop are not the same as the fonts being used online. They will always look different. If you are just getting started with Google Fonts, there are some helpful articles like this one you can check out to get going. The best part of Typecast™ is that you do not even have to know what is a HTML tag. As you build, it writes the CSS for you and you can download it to use as a CSS resource during the web development stage. Below is the Weatherford Aerospace CSS Cheat Sheet that I had shared with the developer. This is a simple and short version, outlining some basic design aspects that were already defined so he didn't have to look it up in the PSD file. Also, if there happened to be any inconsistencies in the PSD such as a color code being a little different, these sheets were to go-to to figure it out.
If you are a non-coding designer, someone like me or one who is practicing to be a front-end developer, take advantage of the software and web tools that are out there like Typecast™ to better communicate with the development team for more successful web designs. If you are an animator and/or have a background with After Effect, try Google Web Designer to create HTML5 ads. It is currently still in Beta Mode and has some limitations but the User Interface is very similar to After Effects.
This article was written in 2016. For updated tips, visit wpcity.com.
