Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Use Adobe XD or hand code?

Community Beginner ,
May 14, 2020 May 14, 2020

Copy link to clipboard

Copied

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?

 

 

 

TOPICS
Creative Cloud

Views

1.8K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , May 14, 2020 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

Likes

Translate

Translate
Adobe Employee ,
May 14, 2020 May 14, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 14, 2020 May 14, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 15, 2020 May 15, 2020

Copy link to clipboard

Copied

Thank you. I might give it a go

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

LATEST

Hello i'm Georges from Popcode, a tool that helps designers build truly native mobile apps from AdobeXd without code 😃 The beta version is almost there, you can apply for an access here https://getpopcode.com

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines