15 Steps To Handover Your Webdesign To a Developer Like a Pro

Typography project overview — Scaling from desktop to mobile with all the properties such as font-size, font-weight and letter spacing.

1 — Define Typography

Loading additional fonts can increase the download and loading speed of your site, include for your developers only the fonts actually used in your designs.

2 — Folder with Fonts and the right weights

In an ideal world, all the project colors have their names in the design system as well as in CSS or Webflow swatches. Makes the feedback sessions much more straight forward — such as: Change our main button color from Grey 4 to Blurple 3.

3 — Define Colors

4 — Define widths of your website & grid system

5 — Responsive

5.2 — Spacing

6 — Prepare assets

6.2 — Icons in squares

6.3 — This is also a way to learn that 100px shadow is an insane thing

7 — Hover states

8 — Input states

9 — Form States (Error/Success messages)

10 — Open navigation

11 — Tab/Slider states + Assets

12 — Sharing images and Title and Description for each subpage

13 — 404 page

14 — Alt tags for Images/Links

Listing all needed field of each of the dynamic pages with adding notes about what's required for each item helps to understand if some elements will always be visible and some will be based on conditions such as — display number of pages on when specified.

15 — Define CMS logic

The End

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jan Losert

Jan Losert

Webflow/No-Code Enthusiast, Product Designer & Product Maker. Tweets as @janlosert. Pixels on http://dribbble.com/JanLosert.