How To Design Code Before Coding
Congratulations! Yous've designed your site and y'all experience like it's ready to be sent off to a coding squad. Y'all might have a developer in mind, or you might exist comparing the popular PSD > HTML shops that are out in that location... you might even plan to lawmaking it all yourself. No matter what solution you make up one's mind upon, in that location are a few tricks that I think every designer should know when they are preparing their designs to be coded into fully functional websites.
Philo Hermans is a freelance web programmer from Utrecht, Holland. He has over nine years of feel and ofttimes works with designers to turn their designs turned into fully coded websites or spider web applications. Philo is as well a successful plugin developer on CodeCanyon, and has written frequently at Nettuts+. With that introduction out of the way, allow's get started with the tips!
Tip 01: Go far "Pixel Perfect"
The theory backside creating "pixel perfect" comps can exist stated like this: To us coders, what we see is what you go! Most coders won't interpret your designs for y'all. If you hand over a pattern comp with mis-matching margins, padding, font sizes, colors, etc., most developers will lawmaking it exactly as we see it - including the errors! This can mean lots of frustration and wasted time (and money) making revisions; and so save yourself a headache and ship out pixel-perfect comps if you desire pixel-perfect coding.
Prior to sending your pattern to the coding phase, take an hour or 2 to review information technology with a fine toothed rummage.
The workflow solution hither is simple - Prior to sending your design to the coding phase, accept an hr or two to review information technology with a fine toothed comb. You don't necessarily need to document your entire design (although some developers will crave this), but taking care to make sure the following elements are exactly how y'all want them is crucial:
- Margins: All margins between elements should more or less match up. If you intend all margins to exist 25px, make sure that they are exactly 25px inside the design.
- Padding: This is the same rule as with margins: brand sure the padding within elements is consequent with your intentions.
- Font usage: Make sure that every time you use a font in the design, it's exactly what you desire to be coded - if you desire "all paragraph text to be 10px Arial with 18pt line height", brand certain that each paragraph in the design is gear up in this exact style.
- Colors: If you accept an exact colour in mind, whether it'southward for a font, background, or annihilation else, make sure you lot use the exact hexadecimal value that you want used in coding.
It'south as well worth taking a moment to set some "guidelines" within the pattern files that you hand over. An easy way is to use a grid template like the 960.gs website provides. The guidelines in the filigree template brand certain that the widths of the elements are all precise. So instead of having a container that'south 957px wide, it will be the exact 960px that you intended.
Tip 02: Leave Notes
If you want something that's not obvious, such equally a navigation carte that has to slide down when you move your mouse to the top of the screen. Brand sure that you lot make it clear past adding notes. At that place'southward a few ways that you could do this (I've seen everything from PowerPoint documents to printouts with hand-writing on information technology), but my favorite way is actually pretty simple: Apply the Note Tool in Photoshop (come across image beneath). The note tool will automatically make notes show upward when a developer opens upward the file, and it's easy quickly read up on what a designer has intended.
If you aren't using Photoshop, that's okay. Almost graphics software that I've found (from Fireworks to Illustrator) take a similar manner of adding notes. If for some reason this isn't an selection - just make your notes into a text file that you include with the files y'all deliver to the programmer.
Tip 03: Include Designs for Interaction
The more detailed your design is in terms of interaction, the easier information technology is for a developer to code information technology. Be sure to add together some examples of what your design will look like when it's interacted with. Every design is going to be unlike, only the important interactions that shouldn't exist forgotten include:
- Dropdown Menus
- Link/Push button Hover States
- Image Sliders
- Lightboxes
- Tooltips
- Form Elements
The reason behind this tip is this: if you don't show a developer how you expect a sure interaction to expect, chances are that they'll use an unstyled generic design, which could stand out like a sore thumb. Sure, there are some coders (like me!) that volition do our best to guess what you would have wanted, by why get out something so important to guesswork when it takes you merely a few minutes to pattern it yourself?
Tip 04: Have a Script in Mind
Time is money, so if yous pattern a website with a dainty looking slider and you know exactly which script would exist perfect for it, tell the programmer before they kickoff coding it from scratch! If you don't take a item script in heed, information technology'south probably worth your time to spend a couple minutes searching for whether or not one exists. Custom scripts tin can cost lots of fourth dimension and money - and it's a lot easier for you lot to create a design with a particular script in listen than it is to create a custom script from scratch to lucifer your design.
Using pre-fabricated scripts isn't a bad affair! This might seem similar communication meant to shell your creativity, just think of it this way: information technology can easily take 20x as much time to lawmaking something from scratch rather than using a pre-made piece of code. Pre-congenital scripts are usually easy to adapt and re-design, and there are thousands upon thousands of them bachelor through a unproblematic Google search. Envato even has it's own marketplace for premium scripts if you can't find a free one that works: CodeCanyon!
Tip 05: Become to Know the Technology You lot Are Designing For
Let's imagine that you're a designer on a major project. Yous spend weeks laboring over a design and finally go the blessing of your client... only to detect out a calendar week later that the pattern is well-nigh impossible to lawmaking and that information technology's going to toll 10x as much every bit the customer had budgeted; All considering you designed the entire site without an understanding for what is and isn't possible with a certain technology (Flash, HTML, etc.).
1 of the almost of import tips that I can give out is this: Information technology's vital that every web designer have some knowledge about the platform that they are designing for. This could exist HTML, Flash, PHP, or even a device like a telephone or tablet. How much you lot learn is upwardly to you, but the bones understanding of how a platform works will salve you a lot of heartache in the long run. Far as well often I'm given a gorgeous design that isn't practical (or affordable) to code because it hasn't been designed with practicality in listen.
Far likewise oft I'm given a gorgeous design that isn't practical (or affordable) to code because it hasn't been designed with practicality in listen.
I'm not suggesting that yous limit your creativity (merely almost anything tin exist coded with enough time and energy); and I'chiliad likewise not suggesting that you go out and go a coding guru (you lot'd put me out of a job!)... Just having fifty-fifty a basic cognition of the engineering science that you are designing for will assist inform your designs with some basic rules of thumb that volition make coding them easier and more than affordable.
For instance: if you designed a site to be congenital as a static spider web folio, it would make sense to learn a little bit about how HTML and CSS piece of work. Having even but a basic understanding of how HTML and CSS relate to each other will be enough for you to make better decisions when yous are designing. The more than informed a designer is about the technology he/she is designing for, the better they volition become at designing!
*Yeah, HTML isn't the only engineering science out there, then if you're designing with Wink or another applied science in heed, make that the focus of your enquiry... you get it though, the architect should know how to swing a hammer, even if he never does it.
Bonus Tip : Speak Up!
You don't need to provide a 20 page fashion guide for every website you lot design, just communicating principles that might not show up in comps can be really important to the success of whatsoever coding project. If your design has special requirements (ie: it needs to be meet certain accessibility standards, or it must be 100% compatible with IE5.1, etc.), brand sure y'all let the coder know upwards front and so we can plan ahead for it. Finding out major requirements Later the pattern is coded is a recipe for expensive revisions, which aren't most as fun or lucrative for coders as you might imagine! Almost of us would much rather movement on to another exciting projection rather than spend months making revisions with a frustrated customer.
Conclusion
The last thing that I'll mention is this: if you follow these tips, not only volition yous observe that your designs become easier and more affordable to lawmaking, you'll too probably notice that your work will improve as a result. Taking a few extra steps to ensure that you designs make sense in the practical world of web development can be the difference betwixt a adept website and an exceptional website. I hope you enjoyed this article!
Did you lot find this mail useful?
Source: https://webdesign.tutsplus.com/articles/5-easy-ways-to-prepare-your-web-designs-for-coding--webdesign-138
0 Response to "How To Design Code Before Coding"
Post a Comment