When designing websites in your favorite design tool like XD, Sketch or Figma, how do you choose the right artboard and container widths for different screen sizes? How to make the most optimum use of your time and create only that set of screen variations that would take care of most desktop, tablet and mobile screen sizes?

At Fantastech, we work primarily on design to HTML and WordPress conversion projects, so we get designs from our clients at all sorts of artboard and container sizes for different devices.

The most popular artboard width choice among them is 1920px for desktop designs, 768px for tablets and 375px for mobiles. Some even go to the extent to create more variations at 1024px, 1366px, 1440px etc to cover more screen sizes. With container widths, it’s all over the place, some prefer to do it 1170px, some 1200px, some do it at 1440px.

But are these the right sizes to choose? And how many variations should you create anyways? Let’s have a look…

Let’s First Define Artboards and Containers

When you’re designing website UIs using one of the UI/UX design tools like Adobe XD, Fimga, Sketch etc, you have to start with a blank white canvas or artboard where you do your designs. It’s called an Artboard in Adobe XD, Sketch & Photoshop and Frame in Figma. So when starting to design, that’s the first thing you need to create.

Now within that artboard, there’s a middle content part in websites that come within a fixed container. For most sites the different sections on a page may touch edges of the artboards like in case of full width background and sliders, but content usually stays with a particular container. That’s what we call as a Container.

To illustrate this, have a look at the our website’s homepage design below:

Here’ you’ll notice that the container is of lesser width compared to the artboard and we have some space on both sides of the container.

If you open our homepage on a desktop screen and zoom in and out, or open it on different desktop screens, you’ll notice that the container always remains the same width but the blank space around it changes with the different screen sizes.

So for designing websites, if we keep can find that ideal container width that would work across all popular screen sizes with still some space left on either sides of the screen, we’d have found that perfect container width that would be compatible with most desktop screen sizes across the globe.

Let’s look at what that container width should be and then we’ll look into what artboard size you should use.

Artboard and Container Widths for Large Screens (Desktops and Laptops)

To find our the most optimum artboard and container widths, we need to first know the screen resolutions that are most popular across the globe. According to StatCounter.com, here’s what we know about the desktop screen market (as of March, 2021):

Let’s Start With Finding The Optimum Container Width for Large Screens

From the table above, we can see that all the popular screen sizes in the market are at 1280px width or above that. That means if we can keep our content container size below that, we’ll be able to cover all major desktop and laptop screens in the market available right now globally.

That gives us an ideal container width of around 1200px width. At 1200px width, even on the lowest screen size of 1280px we still have white space of 40px left on both sides, so that works really well for desktops and laptops and that’s we also recommend to our clients. You can either use 1200px or anything below that and that should fine across all large screens.

And you don’t need to take my word for it. Have a look at what the following popular brands are using:

• Microsoft suggests 1008px and higher as desktop container width.
• Twitter’s Bootstrap, which is the most popular CSS framework in the market, has been using default container size of 1170px till version 4.
• Foundation CSS framework, which is the 2nd most popular CSS framework, uses 1200px as it’s default max container width for rows.
• Semantic UI framework, which is again a very popular CSS framework, uses 1127px as it’s default max container width for rows.
• Popular page builders like Beaver Builder uses 1100px, Elementor uses 1140px and Divi builder uses 1180px as their default container widths.
• Talking about popular WordPress themes, Divi theme uses 1080px, Astra, OceanWP and Avada use 1200px and Genesis uses 1040px as their default container widths.
• Kinsta and WPEngine, providers of premium WordPress hosting services, use a max container width of 1200px.
• Even WordPress’s official website uses container width of 960px!

From all these examples you can see that all of them use container widths of either 1200px or lower for desktops and laptop screens. So with that said, you can easily conclude that going with the 1200px container width would be the right choice for your next website design project that would work well on all major screens in the market.

Most Optimum Artboard Width for Large Screens

With container width out of the way, choosing the artboard width becomes very easy. You can keep the artboard size pretty much anything that you want as long as it’s wider than the container width and you have some space left on either sides of the container.

You can use any width among the popular screen resolutions: 1280px, 1366px, 1440px, 1536px, 1600px or 1920px. At our agency, we recommend our clients to use artboard width of 1440px. But it does not really matter what you use, as long as your container fits in well within the artboard with some space left on both sides.

Artboard and Container Widths for Smaller Screens: Tablets & Mobiles

For tablets and mobile devices, it is easier to choose artboard and container widths as you have only a limited number of popular screen sizes globally. In most cases the artboard width you’ll be using would be same as the width of the device that your users usually use.

Regarding container width, sites on tablets and mobiles are usually designed to stretch and touch both ends of the screen. So if we keep a padding of 15px or 20px on either sides within the artboard, you will have your container ready!

Let’s look at what artboard size you should keep for tablet design. Here are the most popular tablet screen resolutions globally (as of March, 2021) according to StatsCounter.com:

From these stats it’s pretty clear that 768px width screens are the most popular ones. So you can keep the artboard width for your tablet designs at 768px and you’ll be good to go. So for tablets, we recommend you to keep 768px as artboard width and for container width, just add some padding of 20px on each side to make it 728px.

For mobile phones, here are the most popular mobile screen resolutions globally (as of March, 2021) according to StatsCounter:

Looking at these stats, we notice that there are only 3 screen widths that are most popular: 360px, 375px and 414px. There’s no big difference among these sizes and no matter which size you choose among these the designs would look almost identical in each of them.

We would recommend you to use 360px as artboard size for your mobile designs because that’s the most popular width compared to others. But even if you choose any of the other two widths, that should still be ok.

Regarding container size, like tablet screens you can keep padding on both sides at around 20px to make the container width 320px and that should work well for most mobile devices.

Conclusion

I tried to keep this article short and to the point. By looking at the most popular screen sizes for desktop, tablets and mobile devices globally, we can figure out the artboard and container widths to use for designing website UIs.

I recommend designing only 3 variations, one each for desktop, tablet and mobile screens at the following artboard and container widths:

Designing only 3 variations and at these widths would be the most efficient use of your time and would cover every major screen size present in the market.

I hope you found this article useful. What do you think? Do you agree or disagree to these widths? If you have any comments or suggestions, feel free to leave a comment in the comment box below.

The post Quick Guide on Choosing Artboard and Container Widths for Responsive Website Design appeared first on Fantastech.co!.

Now when it comes to the conversion of those designs (that are in Adobe XD, Sketch, Figma or other design formats) to WordPress website code, you usually have two options:

1. Either hire an in-house development team that’ll help you with coding these websites (which is costly and hard to manage),
2. Or outsource it to some external development agency to free-up your time, cut costs and save yourself from all the HR and management headaches.

If you’re sold on the idea of outsourcing, I will help you make your next outsourced design conversion project super successful with the tips given in this article.

These tips come from my experience running a WordPress agency that specializes in design to WordPress conversion projects and from the projects we do for our clients every single day.

Let’s start with a contradictory tip:

1. Do Not Outsource If You Can DIY (Do-It-Yourself)

Let’s start with the first rule: Never outsource a project that you can build yourself.

With the availability of website building tools like WordPress and its page builders, building websites with no coding knowledge is easier than ever before. 

If your next project is a simple business/marketing website with a bunch of simple pages, don’t waste your money on hiring a web developer.

Instead, teach yourself one of the popular themes and page builders and use that combination to build your next website. 

Now there’s a little learning curve here if you have never actually built a site yourself, but it’s definitely going to help you in the long run.

You can get started with the following tools that we use internally for our client websites:

1. Astra Theme – this is a flexible and multipurpose base theme that you can use to build pretty much any kind of website.
2. Astra Pro Plugin – this is an extension plugin for the free Astra theme and makes the theme even more flexible.
3. Beaver Builder Plugin – this is the page builder of our choice, mainly because it’s super easy for the clients to use, highly flexible and extensible code-wise. It easy to learn and you’ll be able to start using it in no time.
4. Ultimate Addons for Beaver Builder Plugin – this one is an extension to the Beaver Builder plugin that adds 40 extra modules to it. Beaver Builder and this addon plugin combined have a sufficient number of modules that you use to make pretty much anything.
5. Gravity Forms Plugin – this is the last form builder plugin you’ll ever need for making any kind of forms.

Most the these are paid, but the combined cost of these will be lesser than what you’d spend on hiring a web developer.

Actionable Tip: If you have an upcoming website project that’s simple and the client is not very demanding, I suggest you try to build the site on your own using Astra and Beaver Builder. Checkout our design to WordPress conversion tutorial and spend a few hours learning these tools to implement on your project. If you can pull it off well, you’ll be able to save thousands of dollars by not needing to outsource development.

2. Don’t DIY If You Can Outsource

So this one is completely opposite of what I just discussed above. Never ever try to build a site yourself unless you’re 100% sure what you’re doing.

Let me explain this with a story. 

I had a client recently who came with his educational site for kids. He wanted us to add a little functionality to his website. The site had multiple pages on Maths, Science, English, Learn to Color, Games and so on and there were around 50+ such pages.

Every page had identical structure and each one had a grid of 6 to 9 educational videos that opened up in a popup.

The site looked great from outside until I saw what was on the backend.

I was amazed to see that he had manually created each and every page on the site using a page builder and created around 200 individual popups manually using a popup maker plugin. 

That’s like having an eCommerce site with 1,000 products and creating 1,000 individual pages manually for every single product statically.

If you know how to code even a little bit, you’ll understand what this means. 

He made everything so static that to make a little change globally to the pages or the popups he’ll have to go and edit each and every one of them manually.

Imagine if the site grows to have 500 or maybe 1,000 such videos. It will be a nightmare to manage the site.

If we (or any other experienced developer for that matter) would have made their site from scratch, we would have made a single template file for the pages and a single template for the popup and kept all the data in the database that can be then fetched and rendered via the templates.

What’s interesting is, this was not the end of his issue. He asked me if I knew a mobile app developer who can convert the site into a mobile app.

Now, we do not do mobile apps so I suggested he look for someone else but warned him that it would cost him at least 5X of what it would normally cost to get the app done. 

This was because there was nothing on the site that could be dynamically pulled using API and rendered on a mobile screen.

And that’s exactly what happened. The app company he went to came up with a price that was over the moon for him and told him exactly what I warned him of.

You see, like this client, I meet a lot of designers who make this exact same mistake. They learn a page builder and basic theme customization and try to build everything with that limited knowledge.

This makes the project complicated and almost impossible to manage and fix at a later stage and the only option that remains is to redo the site from scratch.

I’m not telling you this to discourage you from doing it yourself, but just warning you so that you do not lose your valuable time and money doing something you’re not 100% sure about.

So next time you have a website project think twice before building it yourself and see if you might be better off getting help.

Actionable Tip: Before starting to build the website yourself research if you can build the complete website using available themes & plugins or not. For example, you can build a full-fledged eCommerce site by simply installing Woocommerce on WordPress. But let’s say you want to put the wishlist button on the right of the product image instead of left, probably you won’t be able to do that without knowing how to code. So unless you’re 100% sure that you’ll achieve the results with your skillset and the available themes and plugins, don’t do it yourself.

3. Design For Web and Not For Print

This advice is specially for noob website designers. I usually see this being done by web designers who’re just starting out with designing UIs for the web and by designers who’re switching from traditional print designing.

Here’s the thing: you don’t design websites the same way you design a brochure, pamphlet, magazine or any other print design. There are certain standards you need to follow when designing websites and they are very different in a lot of ways from how you’d traditionally design for print.

For example, when you design a website… 

• you design it for specific user experience and to achieve a particular goal (like user consuming content, getting their information or having them buying a product or service), 
• you usually design in a grid pattern so that it looks good for most screens,
• you always use web-friendly fonts which are small in size so that the page load speed is fast,
• you keep different browsers and screen sizes in mind when designing for maintain responsiveness of site,
• the images and colors you use must be selected in a way that allows users to look at them for a prolonged period without straining their eyes,
• and so on…

A full-blown book can be written on this subject as there’s so much to talk about how to design websites properly. To keep this post short, I’m not getting into all of that but sharing two blog posts I found on this subject. 

I highly recommend you read them:

• 17 mistakes graphic designers make when designing for web (10-minute read)
• 4 key principles of web design by Alex Bigman (7-minute read)

These two cover almost all the basics you need to know about designing websites.

Now when you design websites the right way, it makes the development process becomes super fast and super easy for the web developers that in turn helps you reduce costs dramatically.

The more fancy art you put into your designs to make it look beautiful (and not follow the standard web design guidelines), the more difficult it becomes for the developers to convert them to a website.

A lot of times they either end up not being able to build the site exactly like the designs or consume a lot of time that shoots the project cost through the roof.

So if you want your next project to be cost-effective and efficient follow this tip and you’ll be good to go with any developer you hire.

Actionable Tip: Don’t go to the next tip unless to read the articles I’ve shared above. They cover pretty much everything I could have written related to this. These articles will totally change your perspective on designing websites and will give you a lot of insights to make your next project better than the earlier ones and much more cost-effective.

4. Set a Realistic Budget

The main reason you outsource (instead of hiring someone locally) is largely to save costs. But you have to be realistic about what amount you want to pay to your outsourced website development team.

If you charge your clients around $10,000 or more for the full website design and development, you should put around 30% to 50% aside for the Design-to-WordPress conversion part with a buffer of 10% for any unexpected costs.

The exact amount depends upon whom you’re hiring and their expertise, but with this budget, you should be able to hire some of the best talents from countries like India or the Philippines.

One important thing to remember is to not go too low on your budget to increase your profitability and know exactly what to expect from the money you’re willing to pay.

This is something you can’t figure out in one go from the first project itself, but as you work with more and more developers you’ll gradually find out the perfect partner that’ll help you achieve exactly what you want in your budget.

One more important thing, do over-negotiate to bring the developer’s quote down to your budget level. The more you try to bring the price down the more resentful the developer would become and that would bring the morale of the whole team. This impacts the performance of the developer and the quality he/she delivers.

Also stay away from developers who quote some amount and then agrees to work for a lot less than quoted. Usually the best developers and development teams have standard pricing and they don’t compromise on their quote just to win the project. If you find someone who quotes a random amount but agrees at a much lower price you can easily assume that they’re more focused towards meeting their monthly sales targets and less on delivering any true quality work.

Actionable Tip: Make a thumb rule that if the developer is not ready to work in your budget and is quoting more, either increase your budget or just walk away to find someone else who might do it in your budget. Web development is a long term game and unless everything both you and the developer are comfortable from the very beginning you’ll face the consequence down the line from your developers who might not do your project with a full heart.

5. Hire for Competence and Not for Price

This brings me to the next rule which is connected to the previous one. Whenever you hire an outsourced web developer or a development team, hire them for their competence and not the ones with the lowest quote.

As the saying goes: you get what you pay for.

Web development is a very competitive niche with millions of web developers and agencies in the market that are ready to win your project at such low costs that you can’t even imagine.

Just search for “web development company” and you’ll find gazillions of search results of the companies and freelancers who provide the service. The same case is with freelancer marketplace sites like Upwork, where the developers are competing with thousands of other developers to win your job quote with their lowest bids.

Think about it – if a developer is really competent and skilled, would he/she quote least amount possible to win a job?

So be wary about hiring the developers with the lowest cost and hire the ones who would not only provide maximum value for money you pay, but also deliver the exceptional quality code. 

But, how do you find excellent developers and figure out the right price to pay them?

It can be overwhelming to find one among so many of them offering who’re offering the same service. 

But there’s an easy way to do this.

Have a look at the screenshot below from Upwork.com:

I did a quick search there for WordPress Developers to find out the Average Hourly Rate of the Best Developers in India.

I filtered web developers…

1. who’ve earned minimum $10k on Upwork
2. who have a minimum job success rate of 90% on Upwork
3. who have been billed a minimum 1000 hours on Upwork
4. who have claimed that they have Fluent English.

The developers who showed up in the search results can be easily called best web developers on the Upwork platform.

Now, notice the red outlines I’ve made. You’ll see that the hourly rate comes in the range of $10 to $30 per hour for the maximum number of these top developers. 

On inspecting further you’ll find that most of them were actually in the range of $15 to $20 per hour.

So looking at this, you can assume that if you want to hire the top WordPress Developers with the highest ratings, work experience, and a proven track record, $15 to $20 an hour is what you should be ready to pay for. 

At Fantastech, we charge $20/hour to our clients, which sits perfectly in that price range. Now if you compare that cost to the US average of $37.18/hours, that’s almost half of the cost that you will pay to a web developer in the US. 

That means double the profit you can keep with yourself by outsourcing and still work with the best developers of the lot.

Actionable Tip: To make your life easy I am sharing the exact filter I used for the above example. If you use Upwork for finding talent, you’ll find it useful. Click on this link here to open the search page on Upwork with the filters selected. You can then go through the profiles you find and contact a few of them to know their quote and finally outsource your design conversion project to them. But if you want to save time, you can also reach out to us with your designs for a quick, free quote.

6. Prepare Clear & Detailed Instructions Document for your Developer

Know exactly what you want and put that on paper. A lot of times we get web designs from the agencies and they say go-figure. That’s a recipe for disaster. Unless you’re super clear about what you want and document it in a way that the developer can fully understand the functionalities, there’s a great chance the project may go in wrong direction.

Here are some tips that’ll help you prepare clear and detailed instructions document for your next web development project for your developer:

1. Set a goal – Every project has an overall goal, so make sure this is stated upfront. If you need the developer to build a pixel-perfect site that is optimized for speed, make sure you write that specifically in the document. This way the overall goal is clear to everyone before the project starts.
2. Provide as much detail as possible – Give all design-related metadata, links to design files, link to assets, website sitemap in the instructions document. I’ve prepared a simple template document for you that you can use for your next project. Make a copy of the document and edit as your own.
3. Explain everything briefly – Explain each section of each page briefly in terms of what you want. In most cases, you’ll not need to put the explanation in sections that are straightforward like sections with just text and images or section with simple 3-4 columns with icons, heading, and text.
   
   But for the more complex ones, you can explain what you want to achieve from each section and element on the page. For example, if you want a particular type of animation effect when users scroll to a section, or you want the button to change its color on hover or clicking on a particular button to open a popup or take the user to another page and so on.
   
   These may seem like small things, but when the developer is not clear about these things the project can easily go towards a completely unintended direction.
4. Keep It Simple – You don’t want to waffle on things that aren’t relevant to the project. This can lead to confusion in the same way that too little information can. It’s also wise not to communicate too many things at the same time.
5. Make Sure They Understand the Instructions –  Let the developers go through your instructions once and then have a call with them to go through everything in detail so that everyone is on the same page. Always confirm with the developers that they understand what is expected of them and that they have everything they need for the task at hand.

Of course, there’s likely to be a few moments when instructions will be misunderstood. Even when you’re careful with your instructions, you can’t always anticipate a perfect outcome. 

When miscommunications happens, view it as an opportunity to learn and reassess your instruction writing process. Update the document or have a call with the developer to get the thing sorted.

Actionable Tip: Use the template I shared above on your next design project. Make a copy of it and write all the details of the project in the same format as given in the document. Make it as detailed as possible and make sure you include all details about the project. Create a folder on Google Drive or Dropbox or whatever file storage service you use and add links to each file from this document. This will make the whole process very smooth for you and your developer.

7. Test Your Developer Before You Hire (1-Page Competency Test)

As the title suggests don’t hire a developer you’re meeting for the first time right away just by looking at their credentials, past feedback, portfolio and what they say in your first meeting.

You can use what I call as 1-Page Competency Test.

When outsourcing design to WordPress projects, you have a special edge, compared to other kinds of development projects. As all such projects start from designs, you can outsource a part of it (like 1-page) and hire a developer to test their competence before hiring for the full project.

All you do is hire the person you’ve shortlisted for a short paid test where you pay them to convert the first page of your website design (usually the homepage). 

Spending a small fraction of the total project amount on this short test can be really useful to weed out the developers who might not be able to deliver the results you’re looking for. By the time they deliver the first page, you’ll have tasted the full delivery cycle working with them, the quality of code they can deliver and their communication.

When you’re 100% sure that you’ve found the right developer, you can hire them for the rest of the project or else look for another developer. This helps you to avoid making wrong hiring decisions.

I suggest this test to all our prospect clients to help them test us if they want to get a taste of what we can deliver in terms of code quality and overall project experience.

Actionable Tip: In your next web development project outsource the conversion of your first design page and test the developer in terms of quality and communication and see if you’d like to continue working with him/her. I’ve given a detailed quality assurance checklist that you’ll find in Rule #10. You can use that to test the quality of code delivered to you.

8. Be Patient And Don’t Micromanage

After the developer starts working on the project, be patient and don’t micromanage the project.

Don’t expect your developer to report to you every few hours or every day with the progress and don’t bother to give your suggestion on every little thing he/she does.

This is a common cause of conflict on projects. 

From the web developers’ perspective, they think they have been hired for the skills and expertise they bring to the project. They want to feel responsible, valued and empowered. 

Micro-managing them destroys trust and can lead to a lack of confidence and motivation. However hard it feels, letting go of the reins is essential to the well-being of your project.

It can be hard to let go and trust people. However, that trust is almost always repaid. All top web designers and agencies know this and that’s how they treat their developers. 

Even if you know the technical side of things, don’t bother your web developer every now and then to ask how he/she is doing specific parts of the website.

But this does not mean, not to keep in touch with them at all. Before starting the project mutually agree with the developer on when they need to report to you and what you expect them to deliver each time.

Actionable Tip: On your next web development project distribute reporting from the developer over the overall project duration. You can ask your developer to keep you updated on the project once a week every Monday or Friday. Or you can ask them to report twice every week on Wednesdays and Fridays if you’re not very comfortable to wait for one whole week. 

9. Be Available When Your Developer Needs You

This tip is related to the previous one. Opposite of micromanaging is disappearing completely after the project starts.

After the developer starts working, it may happen that he/she may need some information in order to move ahead with the project that got missed in the instructions document.

Now your next meeting with the developer is on Monday but you’re not available to respond to his/her query, the project might just halt till the time you’re back.

This does not just waste everyone’s time but the project delivery to your client is delayed as well.

You might not feel that this is a big issue, but I’m telling with my first-hand experience. We’ve had clients who thought they gave us all the information and went for a vacation with no way to contact them, only to know after coming back that they sent me the wrong files or did not send all the design pages.

Even if you decide to do weekly meetings as suggested above, be present at other times, just in case the developer needs to clarify some doubts.

Actionable Tip: Create a Whatsapp or Skype group or a Slack channel in which all the stakeholders are present along with the developer and project manager. This way you can have open communication with everyone involved in the project and no delay happens because of non-communication. 

10. Do An All-round Quality Check

This is one of the most important tip. You outsource design to WordPress conversion projects to save cost and free up your time, but that should not come at the cost of a poorly done website.

You must make sure that what you’re receiving is top quality code that you can deliver to your client proudly. 

If you’re not a developer, you might not know all the minute technical details of what to check on the delivered website, but to do that effortlessly can use my 10-Point Quality Assurance Checklist that I’ve described below.

This is a short version of the checklist we use internally to make sure the websites we deliver to our clients are perfect and QA passed.

You can use this for your next website project.

Here we go:

1. Basic website check – Check the basic details like text sizes, colors, images, fonts, layout width etc of the site to make sure they’re exactly the same as documented in the instruction manual.
2. Pixel-perfect test – Open the website on the browser and open the design file next to it and check each and every section on the various pages one-by-one to make sure if they look identical. If not report to your developer.
3. Check the links – Click the buttons and links on all the pages to see if they’re going to the intended pages. Check if the developer is using absolute or relative links.
4. Check the forms – Submit the Newsletter, Contact and all the other forms on the site and see if you’re getting an email or not and if the data is getting added to your CRM (if that integration was needed). Email setup is something web developers usually forget about while delivering.
5. Check other functionalities – Check all the functionalities on the website and see if everything is working fine. If it’s an eCommerce site, do a start to end test from opening the site to adding the product to cart to checkout. Check if everything is working smoothly as expected or not.
6. Cross-browser testing – Run the site on all the web browsers and devices that you have and make sure everything is working everywhere. If not report to your developer immediately.
7. Page load speed testing – Notice how fast the website is loading on various connections like your broadband and on your phone’s mobile data. Use tools like Pingdom, GTMetrix and Google PageSpeed Insight tool to make sure you see a good grade and green light on all of them.
8. Security testing – Test if the developer has used a strong password for the website backend. If the developer has used a Content Management System (CMS) to build the website make sure he/she has not used cracked premium theme or plugins as these might contain malware that can infect your website. Ask your developer to do a Malware scan and also install a basic firewall on-site if possible.
9. Themes and Plugins testing – If a CMS is used to build the site, check the number of plugins used by the developer. Most websites do not require a ton of plugins and if you see 20+ plugins, it’s a big red flag. Ask the developer to explain the use of each and remove the ones that are not absolutely required. This will not only help in performance but also unclutter your CMS dashboard.
10. Take a test drive of WordPress backend – Go through all the options in the backend and see if it’s easy to use and if you’re able to make edits and if those are getting reflected on the frontend. Understand how everything works so that you’re able to then train your client with the same.

That’s it. If you are able to get the site with all these taken care you’re good to go and show it to your clients.

Actionable Tip: When you get your website delivered the next time go through this checklist and make sure the developer has delivered on all these points.

Conclusion

So these are my 10 tips on outsourcing design to website conversion projects that’ll help you outsource your projects successfully and get the pixel perfect websites built with minimum hassle.

I hope you found this article valuable. If you want to learn more about how we can help you with your design conversion project, feel free to contact us or send us you design files for a quick, free quote.

The post 10 Tips on Outsourcing Design to WordPress Conversion Projects Successfully appeared first on Fantastech.co!.

It is a cycle that involves multiple iterations, feedback loops, redesigns and redevelopment of features. Even when the product is available for beta release, there will still be changes in the designs followed by changes needed in code of the website or app.

As we’ve been in the development side of things for last many years, offering design to code conversion services to web designers and agencies we know that to ensure effective collaboration between designers and developers, a proper design handoff must take place.

In this article, we will explore overall design handoff and they available tools in the market that allows designers for successful collaboration with the developers.

The Design Handoff Workflow

Design Handoff is a stage during website or app development process where designers send the finished designs to developers for converting it to code. A successful design handoff involves a strong collaboration between designers and developers.

In a nutshell, here’s how the design handoff workflow goes:

• Designers use website and app UI design tools like Adobe XD, Figma, Sketch etc to create a mock up design of a product.

• The mockup designs are then uploaded to a design handoff tool for inspection by the team members, stakeholders and the developers.
  
• Those involved in design decisions, such as stakeholders, check the design and send their comments back to the designers accordingly. This collaboration between stakeholders and designers is made possible by the commenting features usually offered by the design handoff tools.

• Designers fix issues or redesign according to comments.

• The updated version of the mock up design is sent back to the stakeholders for their final approval.

• After approval, the developers come into the picture who inspect the design and its layers using the handoff tool.

• Each element of the design is then converted into code by the developer who take use powerful code inspecting features of these handoff tools. From colors, typography, padding, margin and more, design handoff tools help developers get the exact values of every single element of the pages designed to help them create pixel perfect websites/apps.

With design handoff tools, designers do not have to spend a large amount of time manually writing design specs or creating style guides. Instead, developers can go straight to development using the handoff tools and save a lot of time and resource in the process.

A design handoff tool makes collaboration easier between designers, developers and stakeholders. Below, we list down the best handoff tools available in the market today, their features, pros, cons and more!

Best Handoff Tools Compared

1. Zeplin – the leading design handoff tool in the market.

Zeplin allows designers to easily turn their designs into specs and guidelines while giving developers access to all of these resources in a single location.

Recommended for

• Both small and large projects.
• Teams looking for a technical handoff tool that includes a style guide.

Pros

• It can integrate designs from Sketch, Photoshop, Adobe XD and Figma.
• Users can organize its component overview feature into sections.
• You can organize different screens with tags, a feature fit for larger projects.
• Single screens can be downloaded into PNG files for presentations and other uses.
• It offers effective team collaboration through its commenting feature.
• You can generate an automated style guide and excellent code snippets.
• Its web preview feature can also be used as a pixel overlay.

Cons

• No prototyping.

Pricing

• FREE for one project
• $17 per month for 3 projects
• $26 per month for 12 projects
• $10.75 per month for UNLIMITED projects

2. InVision Inspect

InVision Inspect is a handoff tool made by the cloud-based design platform InVision. This tool is the company’s response to help make the design handoff process easier for the designers & developers.

Recommended for

• Collaboration during the design process (mockups, prototypes, and discussions)
• Technical handoff for smaller projects

Pros

• It has a prototyping feature fit for creating prototypes.
• You can also handoff your designs from Sketch and Photoshop.
• It has a mobile app feature fit for mobile mockups that can even be previewed on the desktop.
• It offers a live chat feature that is very useful for remote teams.
• It also has a grid overlay feature.

Cons

• It does not allow proper screen organization.
• Its overview page can be a bit messy, especially when using the same project for both prototyping and technical specifications.
• It may offer various features, but it is best used for handoffs involving mockups, previews, and discussions than technical handoffs.

Pricing

• FREE with limited features
• PRO – $9.95 per month for up to 15 active users
• ENTERPRISE – per seat pricing

3. Avocode

Avocode is another pure handoff and collaboration tool that helps developers build web and mobile apps exactly like how they were designed. Using this tool both designer and developer can collaborate on designs from Sketch, Adobe XD, Photoshop and more.

In fact, this is the tool of choice that we use at our agency for inspecting designs that we get from our clients.

Recommended for

• Neat and organized teams.
• Development teams who want an all-in-one platform to manage most design formats.

Pros

• It allows users to export needed assets from any layer in various formats, therefore eliminating the need to set up assets.
• Users can create project subfolders.
• Its overview page has a search box, best used when multiple screens are present.
• It has a separate tab feature.
• It has an overview feature for icons.
• Its Sketch plugin allows for direct uploads and downloads to and from the Sketch.
• It has features like commenting and annotating for team collaboration.
• It has an excellent web preview.
• For pixel-precise designs, it offers a pixel-checker.
• Overall, a clean and functional UI design.

Cons

• To ensure its asset export feature works well, both file structure and naming must be neat and tidy.
• It does not offer any free project plans.
• Along with no free project plans, it also only allows limited guest users for projects.
• Sometimes there’s a font loading issue where the app is not able to render fonts correctly.

Pricing

• SOLO – $15 per month
• TEAM – $22 per month per member
• ENTERPRISE – custom pricing

4. Sympli

Sympli is a design handoff tool that helps you inspect your designs and convert those to website and app code. It consists of extensions for Xcode and Android Studio and also plugins for Sketch, Adobe XD, and Photoshop and is truly an all-in-one design handoff tool. On top of that, it introduces the world of git version control to the different version of the designs.

Recommended for

• Remote design and development teams.
• Large teams that need version control for their designs.

Pros

• It has an excellent desktop and mobile interface.
• It has plugins for Android Studio, Xcode and Adobe XD, Figma, Sketch and Photoshop.
• You can integrate it with Jira, Slack, Microsoft Teams and a lot of other apps.
• It has Git support through its Git-based app called Versions.
• Other than the default css, it also offers different css syntaxes such as scss, less, sass, and stylys.
• It can easily show all elements that have the same color or font.
• It has a drag and drop editor.
• Users can use tags in their designs to group them according to status.
• It also has team collaboration features like commenting or annotations.

Cons

• Its real time editing feature is limited.
• Measurements may sometimes mess up if multiple components are overlapping, especially for designs made for Android.
• Exporting Android designs needs more time because it needs to be processed first before syncing.
• It is also sometimes hard for developers to find the css details of design elements.

Pricing

• FREE for one active project only with three maximum collaborators
• STARTUP  – $4.5 per seat per month
• BUSINESS –  $9 per seat per month
• ENTERPRISE – custom pricing

Zeplin vs Invision vs Avocode vs Sympli – Conclusion

To sum up, Zeplin is an all-in-one tool that can be effectively used for design and technical handoff. This is because of its ability to generate excellent style guides and codes while allowing team collaboration through its commenting features.

Meanwhile, InVision Inspect is a tool perfect for mobile prototypes. However, when used mainly for technical handoffs, it’s best used for smaller projects.

Now, moving onto Avocode, the only handoff tool in the list that does not offer a Free plan. This tool is the most organized among the others, offering a clean and functional UI with search features.

Finally, Sympli, the tool that’s again an all-in-one tool that integrates with a ton of design tools. Its Git support is a great perk for all teams who need version control.

We’ve only listed down the top design handoff tools for this year. However, there are actually more tools out there that you can explore, from Abstract to Marvel and staying using UI design tools Adobe XD and Figma and using their native handoff capabilities.

Let us know what you think about these tools. Have you used any of these tools in past? Or do suggest any tool that we did not cover in this article? Do let us know in the comment section below.

The post Best Design Handoff Tools Compared: Zeplin vs Invision vs Avocode vs Sympli appeared first on Fantastech.co!.

There are over 50 apps available in the suite, but there are main apps that truly stand out. From Adobe Photoshop to Illustrator and more! But, let’s look into the growing Adobe software that has been competing effectively with its competitors: Adobe XD.

This article introduces Adobe XD, the tool mainly used for web and mobile prototyping, and its 10 Best Tutorials for Beginners and Advanced Users.

What is Adobe XD?

Previously known as “Project Comet,” Adobe XD or Adobe Experience Design was launched in February 2016. It was then only a preview version that only catered to Mac, and with very limited features presented. But, as more updates were introduced and more features added with feedback from the growing user base, Adobe XD has grown quite a competition to fellow wireframing and prototyping apps like Sketch and Figma.

In fact, earlier Sketch conversion was one of our most popular services but Adobe XD to WordPress conversion projects have surpassed that in recent years and majority of design conversion projects we do today are for Adobe XD designs.

It works for web designers as an excellent vector-based digital design tool using which you can create prototypes, mockups, or full designs while collaborating with other team members.

There are many benefits that Adobe XD offers to the web design community. If you’re an aspiring designer or you simply want to explore this tool, here are the 10 best tutorials for Adobe XD for beginners and advanced users.

Let’s begin.

#1 Quick Start for Adobe XD

What’s a better way to begin than to learn from the creators themselves?

This tutorial by Adobe shows users how to make a prototype in Adobe XD. It consists of three parts that give the users a general idea of the tool’s features. It has an overall six easy steps with added videos for steps 2 to 6. It starts with creating a design, turning it into a prototype, and sharing it with other developers for feedback and testing.

#2 How to make a pop-up overlay in Adobe XD by Artist Erica Larson

Another tutorial straight from Adobe.

The best way to learn is to experience it yourself. This tutorial is the first part of their “Create your prototype” tutorial, consisting of three parts in total. It first shows a 1-minute video of all the steps involved in making a pop-up overlay in the software. Here you’ll learn how to duplicate artboards, hide some elements, include a menu, reveal the previously hidden elements, and see the overall result.

#3 Beginner Project: Make A Responsive Design by Designer Cynthia Fong

This is part of the beginner’s projects offered by Adobe.

Here, Cynthia Fong shares how users can design app layouts fit for different sizes while creating a great user experience. It starts with a 1-minute video of all the steps involved. Users will learn how to enable the Responsive Resize tool and how and where to use it. 

#4 Projects To Get You Started: Create Icons With Basic Shapes

The world of apps and the web are filled with icons. That is why this tutorial shows users how they can create icons with even the most basic shapes with Adobe XD.

Like all tutorials offered by Adobe, this tutorial has an available sample file you can use. Learn how to replicate elements by using Repeat Grid and refine shapes to your liking.

#5 Learning Adobe XD by Tom Green

Now that you have been introduced to some of Adobe XD features, it’s time to deep dive into it.

Tom Green introduces not only the basics of Adobe XD but also the more exciting features such as auto-animate, integration with Photoshop, Sketch and other developer tools. You will also learn more about artboards, interactive prototypes, and how to test them in preview panels.

#6 Adobe Xd Ui/Ux Design, Prototype, And Handoff From Scratch by Caleb Kingston

This tutorial caters to those users who already have the basics covered. So, if you went through the previous tutorials mentioned above, you’re ready for this class by Caleb Kingston, a User Interface teacher at www.appdesigntips.com. 

With over 6,085 students and a rating of 4.5, this tutorial begins with a few basics and proceeds immediately to the more complex works such as designing and prototyping a full-fledged app. It includes the use of images, colors, and exciting animations.

#7 Adobe Xd Animation – Complete Guide From Icons To UI by Aleksandar Cucukovic

The previous tutorial introduced the animation feature of Adobe XD. In this tutorial, Aleksandar guides students on everything they need to know about Adobe XD Animation.

Students will learn how to animate icons, buttons, texts, charts, and other elements. Along the way, it will also show students how to design a mobile app with all the necessary animations.

#8 Design a landing page experience with Adobe XD and Photoshop

This tutorial is part of the XD Tutorial for Photoshop users by Adobe.

The highlight of this tutorial is that it shows users how to edit content from Photoshop within Adobe XD. It includes three steps: (1) Users start creating a wireframe for their landing page, (2) followed by transforming mockup wireframe into a full high-fidelity design, (3) and of course it ends by sharing the prototype to other users for feedback.

#9 Pro-level Android App Design with Adobe XD & Google Material Design by Muhammad Ahsan

Since web design is covered in the previous tutorial, this tutorial will focus on creating an app design with Adobe XD.

Muhammad Ahsan has been a UI/UX Designer for 10+ years, and here he details how to create an android app design according to the guidelines set by Material Design and Adobe XD. It’s an advanced tutorial that teaches students how to design android apps at a professional level.

#10 Adobe XD Masterclass: UI Design by Joseph Adam

The final tutorial in this list is another professional course that teaches students how to use Adobe XD effectively that by the end of it, they can design their own website and app interfaces with complete confidence.

All in all, Adobe XD is no doubt a powerful tool, and with all the available tutorials out there, you will surely learn to find your way around it, integrate it into your design workflow, and produce stunning website designs.

The post 10 Best Adobe XD Tutorials for Beginner and Advanced Users appeared first on Fantastech.co!.

No matter what tool you choose for designing your websites (Sketch, Figma or Adobe XD), you can follow the instructions given in this post to convert your designs to WordPress.

2 Different Methods of Prototype to WordPress Conversion

When it comes to conversion of designs to WordPress, there are just two ways you can do it:

1. Create custom WordPress Theme – You can start from scratch and create a custom WordPress theme. In this you convert your design prototypes to HTML and then convert those into a WordPress theme. You can also start directly by building your custom WordPress theme using something like Underscore.
2. Use a Theme and Page Builder – The second way is, you can build your WordPress site using a powerful base theme like Astra or Divi and a page builder like Beaver Builder or Elementor.

The first method is extremely tedious and you must know how to code in PHP and WordPress in order to convert your designs this way. It’s also more time consuming. But there’s a benefit to this method and that is, you have more control over the quality of code you produce and if you follow the WordPress coding standards you can keep the theme very clean and light weight.

In this post we’re not going to covering that custom theme method and instead we’ll be covering the page builder method.

If you want to learn how to do it using the custom theme, there are pretty of good tutorials present online like this and this. Both of them are very comprehensive and you’ll find them very useful.

Design Prototype to WordPress Conversion Process

Let’s look into the process of how you can convert your design prototypes in Figma, Sketch or Adobe XD into WordPress website. It’s important to understand that we talk about conversion of designs to WordPress, we’re not talking about directly converting them using some magical tool.

We’re instead talking about using the designs as reference for our development and keeping the designs next to WordPress to build the website looking at the design files.

The process is quite simple and can be summed up in 6 simple steps:

1. Pick a powerful, base WordPress theme
2. Pick a page builder plugin
3. Setup global theme settings like layout, typography, colors etc in Customizer/Theme Options
4. Setup global settings in page builder
5. Build the header and footer using theme options or using page builder.
6. Build homepage and then rest of the pages

Let’s look at each of these in more detail below.

1. Pick a Powerful, Base WordPress Theme

The first and most important step is to choose a suitable theme for your project. You’ll find thousands of themes in the market, but we don’t need to go out for a search to find theme that matches our designs.

Instead we’re picking a theme that provides us with a lot of options and settings to build a solid website base, but does not have any design of it’s own. Basically a bare bones framework theme that is is flexible enough to be used with a page builder to build any kind of website.

There are a lot of such page builder compatible themes in the market like:

1. Astra
2. Page Builder Framework
3. Divi
4. Avada
5. Beaver Builder Theme

These are just few of the most popular ones, but you can find lot more on the internet by doing a search search. At our agency we personally use Astra theme as it comes with a lot of great features and is extremely light weight and flexible. The Astra Pro plugin gives even more power to the theme and you can use it to build pretty much any kind of website you want using a complementing page builder (discussed below).

Please note that, you might have a website project going on right now, but this probably won’t be the last website you’ll build. So while picking a theme make sure to pick one that you’re fully comfortable with and which is flexible enough that you can use it across all your future WordPress projects as well.

2. Pick a Page Builder

Similar to picking a base theme that’s powerful enough to let you build any kind of WordPress site, it’s important to pick a page builder that you can use across all your WordPress projects. Here are some of them that we like:

1. Beaver Builder
2. Elementor
3. Divi

These are also some of the most popular page builders in the market. You don’t need to look further away from these and can choose one of them. Just try the free versions for these plugins and pick one that you like the best.

At our agency we use Beaver Builder for most of the sites we build because we’ve found it to be least bloated compared to the other two, light weight and extremely flexible.

Pro Tip: Each theme and page builder has it’s own learning curve so our advise would be to choose a combination of theme and page builder stick to it. That way you’ll save time from unnecessarily jumping between themes and page builders which will in turn help you increase your overall efficiency and development speed.

At Fantastech we use Astra theme and Beaver Builder plugin combination for most of out client sites and have even built this particular site using the combination. So we’d definitely recommend this combination to you for your websites as well.

3. Setup Global Theme Settings

A WordPress theme is what is responsible for the global look and feel of any WordPress website. Most page builder framework themes (like the ones shared in the list above) provide you with the full range of settings to setup the website’s global page layout, font sizes, font family, colors, header & footer layouts and pretty much every other global setting you can think of.

With a powerful theme you can pretty much build the entire global page layout, header and footer for most of the websites. We use Astra with Astra Pro at our agency and it gives us a powerful set of options and features that allows us to setup the global styling of the website really fast.

These global setting are usually present in Customizer under Appearance in WordPress backend. But some themes like Divi create their own Theme Options page in the backend for doing these global settings.

Now an important thing to note here is these themes come with hundreds of very small settings that you can use to setup your website in any way you want, so it becomes important to learn the theme settings inside-out in order to best utilize all it’s capabilities.

So when you pick a theme make sure to spend at least a few hours to go through the documentation of the theme to know exactly what global settings you can get inside it. Some themes provide more control and others provide less control, so you need to think of this when choosing your theme so that you can move through this particular step more swiftly.

4. Setup Global Settings in the Page Builder

Like themes, page builders also have global settings in which you can set global values for the row and column paddings, margins, font sizes, max width and so on. Again, page builders also come with a ton of such settings and it’s important to learn the page builder of you choice fully, to make the most out of it.

5. Build the Site Header and Footer

Depending upon how complex or easy your designs are, you can build your headers and footers from right inside the theme Customizer settings (or Theme Options). Most themes provide you powerful settings for creating and styling the headers and footer and also manage their responsiveness on mobile and tablet.

If you have simple header with just logo on left and a menu on right, you can set it up by doing simple settings in the theme and creating a menu in the backend.

Similarly if you have a basic footer with a bunch of widgets and a simple footer bar, that’s also fairly easy to build in your theme using widgets and footer related theme settings.

Now there are two issues you might face with this:

1. You finish building the header and footer around 90%, only to realize the customizer does all required settings to finish it fully

It’s possible that when you’re building the header and footer, you’re 90% close to finishing it, but suddenly realize that the customizer does not have a few specific settings that you need to complete it.

In such cases, you might have do some custom CSS or create some custom HTML. These should not be an issue if you know basic HTML or CSS. But if you do not know how to write even basic HTML or CSS, now’s the good time to start learning.

2. The header and footer are too complex to be made using theme customer settings

The other issue you might face is that the designs contain complex header and footer that can’t be made using just the basic settings provided by the theme.

But there’s a solution for this. In most page builders you can build custom rows and sections and save them to be used else where. This opens up a whole lot of new possibilities of what you can build.

So you can build the complex header and footer in page builder itself, save it and then use the row/section globally on the site. In Astra Pro this can be done using Custom Layouts. In other theme there are other names to use the custom structure built in page builder globally on the site.

6. Build Homepage and then Rest of the Pages

So far, you’ve set the website’s global layout, setup the typography and colors and also built the header and footer, now it is time to build the content part for each part of the page, starting with homepage.

Now I don’t need to explain this step to you in detail because if you’ve used any page builder in past, you know how it goes. You start with editing the page in page builder, add rows, columns and modules and build different parts of the page.

In our experience we’ve found that a lot of times after we start building the homepage, we have to go back to steps 3 to 5 as we might miss setting up something global earlier. But it’s good in a way because when we complete building the homepage, we can be sure that everything is now complete in terms of global setup and we start with the internal pages.

The steps up to building homepage is what takes the most amount of time. But once the homepage is ready it becomes very easy to build rest of the pages and you can finish building all internal pages in no time.

So there you go!

This is probably the easiest and most efficient method to convert Figma, Sketch or Adobe XD designs to WordPress.

Does this still look a bit overwhelming?

If this looks a bit overwhelming to you, or you do not have the time to learn a new theme and page builder, that’s totally fine. You can still get your design prototypes converted to WordPress by hiring someone to do it for you.

At Fantastech, we provide conversion of Figma, Sketch and Adobe XD to WordPress as done for you services at very affordable pricing and can help you if you like.

If you’d like someone with experience and expertise to do it for you, do check us out.

And also do share with us what do you think about this method in the comment section below. We’d love to hear back from you.

The post How to Convert Website Design Prototypes to WordPress? appeared first on Fantastech.co!.

When designing in Adobe XD, plugins can play an important role in increasing your overall productivity and efficiency when designing a websites or apps. In this article we have curated list of some of the best Adobe XD plugins in the market.

Here you go…

Best Adobe XD Plugins

UI Faces

UI Faces plugin is a great tool that aggregates hundreds of thousands of avatars to choose from that can be used for your design mockups.

It lets you add attributes to your selected avatar such as age, gender, emotion, and hair color. It makes the task of finding photos easier, which saves time.

Lorem Ipsum

Lorem Ipsum is a pretty handy tool for generating random text for your layouts. If you are designing a mockup and you run out of texts to place, it generates texts for your design.

Lorem Ipsum provides a long list of dummy texts to choose from. It’s very easy to use and a big time saver.

Rename It

Rename It as the name suggests is a renaming tool that helps you in renaming layers and artboards.

You can either rename every layer with the same name or you can rename each layer with different names as per your requirements.

This plugin plays an important role in keeping your layers tidy and things organized.

Confetti

With Confetti, you can generate absolutely gorgeous confetti patterns in a click. It even allows you to design your own confetti.

You can make the most out of this plugin by creating beautiful confetti for your design.

Userlytics

Userlytics is a user testing platform that lets you configure and create user experience tests within your XD prototype.

It provides you tools to get feedbacks from your target personas and interact with them

Artboard Plus

Artboard Plus is a great plugin that helps you speed up your workflow in XD. This tool lets you rearrange artboards into grid, you can also sort the artboard by name or create it around selection.

It also provides you to sort artboards in ascending or descending order by name in the layer list.

Trello

The Trello plugin allows you to integrate your XD designs with Trello to help you collaborate with your team and keep everything organized.

The plugin lets you send your design assets to Trello for later reference. You can also share artboards and layers with your team on Trello.

Photo Splash 2

Photo Splash offers you thousands of photos to use in your design, plus it also targets specific photo needs as per your designs.

Added features let you select the quality of the images and any screen size you want. It’s truly a one-stop destination for finding stock photos.

unDraw

unDraw is another good plugin that lets you bring beautiful illustrations right inside Adobe XD, without attribution.

One of the best features is that you can modify every colour of the illustrations you use. Also, it needs no sign-up, you can just browse and download.

Vizzy Charts

With Vizzy Charts, you can generate charts using real data within your design project. You can choose a chart from a variety of charts from their menu.

To create charts, you can either use the default setting or you have the option to tweak colors, sizes, and spacing.

Google Sheets

With the Google Sheets plugin you can improve your designs with insightful data and visualizations.

It provides easy collaboration with your team and also lets you open a chat window in the document you’re working on. That way you can edit or review what your team members are working on.

Stark

Stark is good accessibility plugin to help you make your designs more accessible, which is a very important aspect of designing.

Stark plugin provides features checking your design accessibility in regards to color blindness, contrast checker, and color suggestions.

Color Ranger

Color Ranger lets you customize the appearance of your design with light or dark themes, or creating one however you need.

You can adapt the brightness, saturation, hue, color depth, and opacity of your overall design or an individual element to see what color scheme looks good. New features include advances filtering, live changes, and more.

Yotako

Yotako is a plugin that converts your designs into apps and websites. You just have to import your design into the plugin and it converts it using swift and Objective-C for iOS, HTML/CSS for the web, and Android for android.

You can also have a repository under GitHub or Bitbucket, and even if you do not want to use the external provider. Yotako lets you download the zip file containing everything.

Although it does a decent job in design conversion, but it’s always recommend to get your Adobe XD designs converted to code by hiring a developer.

Dribbble

Dribbble is a leading community for designers to showcase their creativity. You can use this plugin to post your design shots directly from within Adobe XD to the Dribbble website.

You can also browse through shots posted by other creators and use them for your design inspiration.

Icondrop

With Icondrop, you get thousands of icons and illustrations for your design in XD. If you don’t find a resource that fits your need, they custom design as per your requirements at a reasonable price.

You can also choose from a list of designers and photographers and access their designs.

Cloud App

CloudApp is an absolute must for designers working in a team. It lets designers share their artboards and assets through screenshots to get feedback or reviews from their team.

You can even make a quick CloudApp video to make your point instead of lengthy emails and meetings. This plugin makes the collaboration between you and your team really easy.

Mockplus iDoc

Mockplus iDoc is a one-stop tool for faster product design collaboration. You can directly export your design file to this plugin for further enhancement.

Mockplus iDoc is a very efficient tool in generating specs, assets, and code snippets automatically. Other features include feedback to team members, measuring design elements, and more.

Web Export

Web Export lets you export your design to HTML and CSS with support for common web frameworks.

With Web Export, you can add styles and classes, align to all edges and corners, convert text into shapes and images and vice verse, convert images into vector graphics, and do much more.

Angle

Angle has got you covered with hundreds of vector and 3D device mockups with a variety of colors and styles. You can even place your screen into perspective mockups they have created.

They offer 50 free mockups to try and get the hold of their plugin before you switch to their paid offerings.

So, there you go!

That’s it from our side for now. You can check out these best Adobe XD plugins and pick out what’s best for your project and your design workflow.

If we missed any plugin that you like, feel free to share them with us in the comment section below.

And after you’re done with designing your XD designs, do checkout our Adobe XD to WordPress conversion service. We can help you convert your XD designs into fully-functional WordPress website code at a pretty reasonable.

The post 20 Best Adobe XD Plugins For Web Designers for 2022 appeared first on Fantastech.co!.

The Discovery

A few weeks back when I was going through our Facebook Ads reports, I got really excited to see the average CPC we were getting for our top of funnel campaign.

It was pretty low and the average click-through rate above industry average.

It was all good till I noticed something that made me really upset.

Although we were getting very cheap clicks, only around a third of people were actually waiting for the page to fully load and go through it (in Facebook ads you can see this by adding a column for Landing Page views in the reports).

That was a bit strange, because we were doing everything we could to bring the page load time to as low as we can.

To cross check, I put the URL in Pingdom to see the page load time that looked good:

As you may know, 891 ms is pretty fast but in real world scenario the page might not actually load that fast. The page may take a couple of seconds to load depending upon the user internet speed and distance from the closed CDN.. But those few seconds are still good. enough.

So I was not sure why people were not waiting even for those few seconds to see the complete page and leaving early.

Then I realized, the URL I was checking in Pingdom was:

https://fantastech.co/

But in my ads the URLs were something like this:

https://fantastech.co/?utm_source=facebook&utm_medium=feed&utm_campaign=direct&utm_content=video

We put UTM parameters to our website link to be able to track and measure our ads performance and for all these months we were trying to optimize the homepage and checking in Pingdom without the parameters.

So I put this link with UTM parameters in Pingdom, to my surprise, the load time was almost 3 times that of the link without UTM parameters!

On testing the link in browser, I found that it was taking more than 8 seconds to actually load the page according to my internet speed and location.

That’s too long for most people to wait for the page to load.

Why This Happens?

We use the W3 Total Cache plugin for caching pages on our website. When you enable Page Caching, the plugin caches all the pages as static HTML so that when a visitor opens the page, it loads the page super fast.

But when you open the same URLs with query parameters, like in our case with the UTM parameters, the plugin does not load the static cached HTML and instead loads the pages normally.

That is same as loading the page without caching plugin!

This applies not just to W3 Total Cache, but all caching plugins in general. So if you’re using a caching plugin and sending people to pages with query parameters, the caching won’t work on those pages.

So What Did We Do?

This was a big revelation for us and we realized that for all these months we were draining money with low ROI because people were not even seeing the landing pages fully.

We implemented UTM parameters based on the advice that it’ll help us “granularly track” our marketing campaigns and it made sense when we did it.

But we did not pay attention to the impact it was making on the page load speed.

Also, as we do not run a lot of different variations of ads and usually use the native reports from Facebook Ads and Google Ads to gauge performance of our ads, we were not paying much attention to the UTM report on Google Analytics anyways.

So we decided to get rid of UTM parameters from all our URLs from all ads.

Result

After we made this change, it’s now been over a month. We’re seeing that now, almost two-third of our clicks are resulting in landing page views.

That is twice as much as what we were getting earlier! We were able to double our ROI with a simple change like this and so far it all seems to be working out well.

I highly recommend you try this with your own ads.

Check your ads with UTM parameters and see how many people actually seeing landing page fully after clicking on the ad. Then remove UTM parameters on one of your campaigns that do not depend heavily on UTM tracking and compare the performance with the earlier performance.

If you see any major change in landing page views and in your ROI, you can thank me in the comment section below by sharing your results.

The post Advice to Marketers: Ditch UTM Parameters to Double Your ROI on Paid Ads appeared first on Fantastech.co!.

The market is full of all-in-one tools that not only let’s you prototype but also let’s you create wireframes, do full-fledged UI design and also let’s you collaborate with your team members. It’s important to find a tool that matches all these needs, is fast to use and saves you time.

So to help you out with your search, I have curated a list of some of the best prototyping tools in the market to help you comprehensively determine which tool best suits your needs.

Best Prototyping Tools For UI/UX Designers

#1 Adobe XD

Adobe XD is the leader in everything it has to offer. With XD, you can do wireframing, designing and prototyping of websites as well as mobile applications.

Collaboration is real easy and it integrates with its family apps like Photoshop, Illustrator, and you can also choose from more than 200 integrations to help you to get more out of your Adobe Experience Cloud investment. It’s fully integrated with Adobe’s Creative Cloud which which means you get a full fledged suit of design tools for your prototyping needs.

Also it’s super easy to hand-off the designs to your developer for code conversion with sharable design URLs.

It offers apps for all major operating systems like OS X, Windows, Android, and IOS. Adobe XD is everything that a designer needs to build high-end prototypes. It cost starts at FREE pricing with limited functionalities to around $23 a month per user if you want more features. You can check their full pricing here.

#2 Sketch

The Sketch app is well-known for its rich features and user-friendly interface. Design-focused features like Grids and Layouts, Resizing Constraints, Variable, and OpenType Fonts make it easier for you to work at your best.

Features like Reusable Components, Smart Layout, and Shared Libraries help you to scale your projects. Also Sketch has made the process of getting feedback and testing ideas painless, by offering features like Cloud Sharing, and Developer Handoffs. You can now share designs directly with your developers to convert them to code.

It also supports hundreds of plugins such as Plants, Overflow, and Chart to name a few. I’ve covered a bunch of them on this post.

Sketch comes with a 30-day free trial and you can then upgrade to a $99 lifetime license, which is perfect if you are a solo designer. If you have a team of contributors, you can go with their monthly plan of $9 per month per user.

#3 Figma

Figma is another popular option for you to explore. It lets teams create, test, and ship better designs from scratch to end. It’s a great tool where multiple designers can work together to make designs in a fully collaborative manner. With Figma, you can prototype while you design, and vice versa.

Figma comes with a lot of handy features to help you build a prototype. Some of the features are Intuitive build, Interactions, Mobile-optimized, Animated GIFs, Dynamic overlays, and much more.

Figma Integrations include Maze, Slack, Dropbox, Dribble, Jira, and more. It’s free for up to 3 projects and then $12 per editor/month for professionals.

#4 InVision

InVision provides you with everything you need for digital product design, all in one place, with tools for ideation, prototyping, and design management. You can streamline your workflow by using various integrations such as Slack, Dropbox, Jira, Basecamp, Trello, Microsoft Teams etc.

With InVision Cloud, you can draw, wireframe, and present your team’s best ideas on a shared digital whiteboard. You can also create powerful screen designs with fast vector-based drawing and flexible layer, add transitions, and micro-interactions to turn static screens into working prototypes, through InVision Studio.

With InVision DSM, you can create and maintain a shared visual language for design and development, push and pull library changes with Studio and Sketch plugin. It free to use for individuals and small teams, and starts at $9.95 a month for professionals.

#5 Framer

Framer is one of the best and simple to use prototyping tools to create interactive designs for designers, engineers, product managers, and teams.

It’s relatively new and has come into existence just few years ago, and already have a full-blown interactive design, prototyping, and collaboration set of tools trusted by teams at Dropbox, Twitter, Pinterest, and others.

Designers can start from scratch in Framer or import from their Sketch or Figma designs. The output is near-native prototypes that can be tested on real users with real-world constraints, so design decisions can be stress-tested from the start and no development resources are needed.

It’s free for up to 2 editors and 3 projects, then you have two premium plans starting $12 a month.

#6 Marvel

Marvel offers a wide range of features including wireframing, designing, prototyping, handoff, user testing and collaboration. You can instantly generate design specifications and connect integrations that power up your workflow.

Marvel provides integrations with Sketch, Trella, Jira, Slack,, G Suite, Maze, etc. You can make designs interactive with dynamic transitions, interactivity, and gestures to bring your prototypes to life.

User testing feature allows you to take feedback from your target audience, customers, and stakeholders before you send the designs for development. Marvel’s collaborative features let team members add notes, and share ideas in real-time.

It’s free for upto one project for individuals and $84/month for teams.

#7 Axure RP

Axure RP is the most powerful way to plan, prototype, and handoff to developers, all using one app. Axure RP lets you quickly make rich, functional prototypes so you can make informed choices with the help of dynamic content, conditional logic, and adaptive views.

It allows you to import Sketch, Figma, Adobe XD and other design files and allows high-quality prototyping so you can amaze your stakeholders and customers. You can bridge the gap with the development team by utilizing their documentation, Automated Redlines, and Code Export.

Axure RP is trusted by companies like Amazon, BBC, Verizon, Microsoft, Target, and other. It costs $29/month for individuals and team plan costs around $49/month.

#8 Origami Studio

Origami Studio is a product from Facebook. It is built and used by designers at Facebook for prototyping and designing modern design interfaces for mobile apps.

With Origami Live you can view the mockups live on mobile phones in real-time. You can use your device’s camera, microphone, accelerator, and haptics in your prototype, even send and open prototypes directly on your other devices. It’s an excellent tool for creating mobile app prototypes.

It allows you to easily create prototypes with layers, save time with pre-built Material and iOS components, quickly explore and iterate visually with patches, and see changes immediately in the Viewer as you make them.

This prototyping tool is best for freelancers and individuals starting out as designers. It’s a free service.

#9 Webflow

Webflow helps you build business websites without coding. Webflow’s interactions and animations tools bring all the power of CSS and JavaScript into a completely visual tool, empowering designers to build complex, rich websites and animations.

You can create scroll-based parallax animations, build micro-interactions, create hover animations, and more. With it’s CMS, you can define your own content structure and design with real data.

If you quickly want to prototype a website or even make an end product irrespective of your skills, Webflow is the right choice for you. It’s free to try and the most basic plan starts at $12/mon.

#10 Balsamiq

Since 2008, Balsamiq‘s mission has been to help rid the world of bad user interfaces, and Balsamiq prototyping tool is the best way to do that. UX professionals from across the globe use it to create wireframes as it’s a very focused, low-fidelity tool for wire-framing.

It is easy to collaborate and get feedback on your wireframes with this tool. They claim their wireframes are the gold standard in low-cost wire framing tools. The main focus of this tool is on the ideation phase, which provides you with a clean tool that helps you get in the flow and stay focused on structure rather than colors and icons.

Companies like Apple, eBay, Cisco, Skype, and Tesla use Balsamiq for creating wireframes and usability test. It costs anywhere between $9 per month to $199 per month depending on the number of projects.

#11 JustInMind

JustInMind is a great prototyping tool that lets you create wireframes for websites and web apps that adapt to multiple screen resolutions for desktop and mobile, the UI elements in your screen will also adapt automatically.

You can create your own UI kits, personalize them with your own style and interactions. You get seamless collaboration with features like User Management, Reviewers and Developers, On-Premise Collaboration, and LDAP Integration.

JustInMind’s usability testing tool integrations include Peek, Loop, CrazyEgg, UserZoom, and Validately. It cost $19/month for professionals and $39/month per user for enterprises.

There you go!

These are some of the best prototyping tools used by professionals around the world. Prototyping has never been this easy and these tools have made it much more easier and efficient for even people who are just starting out in the UX/UI world.

As most of them offer a free trial, try each of them yourself to get a taste of what each of them have to offer and choose the tool that you feel the most apt for your work. Goodluck!

The post 11 Best Prototyping Tools For UI/UX Designers appeared first on Fantastech.co!.

Today, I’m delighted to share with you some of the best UX blogs out there which I personally follow and can assure you that they’ll be fruitful for you as well. 

So, further ado, here’s the list of top 30 UX blogs for you:

30 Best UX Blogs

#1 UX Blog

The UX Blog was started as a resource for User Experience Design, User Research, and the UX strategy. They create each article, podcast episode, and resource relevant to the modern UX professional. You can also listen to their podcast on iTunes. 

#2 Career Foundry

CareerFoundry offers programs for you to become a UI/UX designer, Data Analyst, Web Developer, “from scratch” as they like to say. The blog has various articles on UI/UX Design, Career Change, Data Analytics, Web Development, and more. 

#3 UX Planet

UX Planet defines itself as “a one-stop resource for everything related to the user experience”. The best thing about this blog is that it focuses on UX for beginners and also has a career section giving every information you need to know to make a career in UX space. 

#4 Nielsen Norman Group

The creator of this blog is the man who coined the term “User Experience”. Donald Norman coined the work and co-founded Nielsen Norman Group with Jakob Nielsen. It had to make it to our list. This is a UX research and consulting firm. Their articles focus on Web Usability, Psychology and UX, Ecommerce, Design process, and much more. They also hold UX conferences all over the world.

#5 Adobe XD Ideas Blog

XD Ideas blog is a forum for unique insights and authentic points of view on the practice, business, and impact of design. They deliver high-quality content and innovative resources to empower the design community. Their content includes the information architecture, prototyping, UI design, user research, user testing, and more.

#6 UX Collective 

UX Collective provides wholesome content on user experience. It has curated stories on UX, Visual, and Product Design. Subscribe to UX Collective Newsletter to get their recommendation on insightful UI/UX articles.

#7 Invision Blog

Invision is popular tool for online prototyping and workflow creation for websites and mobile apps. Invision Blog has quite a few interesting design and UX related articles relevant to designers. Being a tool for designers they try to product really good quality content with unique insights in the industry.

#8 Awwwards

Awwwards is a platform that recognizes the talent and efforts of the designers in the UX industry. The Awwwards blog provides a range of savvy articles on Web Design, Research, and tools, Design, and illustration written by some of the best minds in the business. You can even talk to UX designers and share knowledge and criticism with the community about their designs. 

#9 FacebookDesign

Facebook wants to give people the power to build a digital community and bring the world closer together with its global outreach. The community is made up of product designers, content strategists, communication designers, and more. The Facebook Design blog showcases posts on culture, process, case studies, and a career section for upcoming designers. 

#10 Usability Geek

Usability Geek is a great blog about usability and user experience. It also provides useful insights into Human-Computer Interaction(HCI), Information Architecture, and related topics. Their main aim is to evangelize the importance of website usability. 

#11 UX Booth

UX Booth blogs have very high-quality content across the spectrum of UX. They even write about topics such as voice UX design. Their content provides practical solutions for UX designers. You will come across content relating to Analytics, Business Strategy, Content Strategy, Virtual Design, Information Architecture, and more on their blog. Must visit.

#12 UXMastery

UX Mastery is a very under-rated website. Although it provides a plethora of info-knowledge on UX. It offers a UX Mastery Podcast, along with articles on Culture, Career Advice, Design, and research. It has an interesting feature called “UX Sketch videos” which you must see. UX Mastery overall provides really good quality and insightful content. 

#13 UXPin

The blog at UX Pin mainly write about usability and design systems. The blog has decent content but what’s unique is, the e-books they provide for free on topics such as web design trends, UX industry reports, prototyping, and many more.

#14 52WeeksOfUX

52 Weeks of UX is a fairly unique blog. The idea was to publish one article each week starting January 2010. It’s fairly old but the content and ideas shared are still relevant today. Personally, I found the blog quite informative, so do check it out.

#15 Uber Design

The Uber Design blog comes from the design team at Uber and offers resourceful articles from their own experiences on building their platform and brand.

We’re designing experiences that don’t exist yet. Because of that, we’re constantly innovating and improving what we’re making. It’s an amazing challenge, and it’s also incredibly rewarding

Amritha Prasad, Product designer at Uber

#16 Airbnb Design

Airbnb Design is a blog that features articles about design. They also publish case studies, opinion pieces, and more. Airbnb Design even do interviews with designers and artists and publish interview transcripts. Their article provides good insights into the world of design.

#17 UXWritingHub

This Blog is all about writing for UX. It is insightful for beginners and professionals alike. UX Writing Hub also provides a free course on UX writing, you can also save yourself a spot at the UX writing academy. If a newbie is reading this, go get yourself that free course.

#18 UXMatters

UX Matters is an unusually designed blog as compared to its counterparts. The blog’s Top Articles section offers the best quality content dating years back, but still relevant. The primary focus of the blog is in business, community, design, code, research, strategy, reviews, experiences, and process. 

#19 Muzli

The Muzli blog shares the latest links about design and interactive, from around the world. It says it’s “a designer’s must”. On this blog, you will find a plethora of articles on everything there is to know about design, and the designing community globally. If the design is what you care for, dig right in!

#20 UXMag

UX Mag is a magazine dedicated to the world of UX. UX Mag has an abundant variety of articles written by professionals from around the world. It cares for topics such as accessibility, artificial intelligence, conversational design, data visualization, empathy, and storytelling. 

#21 1stWebDesigner’s UX Category

The content on this blog is created by web design professionals, for web design professionals. 1stWebDesigner’s UX category has topics ranging from web design and development best practices, web accessibility standards, the future web design to marketing web services, and anything about WordPress.

#22 Digital Telepathy

Telepathy is a customer experience and UX design agency. Their focus on customer experience shows on their website, it’s very sleek. Apart from the sleekness of their site, they offer a really nice reading list of topics such as product design, marketing design, startup design, enterprise design, evidently everything design. 

#23 Smashing Magazine’s UX Category

Smashing Magazine has been around for more than a decade now and their content is simply amazing. They post blogs regularly and have a knack for UX for web design. They also write stuff about Design Patterns, Accessibility, UI, and a lot more to even mention here. This blog is one of the best in the game and is highly recommended.

#24 Creative Bloq

Creative Bloq is all about art and design inspiration. It offers topics such as graphic design, web design. It also delivers inspiration for graphic designers, illustrators, and UX designers. They also have a magazine named “ImagineFX” that talks about general design.  

#25 UX Movement

UX Movement is a blog that mostly writes on how good and bad a design practice is, and how it affects user behavior. They post once in a month which is kind of off-putting but every article they post is filled with utmost research, clarity of reasoning, and experience.

#26 UX Studio Team’s Blog

UX Studio Team solely focuses on user experience work. You will find the best content on user experience on their blog, and they also provide case studies as to how designers handle UX work – they are some really interesting read. They have some great articles on User Psychology, Brand Strategy, Usability Testing, and more.

#27 UXMyths

UX Myths writes about the most common user experience misconceptions and provides clarity. All their content comes from a detailed research finding done by design and usability experts. It has to date debunked 34 myths surrounding UX. 

#28 A List Apart

Truly doing justice to the name, A List Apart is a blog that writes about an array of subjects for UX designers. They publish enormous and in-depth articles on subjects such as Application Development, HTML, Content Strategy, Brand Identity, Interactive Design, and a lot more to mention here. Their blogs are easy to read and very insightful.

#29 Usabilla

Usabilla is a user testing tool for UX designers. On their blog they post about business-oriented UX, CX insights, Innovation in the industry, and more. They also provide e-books, webinars, and research.

#30 Interaction Design

Interaction Design claims it has the world’s largest free online resource on UX design. Topics include human-computer interaction,  visual representation, usability evaluation, and much more. It also offers a range of online courses such as the psychology of e-commerce, interaction design for usability, information visualization to name a few. 

There you go!

Above listed UX blogs were handpicked for you to get the best information, knowledge and latest trends in the world of UX. The purpose of listing so many of them was to give you a comprehensive list that gives you taste of all kinds of UX people and their insights.

Go ahead and bookmark this page so that you have it handy the next time you need to look up a UX blog.

Did I miss any blog? Do let me know by leaving a comment below.

The post Here’s Our Pick of Top 30 UX Blogs to Follow appeared first on Fantastech.co!.

But still, your projects and goals must go on… you can’t jeopardize them.

You still have to finish working on those projects, send those emails, manage your time well, and also learn through the day. To achieve that, there are many productivity tools out there that can save you time, increase your productivity, and make your work efficient.

Here’s the list of my personal favorite 10 tools that we use every single day at our agency :

Productivity Tools for Agencies

#1 Slack

Slack lets you communicate with your team and organize your conversations by topic or a project that matters to your work. It also has a call function where you can organize a video conference of up to 15 users. You can also integrate the tools and services like Google Drive, Salesforce, Dropbox, Asana, Twitter, Zendesk, for a more integrated communication and workflow.

#2 Asana

Asana is an excellent tool where you can list all your projects, tasks, and deadlines. You can use it to manage your own goals or you can use it with your team to work on projects. Asana is one app that lets you organize everything in one place for you to work efficiently and grow.

#3 G Suite

G Suite for work is a suite of apps created by Google for business. G Suite will give you access to Google – Calendar, Sheets, Docs, Keep, Forms, Meet, Chat, etc. It provides a comprehensive set of tools needed by every business out there. Your G Suite account comes with a 30gb of Drive storage per user where you can store and organize all your work-related documents. It’s a must-have for any small business. 

#4 Hubspot

Hubspot is a unique marketing and sales tool as compared to its contemporaries. It provides a comprehensive set of tools for all your marketing and sales needs including a CRM, social media marketing tool, content management tool, web analytics, and much more.

Hubspot can also be integrated with your existing tools like Salesforce, NetSuite, Microsoft Dynamics CRM, and others. Whatever business you are in, whether it be marketing, sales, or service, your team can leverage Hubspot to achieve your goals.

#5 Calendly 

Calendly is a simple scheduling tool that lets you schedule appointments or meetings with your clients and colleagues at work. Now you don’t have to make email chains or phone tag, Calendly lets you send a link mentioning your availability. You can get Calendly integrated with your favorite calendar app like Google Calendar or Outlook Calendar so that all the scheduled meetings land get added to your calendar events. It comes with a free trial and premium will cost you $8.00 a month. 

#6 Lastpass

This has to be the best password vault out there. Lastpass has a really simple interface and you can save all your passwords at one place securely, with just one password to remember – your MasterPass. You can make it remember everything from the payment card to your social security number and your software licenses, all in one place.

And to put the cherry on top – It’s free. Regarding security, LastPass operates on a zero-knowledge security model, and the sensitive data stored is encrypted at the device level with AES-256 encryption.

#7 Loom

While you are at work, typing is the one thing that takes a lot of time if you are slow at typing. Loom is just the right tool for you to get the most out of your time. Loom is a screen recording software that provides you with tools to record your voice, screen, and face to make an instant video in less time than you writing an email.

Loom can be added to your browser using an extension and you’re all set. It’s a free tool but you can also get it’s premium version for additional services like cloud storage for videos, team collaboration and analytics. 

#8 Grammarly

It is a very handy tool to correct your grammatical errors and check plagiarism and can prove to be super efficient in improving the quality of your content, articles, and even emails! The premium version of Grammarly delivers readability, vocabulary enhancement, genre-based writing style checks, and more. Its plagiarism detector checks more than 16 billion web pages to be as accurate as possible. It is best of it’s kind out there. 

#9 Toggl

Now a days, we spend most of our time sitting on our phones and laptops, working or else. Toggl is an ultimate time-tracking tool for you to not only track your own time and productivity but to track your employees’ work-time efficiency and productivity.

You can use it to keep track of your time when working on their individual milestones or use it on a project with your team to tracking their timing. It’s a must have tool for all remotely working teams. It shows you colorful graphs of how much time you spent on your projects and tasks. Toggl is free for teams up to 5 members and for individuals. After that you can upgrade for more features.

#10 Freshbooks

Freshbooks is an on-the-go invoicing and accounting tool for self-employed professionals and small business owners. This tool lets you invoice your clients, receive online payments, record expenses, keep track of time and do every other accounting related task without needing costly accounts. It even provide you with an app that you can use to make a conversation with your clients. It offers a 30-day free trial.

So, there you go…

These tools will help you save a lot of time and enhance your productivity. Now that you have these tools to take care of your small tasks, you can focus more on that important project you are a part of. I hope it makes your life easy and efficient.

Good luck. Ciao.

The post 10 Must-Have Productivity Tools for Agencies appeared first on Fantastech.co!.