Skip to main content
M
markeeeee
Inspiring
May 14, 2020
Answered

Use Adobe XD or hand code?

  • May 14, 2020
  • 2 replies
  • 3718 views

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?

 

 

 

This topic has been closed for replies.
Correct answer Rishabh_Tiwari

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

2 replies

Spas K.
Community Expert
Spas K.Community Expert
Community Expert
May 14, 2020

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. 

    M
    markeeeeeAuthor
    Inspiring
    May 15, 2020

    Thank you. I might give it a go

      Rishabh_Tiwari
      Rishabh_TiwariCorrect answer
      Legend
      May 14, 2020

      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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices