Calling all Web Designers :)
I am starting to make a website for a small business in my hometown and it will be my first proper project. I have made sites in the past, which I have done for leisure. I am fluent in HTML and CSS. I have got the clients requirements and what he wants on the website etc. I am stuck on what steps I should follow after finalising the requirements. I have searched the web and could not find anything relevant to my questions because the info is outdated.
My questions are:
What is a web designers workflow in 2014? (Because everything is changing so fast) Do I create wireframes of the site and then design them in photoshop and then code the designs?
I just want to know how the "design" processes works, like what steps I need to take in order to make the website.
Thanks in advance.
Answer
Discovery and Scope
Sit down with the client to determine, goals, purpose, and needs. You should have drafted a quote of the purposed site and also discuss turn-around time. Make sure to have written in anything needed that you cannot provide. You need to figure out how the site will be structured. Such as responsive, tablet and phone only, desktop only, desktop and tablet only. You need to figure out if the design is a multi-phase design target, such as the client will want to release a desktop version and want a full mobile app later on.
Content Mapping
Hopefully you have been given all the content that is desired for the site. You should map out the site and its functionality. Decide how the scalability is for future modifications, decide how the code may be structured if it's for a CMS or app.
Example: 
Mockup
After you have your "tree" or "map" completed with the approval of the client I would work on a hand sketch or mockup tool. There are a large amount of questions on this topic if you do a search in the top right
Example: 
Designing in Photoshop for web design defeats the purpose of today's age. I don't know many people that still use Photoshop because the amount of time it takes you to make a fancy button you could have spent that same amount of time and coded in the browser. If I have to use an application per a special request I will deploy it in Illustrator or InDesign. I would advise migrating to design a style tile such as:
With the purpose of the tile you are not handing a client a design and putting yourself in the corner of "this doesn't look like the design you gave me". Also, if you are planning a site there is no reason to spend the time laying it out in Photoshop for responsiveness because you will spend a lot of time designing for certain devices, etc. etc. If you HAVE TO design the full site I would consider Illustrator, as stated, for its SVG and ability to export elements for your site compared to Photoshop. In some degree you could even use InDesign for formatting the content but I would only use Photoshop for image manipulation and if I'm going to do that I would probably roll with ImageMagick. I take the Style Tile a level further than others and code it into a single page so I have knocked out a preliminary task of my master .css file.
Wireframe
I prefer to deploy designing in the browser if you haven't noticed. Now these days I may use Illustrator for a sketch of the site or mockup of the site but I usually deploy a default template .css file with no more than 6 colors in a grey scale and I code everything for the structure of the site since most people cant get a design understanding and want something to play with. I sometimes go ahead and do this in PHP since it's easier to deploy for a CMS. I then will develop a simple sub-domain with the client's PROVIDED fonts in a black and white manner so the entire site's functionality is present and they can go through it. Since I haven't spent the time adding all the content or colors (because I use dummy text reference: "Alternative to Lorem Ipsum (dummy text) for websites") I can easily modify any changes that are present if they don't like a certain element based on a device.
Colorize and content
Once the client has signed off on the structure of the site and functionality I will write up the rest of the CSS and add the requested animations or JavaScript specifics. Since I have the style tile approved and if I developed it correctly I can simply copy the CSS over and be set.
Debug, Debug, Debug
The final step before client sign-off is debug and make sure my code is solid with no errors. If everything is correct I should have a smooth release. This step also includes serving testing and load testing, if that is what you have priced and offered. Personally, I'm a firm believer that any designer should be aware of what they are developing for just like you would, hopefully, be doing when it comes to a print design. If the client can't afford a true hosting provider it could limit the performance of the site and all they will say it is your fault and you did something wrong.
Training
I typically bid in my brief/quote training on CMS sites. Some users have no clue what they are doing so I will bid for an afternoon with an hour over padding for after questions to make sure to go over anything or make sure they are using my design to the upmost capabilities.
Some other topics that may help since you're asking a basic question:
No comments:
Post a Comment