Wednesday, April 12, 2017

Designers & Developers: Working Together


“…developers have a huge amount to add to discussions about design.” And because of this, it’s very important to include the development team (or developer) in the conversation early on.

When developers are not included in the conversation, what may seem like a small change in the designers eyes, may very well have a huge impact on the website and its performance. In addition, a lack of communication can also “lead to designs that are impossible to build, designs that introduce unnecessary technical complications, endless back and forth between the designer and developer as they struggle to fix problems created by the designer, wasted days of revision and iteration — [and] all because the developer wasn’t consulted.”

Not only is the developer affected by this, but the client is as well. If the client signed off on designs before you showed them to the developer, it reflects poorly on the whole team if the developer isn’t able to execute the designs. “The decisions we make as designers have far greater ramifications than we are aware of.”

Developers might also suggest an idea that the designer may have never thought of or dismissed as impossible. Because many designers are not well versed in development, they don’t know all the capabilities possible. By collaborating with the development team, they could possibly take your ideas and build upon them, taking them further than you could have ever thought.

Something else to keep in mind is that developers make design decisions all the time. “…as a developer delves into building a project, they will have to make decisions that affect and refine the design. By involving the developer in the initial design discussions, they will be in a better position to fill in the blanks. And when compromises in the design must be made, they will be in a better position to make those calls.”

And finally, getting developers involved will result in the developer feeling more engaged in the project. “Too often, developers are at the end of a long chain of decision-making. Their voice isn’t heard because they’re brought into the process far too late. This leaves them feeling no ownership over the project. By bringing them in earlier, they will feel more connected to the work and more appreciated too.”

As you can see, your work flow can only benefit from collaborating with and working closely with the development team. Take a look at Matt Gemmell’s article: How Designers Can Help Developers, in which he points out some great tips. 



Designers Helping:

  • Use an intelligent method of version-control
  • Keep your layers
  • Name all your layers meaningfully
  • Use groups, and do so sensibly
  • Prune unneeded layers
  • Use Layer Comps
  • Keep everything as vectors and scaleable effects



Helping Developers:

  • Learn how to preserve rounded corners while resizing
  • Design at 72ppi
  • Snap to whole pixels
  • Always use RGB mode
  • Asset-preparation is part of your job
  • Be careful with fonts
  • Mimic the platform’s text-rendering (where possible)
  • Be sure of design dimensions
  • Use the platform’s idioms
  • Consider screen-size and their contexts 
  • Use genuine or at least realistic content
  • Respect the global light source
  • Make navigational or organizational constructs explicit
  • Export cut-ups without compression
  • Ask about shadows
  • Understand how buttons are constructed

Gemmell also wrote a follow up: How Developers Can Help Designers.


References:
http://www.smashingmagazine.com/2014/11/21/why-you-should-include-your-developer-in-the-design-process/
http://mattgemmell.com/how-designers-can-help-developers/





Preparing Your Photoshop Files for Development



Web Graphic File Formats


JPEG: Joint Photographic Experts Group

  • Best for continuous tone photographs, glows, gradients, drop shadows, etc.
  • Supports 24 bit color

PNG: Portable Network Graphics

  • Superior File format to use with transparency 
  • Use PNG 24 or 32

GIF: Graphic Information Format

  • 8 bit color (256 indexed colors)
  • Use for flat or simple graphic images
  • Transparency and GIF animations


Optimizing Graphics

JPEG compression is called lossy and will cause your image to lose quality each time it is compressed. It reduces file size by discarding information, so if you need to make a change, go back to your original psd file and re-optimize.


Save for Web...

  1. Go to File > Save for Web
  2. Choose file type





Saving as PNG

To get the best quality transparency use PNG 24 or 32. The file size is larger than the GIF but it is superior in quality.


Saving as JPEG

  1. Use the 2/4Up tab to view the image in different compression ratios
  2. Select JPEG
  3. Change quality and look at the difference in compression and image quality





Extract Assets... 
(Only available in AdobeCC)

Make sure your layers are cleaned up, delete any layers you are not using and have them all named properly before you go to extract assets.

  1. Select the layers you want to save out
  2. Go to File > Extract Assets






By selecting the "Extract" button, it will export your layers based on what file type you select. The files will be saved to the designated folder of your choice.


FILE MARKUP (REDLINE)

As you are working on your design, you need to make sure to check the sizes of your design elements.
  • How wide is your page?
  • What size is your header, footer?
  • What is the width of your column(s)?
  • Do they add up to the total width? 
  • What are your font specs?
  • What typeface, size, style, etc. are your fonts?
  • What is the leading?
  • How many pixels do you want between paragraphs? 

You can either printout a copy of your design and mark it up with the dimensions of all your elements or do it digitally. The development team (or you) will need this document so they know what your specs are and can develop exactly what you designed.


FTP AND THE PRATT SERVER

For your site to show on the web, you must upload or FTP (file transfer protocol) them to your web hosting server. If you don't have one, you can use the Pratt server, and you will need an FTP program. There are many free ones; Pratt has CyberDuck.


Here are your ftp settings: Pratt uses SFTP which is secure.

server: mysite.pratt.edu
name: user name
password: same as email and onekey


Server info

  1. Make sure you have a public_html directory.
  2. If you don't, then create one.
  3. Copy all your files to this folder.
  4. Remember that the first file to load will always be your index.html file.