Web Design Process for Graphic Designers
Every other day there is one company who develops some platform or cloud based app for graphic designers which will help them take control of their web designs with the least amount or no coding involved from scratch to the finished product. How do they work and do designers really find them useful?
Before you go forward you should know that I am a graphic designer with a a little coding knowledge. I have worked on a few website so far which involves coding. And this article is from a perspective of a graphic designer. The article is mainly the break up of basic process of how to manage a web design project. In this instance I assume you will be hiring a coder/developer or work with an agency to get the website functional. My step wise process of how I manage webdesign projects. I hope this helps you and please leave a feedback in case you like the article.
It’s always a battle which looks hard to win when starting a new web design project. Most of the times it about whether to go with a WordPress based website which provides you a neat CMS and let’s you choose from millions of amazingly designed themes or to design something from scratch and let your creative animal out and code it separately and add an admin panel if needed. Whatever your website project is, it always starts with a lot decision making processes. And in this process you have to plan way ahead of your project. What style to use, CMS, hosting, getting the right coder, choosing the right plugins, getting things right and finally endless revisions.
I really don’t want to get in to all the detail of the steps involved in each process. Let’s start from the basics and let’s perfect the art of using readily available tools on the internet to your advantage. If you are like me and work at an agency it might get difficult for you to get everyone involved on each of your experiments. But if your are a freelance designer it will be easier in comparison .
We’ll cover tools which let’s designers plan and present a website to their clients and coders. Sometimes I've been fortunate enough to be on the other side. Being a client and a coder. I may not know every possible way to win them with your magic but there are some ways you can make life easier for both. And when I say both I mean the you, the client & the coder. Let’s take it step wise. You received a new brief for a website design project. There are two possibilities. One, you are assigned to design and code the website. Two, you only need to worry about the design and someone else takes care of the coding of the website you designed. No matter what the scenario is you will have to make sure your process is simple, clever and time saving. So let’s cut the chase and get right to tools which can help you increase your productivity and impress your clients & colleagues.
Step #1 : The Planning & Sitemap
For most web design projects I like using draw.io to lay out a basic sitemap. Draw can directly sync to your Google Drive or Dropbox in case you have an account. Save it on your PC if you like.
Step #2 : References & Inspiration
If you’re like me, you’d probably collect a bunch of references to get an idea to where exactly start from. Depending on the genre/category of the industry of the website you are designing you might need a few starting points to get the dice rolling. It’s better to start your design process by showing a few references to your clients so you narrow down your objective instead of getting tangled in to an endless design option cycle. I prefer going the long way and looking for about 40 to 60 references from different inspiration sites like Awwards, Themeforest, Creative Bloq and so on. After you collect around 10 to 15 options, narrow it down before showing your client. Do not show more than 4 to 5 references to your client. And be sure to present references which looks different from each other. It makes it earlier to get clients preference and what direction he is looking at. Also repeat the process if needed.
Another important point I would like to press on is before you jump on and get excited about the “next gen” html 5 website with tons on j-query based animation and fully responsive design. Know what you can achieve and consult your coder before taking that leap. It’s easier to refer a site and commit the deliverable. But imagine a situation when your coder says he can’t do it. You don’t want to be in that situation trust me. It all depends on your coders flexibility and ability to bring your science fiction to life. So the bottom line, get a word from the coder on all the references that you will send to your client.
Step #3 : Get Technical & Hunting Plug-ins
This is one step you can either leave it to the web developer or do it yourself. If you are looking for a specific functionality or planning to integrate some kind of special animated content on the website, look for it and learn a thing or two before designing for it. For example I want to design an animated slider and I found a reference on the web but I want a few tweaks in it, look for it on the web. If you only Google the right keywords you will come across hundreds of free banner plugins, widgets, and what not. In case it’s not free it’s always good to buy it with a small fee. Plugins are not so very expensive unless you are go on shopping spree. Also keep it limited. Do not overload your webpage with a dozen plug-ins otherwise it will slow down or end up crashing the page in the browser. Personally, I enjoy this process and I get to learn a ton out of it.
You can find really cool java-script inspiration from Codepen. Also in case I want to buy a specific plug-in I buy it from CodeCanyon by Envato. Also don’t forget to consider these costs when you bill your client or the estimate you send. You should always cover the cost which may or may not incur like Fonts, Plugins, Stock Images (basic & limited) etc.
Step #4 : Presentation, Feedback & Revisions
I cannot emphasize enough on the showcasing of a website when presenting to your client. Do not send lose Jpegs attached with your mail and asking to find that attached cliche line. PDF is still an alternative which saves lives. I prefer presenting a website over a medium where it actually belongs. A browser. Yes, there are a few alternative you can do that without actually coding it. One is to load a jpeg in a browser and center the page with a little help from your developer, save it and send a zip to your client. Another is to use a mock up app like InVision to impress your clients with a live looking web design. This app also helps you to collect real time feedback with pointers on the design itself. After the revisions are done, re-upload the design and ask your client to check the link. You can also password protect your pages. This app is a rock-star and easy to use in all the mock-up techniques I've used so far.
Let me know in case you are interest in step by step process of how to present a website to a client and I’ll probably write another article on it.
Step #4 : Submission
There are couple of ways to submit your designs. Keeping in mind that you will have to do a handover to your developer you will need to keep your layers organized, separate folders for JPEGs, Vectors etc. a basic hygine that you are used to following.
Optionally I always like to upload the files over Box or any online file sharing site you use and have control upon. It’s always good to keep in mind that no matter how easy you make it look but you will have to go through file by file and folder by folder in sync with your developer to make sure you haven’t missed out on anything.
So, that covers most of what is needed to play your role in making a website happen. If I missed out on anything please don’t hesitate to leave a comment and thank you if you have been reading so far. This is my first article/blog post and I’m glad to announce I’ll be writing weekly article on different subjects related to design and it’s disciplines. Good bye for now. Have a happy new year.
Link to original author : www.wallfish.in/blog
