How best to work with my dev


#1

Hi all. As someone with a basic knowledge of Photoshop, 1 week into a new job, I’m very new to this - yet have ended up needing to design an entire web based app. I’m hoping to get advice on my proposed workflow.

  1. Buy this Bootstrap theme (because it has a ReactJS version, which is required): https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0

  2. This theme does not come with PSD files, so I will use Photoshop to create an approximation of the theme style and lay up all the screens of the app.

  3. I then upload all the screens to InVision and link them together, to create a working prototype.

  4. As changes are suggested I will make them in Photoshop and sync those changes to InVision.

  5. When the InVision prototype is ready I export the Photoshop files to Zeplin.

  6. Because we are using a theme, at this point, the Developer is able to grab the theme assets / CSS and the like from the theme file. He would (I think) still need my Zeplin file for screen sizes.

Here’s what I am confused about:

  • The Developer said “If you use assets from the theme, I just need to know what they are to use them” but, as per step 2 in my process, I think I am not necessarily using assets directly from the theme when creating my PSD files. I am using the PSD to indicate what theme assets to use but I don’t think I can use the theme assets directly since there isn’t a PSD file provided in the theme.

  • If my photoshop file is building an InVision prototype but isn’t based on the actual theme assets - how do I communicate to the Developer which theme assets to use?

Apologies if the above isn’t clear - I’m learning and feeling my way with how to explain the question…


#2

I think you might be making things a little bit more difficult than they need to be. This seems to stem from your use of what might be a few too many tools, but you may also be missing a key piece of what makes Bootstrap so attractive.

Bootstrap has a very particular vocabulary that’s used to describe its assets, a vocabulary which is reflected in its css styles. Panels, wells, buttons, notifications, icons-- all should come well-documented in your theme demo and are usually very consistent with other Bootstrap theme naming conventions.

This is what your Dev is talking about when he talks about using assets from the theme. Even though you may use PS to approximate a theme, you should still be basing your mockups on the look and feel of the theme assets. Gather the name of those assets from your demo and CSS documents before starting layout work, and make notes of the assets you use as you go along.

I’d also question the need to go from PS to IV to PS to Zeplin. Likely you can manage all of your work in PS for non-interactive mockups, and IV when you need to manage workflows and collaboration.

I hope that helps! Let me know if you have any questions.


#3

hi @a002

I believe @dougcollins already covered the most important topics of your post.
From my side, I can add that I don’t know anything about your environment if u work as a unicorn and/or if u have support from other designers.
Anyway, what I can say, according to my experience, is that you can boost the process delivering the design assets and design requirements using only one repository.
It’s crucial in achieving the consistency that all the stakeholders are aware of the guidelines.

I will try to go through your process to give you some feedback related the workflow between design and development.

  1. Buy this Bootstrap theme (because it has a ReactJS version, which is required): https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK01
    It sounds a strategy, nothing to add

  2. This theme does not come with PSD files, so I will use Photoshop to create an approximation of the theme style and lay up all the screens of the app.
    I believe that is you want to invest time and effort in designing PS assets they should be pixel-perfect and not an approximation. In this way you will, piece by piece, create your own theme framework

  3. I then upload all the screens to InVision and link them together, to create a working prototype.
    I believe this is a great boost to communicate the user experience. On the other hand is very expensive in terms of maintenance, so, be careful with this step

  4. As changes are suggested I will make them in Photoshop and sync those changes to InVision
    Perfect!

  5. When the InVision prototype is ready I export the Photoshop files to Zeplin
    I never used Zeplin and I can’t evaluate the added value in using it

  6. Because we are using a theme, at this point, the Developer is able to grab the theme assets / CSS and the like from the theme file. He would (I think) still need my Zeplin file for screen sizes
    If u believe that Zeplin is the right repository for styles, measures, pixel perfect descriptions and behaviours then go for it. Be sure that the DEVs are familiar with it and afterwards are not loading you with extra work because they miss information.

P. S. We work pretty fast using the DEV feature embedded in InVision

I hope it helps