Why Adobe XD and Webflow are perfect for designers.

My first experience of building websites was with Adobe Dreamweaver, Macromedia Dreamweaver as it was known back then. It was a great tool because you could write code and see it come to life as a web page from within the program. I still found it quite frustrating as a designer because I had to understand the code before seeing things happen. Dreamweaver would show me all sorts of lines and boxes I’d created with my code, but nothing like I had imagined in my head. Realistically I needed to learn how to code. I really didn’t want to spend the time learning code, I just wanted to design! This put me off building websites for a long time.

Fast forward a few years and web sites were no longer designed using tables. There were more things to learn. WordPress came alone making websites even easier to create. I started to believe that learning code wasn’t completely necessary as there were loads of templates to get started, although, for WordPress development, PHP would have come in handy.

After years of building WordPress websites, I realised there was still a need for designers and coders. It is possible to do both, but it’s hard to be extremely good at both.

There is so much more to designing a site other than just making it look good. Does the website need a logo?  What is the existing logo, how will it work on a new site? What colours will need to be used to match the existing logo and branding? Why do you even need a website and what is its purpose?

Adobe XD is perfect to help answer some of these questions without having to spend time developing a website with code.

 

Starting in Adobe XD.

The Design First Approach.

Adobe XD can be used to create a prototype website for both desktop and mobile. You don’t need any coding knowledge and everything is built around a user’s ability to design great looking applications.

Unlike designing a website in Adobe Photoshop. Adobe XD allows you to link to designs (pages), add components that you can reuse throughout all the page designs and create interactions such as hover effects and menu dropdowns. This is only some of what Adobe XD can do with updates being released all the time.

What’s great is that you can view your prototype like a webpage and interact with it either on the desktop or on your mobile device. 

Generally users don’t care about code. They don’t care if it takes you three hours to create a perfectly aligned grid with images, text, and a particular font. Understandably, they just want the finished product to be usable and look good. This is where Adobe comes in to play brilliantly. Before having to spend time coding out functionality and features on a webpage. Everything can be designed, moved, and changed within XD.

This prototype can be shared with a real weblink to any client who can see their design and interact with it in real-time.

Exporting all designs and images from Adobe XD is super easy too! They can be exported ready for the web with no need for resizing and converting and slicing up parts of the design.

The design assets can either be sent to a developer to code out or be used alongside software like Webflow. Allowing you to design and build the website all by yourself.

 

Working with Webflow to build the website.

What is Webflow?

Webflow is an online website building tool. There is no software to download and everything is done on the browser making it great for designing anywhere as long as you have a laptop or PC. Webflow elegantly mixes code such as HTML, CSS and Javascript with design. This allows people with little to no coding experience to build great looking websites from either a template or completely from scratch.

Weblow also helps with designing responsively for mobile, tablet and desktop. With the click of a button you can preview the page on different devices and change layouts depending on that view. If text is too big on mobile but perfect on desktop you can change the font size just for that view. No need for CSS media queries or messing with any code.

Every element created in Webflow can match your design created in Adobe XD. For example a box created with a black background, white text at 300px by 300px can be created in Webflow with a few clicks. 

Webflow also features a powerful CMS (content management system) meaning you can create dynamic content for websites such as blogs and eCommerce websites. You can pretty much create any website using Webflow. You can view some examples of websites built using Webflow here. 

Like with any tool, there is a learning curve. I don’t believe you can just jump straight into it and create a website. And having coding experience doesn’t mean you will grasp Webflow any quicker. It’s more a case of learning how to interact with the user interface. However having an understanding of how elements stack and the CSS box model may help. Webflow also has a great resource available called Webflow University with 100’s of videos to help you get started.

I highly encourage anyone who prefers web design to web development to start having a play around with Adobe XD and Webflow.

The icing on the cake is that both are absolutely FREE to start using. Webflow only requires you to subscribe if you want to host a real website and use a domain name. You can use Adobe XD for free with restrictions only on the number of prototypes you can share. You can view the plans on the Adobe XD website.