4 questions web designers should ask developers

 

In this post, we're going to cover 4 questions you should ask developers before starting a web design project.

Question 1. In what form should I present the results?

Enter source

I always ask how familiar the developer is with the way design deliverables are communicated. This is because it allows you to better decide which layout graphics tool to use. I've seen many designers make arbitrary assumptions about what format the final product should be in. However, when you're done designing and you're about to start developing, you may end up going back and fixing it by resaving the file or redesigning it in a different format.

Below are questions and situations to discuss with the development team prior to designing.

How should I prepare design resources?

● Do you want to store all of your design resources in organized folders?

● Do you want a source file with a collection of design resources from which developers can extract resources themselves?

● In this case, what type of integrated file do you want, such as PSD, AI, EPS, Sketch, or PDF?

● Do you have the same version of software as the designer? (i.e. can it be opened?)

● Are the grouping and layer naming of the integrated file organized for easy identification?

● Do you want HTML output from Dreamweaver or WYSIWYG editor?

Avoid code generated by graphical interface programs

Ask the developers if the code generated by the graphical interface program is optimal for them to work with. Probably 9 out of 10 people don't like this method. Code created for GUIs is generally messy, disorganized, and difficult to use. This method slows down the workflow for both designers and developers, so  avoid code created in graphical interface programs. If you think of it as an option, it is recommended that you discuss it with the developer first before proceeding.

Organize your design resources into separate documents?

How do you plan to document design elements that are not obvious in the mockup? Color codes, height/width values, fonts, font sizes, alpha values, mouse over effects, animations, etc., must be defined and recorded so that developers cannot guess or make arbitrary decisions.

Useful applications for documentation work

● Omnigraffle: You can easily draw various symbols, such as drawing arrows and adding symbols, so that you can easily explain the characteristics of the design.

● Avocode: Allows extraction of colors, image resources, fonts, text, CSS, location values, etc. from Photoshop or Sketch.

● Inspect from InVision: Inspect performs the functions of the above products and is very useful when using InVision.

Question 2. Will the website be built using a frontend framework?

Nowadays, there are many different frameworks that help relieve tedious work on the design and development side. Knowing in advance which ones are being used is very important for documenting designs.

Popular frameworks like Bootstrap or 960 Grid borrow 12-row systems. Why are there 12 columns? 12 is the most easily divisible of the smaller numbers. You can have the values ​​12 through 12, 6, 4, 3, 2, and have one evenly spaced column. This makes the design process much easier.

These frameworks have preset dimensions.  You need to know the value of the framework dimension before you start working on it.  (global padding, column width, inter-column gap width, media query split point, etc.)

In my case, the margins set in Sketch were about 5px larger than the margins set in Bootstrap, so I stopped doing those designs. This is not a pleasant situation for anyone. After all, you have to re-design and re-code. Please figure out in advance which framework will be used and how to apply that framework in Sketch or Photoshop.

In addition to grids, many frameworks have built-in design elements such as buttons, forms, and tooltips. If you want to customize these design elements, make sure the developer is aware of this.

This is because whenever I design a specific form separately, developers often just use the default form given by the framework.

Don't expect developers to easily notice a 2px border-radius difference.  Because developers are not design majors.

Below are some of the most popular frameworks.

● Bootstrap

● Foundation by Zurb

● Pure by Yahoo

● Skeleton

● Semantic UI

● And many more frameworks

Before designing, figure out which framework your developer prefers.

Question 3. What are the languages ​​and libraries that make up the development environment, and what are their limitations?

Even if you don't know how to code, you can easily find good widgets and plugins on the Internet. Code snippets are readily available, making adding functionality to your site easier than it was decades ago. One caveat, though, is that plug-ins don't easily apply to everything.

It's pretty cool to use predefined UL plugins for your site. But before that, it's very important to know in advance which language will be used to create your website.

Most plugins or widgets are written in a specific coding language of the author's choice. That's why it often doesn't work in other languages ​​or development environments.

A weather app built in Ruby will not work with a site built in PHP.

WordPress plugins will not work on sites built with .NET.

Despite being based on the same JavaScript, the Angular loading bar will not work on a site configured with BackboneJS.

Even if you find a widget that fits your development environment, please share it with the development team only as a kind of example. Sending a ZIP file of the entire code to the development team and asking them to "develop it like this" is like emailing you a bunch of 100px image thumbnails and asking them to "make a nice slideshow". This behavior is disrespectful and shows a lack of humility.

Question 4. Which browsers should be supported?

As you can see, Internet Explorer is a huge headache for developers.

Fortunately, the browser gap that plagued online creators in the past is quickly closing. Even Microsoft is giving up on Internet Explorer and releasing the new Edge.

How far back generations of browsers are supported has a big impact on design.

Below is a list of CSS properties that browsers cannot support.

●  Border-radius: IE8

●  text-shadow: IE8, 9, Firefox 2, 3

●  box-shadow: IE8, Firefox 2, 3

●  RGBA (color transparency): ie8

●  Flexbox (more on this later): IE8, 9. Needs adjustments for older versions of Safari and Firefox

●  Multiple backgrounds: IE8, Firefox 2-3.5

●  SVG: IE8 (many others for specific things)

●  CSS Animation: IE8, 9, Firefox 2-4, Safari 3.1 – 3.2

●  CSS 2D transforms (rotation, scale): IE8, Firefox 2, 3

●  Media Queries: IE8, Firefox 2, 3

*  'Can I Use'  You can check the range of functions available for all browsers here.

If you need to support IE8 on older browsers, or Firefox or Safari, which are very old, think about how your elements will look with certain visual effects removed. Rounded corners will be sharpened, and animations and shadows will disappear.

Designing with the latest technology, but keeping it usable in older browsers is called progressive enhancement. Another factor to consider for a complete site.

Based on the 4 questions introduced above, I hope it will help you communicate effectively with developers. Knowing what constraints might be present in advance helps you think about which design rules to follow, and helps you establish and mitigate alternatives to design and development problems.

* The contents of this text   are adapted from https://www.invisionapp.com/inside-design/design-questions-developers/ .

Questions to ask developers before you start designing | Inside Design Blog

<p>Form a clear path of communication with your developers at the outset of a design process.</p>

www.invisionapp.com