A developers guide to web design
This web design guideline is an opinionated one, from a developer’s perspective (based on bad examples we have seen). It’s aim is to teach designers how to design for developers.
Define a palette of colors that will be used throughout the website.
Depending whether color palette is monochromatic, adjacent colors, triad etc, define colors and stick to them when you start designing.
There should not be too many variations.
If you use a certain shade of gray for border of some elements stick to that shade, don’t slightly modify it for a border on another element.
Focus on web safe fonts that you can pick here: https://fonts.google.com/. For better website load time optimization try not to combine too many fonts or font-weights. 2 – 3 fonts with 2 – 4 weights are enough (400 for standard text, then 600, 700 and 800 or 900).
In HTML there are 6 headings: h1, h2, h3, h4, h5, h6.
H1 should only appear once per page (usually at the top of a page in hero – section with a background image below header with navigation, at least in standard layouts)
Define font-sizes and wont-weights (how bold or thin letters are) only for these 6 headlines (You may use variations tho; For example on homepage, hero h1 may be larger than h1 in inner pages and blog posts).
H6 should have either the same font size as <p> (paragraph) or a bit larger.
Standardize margin-bottom for headings and all text elements in general (for example headings can have a margin-bottom of 20px, while paragraphs and lists can have margin-bottom of 10 px).
Also define a good line-height for all text elements for better readability (For example what I’ve found to be a good value for paragraphs is about 1.4 or 1.5 – again, that depends on what font is used etc..)
Lists and Paragraphs in Web Design
List elements (either ordered or unordered) and paragraphs should have the same font-size (there might be cases where there are lists variations that may be different based on the design, but in general they should be the same as paragraphs.
Paragraphs may also have variations (For example if it is used as a subtitle below the titles (for example below h2). You can make it for example have a larger font-size and font-weight to better match with the headline that is above.
Standard font-size for paragraphs and lists should be about 16 – 18px (But again based on the design and how things are positioned they might be larger).
Buttons in Web Design
Define a few variations of buttons and reuse them throughout the website. (Design them in Photoshop, not in Illustrator)
For example: One with main brand color as a background, one with main brand color as a border and font color but with transparent background. Then a few more depending on the needs of the website based on the same color palette defined previously.
Photoshop (or any other tool) organization
Try to group as much things as possible and name them logically.
Header is one group that may also have sub-groups (for example navigation items).
Hero is also a group that has a background image, overlay (for better contrast), and text for example.
Stack groups logically as they appear in design. (Header first, then below it hero, then section 1 etc…).
When you are working with sections try to standardize top/bottom padding (White space between the end / border of a section and contents of it) and margin (White space between 2 sections). If sections have standardized padding and the design allows it, there is no need for margins.
Use a starting width of 1920px for a .psd document but also use a 12 column grid to better align everything on the page. Grid should be somewhere about 1100 – 1300px wide, so the content can easily fit into laptop screens that are usually 1366px wide. (Disclaimer: You don’t have to use “containers” for everything, some sections may span the full 1920px width, but a large portion of content should fit into a container (again, don’t strictly follow this).
You can download on of the grids here: https://hackerthemes.com/bootstrap-4-grid-psd/
When designing, try to do as much as possible in Photoshop and only use AI to design SVG graphics. Buttons, images, etc should be defined in Photoshop – so that it’s easier for developer to measure things, get colors etc. Also that allows easier and better integration with 3rd party hand-off tools such as avocode and zeplin. Those tools generate CSS out of Photoshop pretty accurately and make it easier for developer to just copy / paste styles instead of measuring things manually in Photoshop file.
SVG designed elements: graphics, icons etc can of course be just imported from AI.
Don’t use blending modes; Instead, achieve what you want by stacking layers on top of each other.
When designing, keep in mind that 1920px (which we use as a starting width for the layout) is not fixed. There a lot of different monitor sizes, then there are tablets, cell phones etc.. Try to imagine and then design in a way that it would be easy for a developer to adapt for smaller screens and stack things on cell phones.
Learn the terminology and standard UI elements that are used in website design
For example: Accordions, sliders, carousels, tabs, modals, forms (input fields, textareas, checkboxes, radio buttons, toggles) etc.. There are a lot of sources where this can be learned but here are a few:
These refer to the mouse actions, or if something is selected, checked etc…
2 most common states are:
- :hover (For example when we hover over links) we should add a nice hover effect to indicate it is a link or that something will happen if we click (for example toggle, or check something)
- .active (Active class is applied if for example one (or more) of a few options is/are selected)