Use Adobe XD or hand code?

[markeeeee]

I'm curious to know what the benefits are of using a prototype tool like Adobe XD is compared to hand coding?

I'm a one man design agency. My background is in graphic design for print. However over the last few years I have learnt how to build websites -  hand coding HTML and CSS - a dozen or so websites. I enjoy the control that CSS gives me and with CSS Grid (and flexbox) it is now much easier to design sites. I think I am as fast at designing in code as I am in say Photoshop or Illustrator (and by designing in code I am removing an entire step in the process).

My normal work flow is:

1. using paper and pen to sketch out site maps / structure

2. using paper and pen to block out page layouts

3. rough HTML and CSS mock-ups

4. final HTML and CSS

Would Adobe XD speed this process up? Or would it simply add a superflous step? Given that I'm the designer and often the developer do I really need to use a prototyping tool?

[Rishabh_Tiwari · Accepted solution]

Hi there,

Thanks for reaching out. In Adobe XD the added bonus is that it lets you create an interactive design prototype instead of just screens and these prototypes interact exactly like an actual application or a website. For more information on the workflow, you can refer to this UserGuide: https://helpx.adobe.com/xd/user-guide.html

Regards

Rishabh

[Spas K.]

Tools like Adobe XD are used for quick prototyping, revisions & trying out various layouts/options. Although Xd for now is rather clunky, compared to other solutions like Figma or Sketch, I'm sure it's much faster and easier than coding, no matter how fast you are. In your scenario, Xd replaces steps 1-3. 

Instead of pen & paper sketches, I start in Xd, where you can use one of many UI Kits (or make your own) with pre-built components and quickly put together a wireframe / low-fidelity prototype for the client to approve on the layout, flow, interactions and so on. At this point you're mainly concerned with user experience, and not so much with colors / images/ graphic elements. After it's all approved you proceed to building the high fidelity prototype or code in html/css, since you have that skill.

Maybe it won't be a huge improvement for a standard 1-5 page website, if you more or less know what it's supposed to look like. For a 40 page web app however, when you need to easily add/remove features or try different layouts all the time, it's a huge help. 

[markeeeee]

Thank you. I might give it a go