If you begin to look at a design and wonder if it’s broken, or if the page is glitching out, then you know that you’ve reached your breaking point. All of these examples constitute the design not working. The content present may become too large or too small - the ideal character length per line is somewhere between 45 and 75 characters. What exactly constitutes breaking? It may be that the headers begin to overlap, or that the images begin to flood into each other. By utilizing the responsive resize functionality defined earlier, you can just slowly drag your artboard into a smaller (or larger, if you’re starting from the smallest) format. If you think users are going to be accessing the site while out-and-about, then starting with mobile might be a good option.īreakpoints are pretty self-explanatory - it’s the points at which your design breaks while resizing.If you think users are going to be doing a lot of reading, typing, and planning, then you might consider starting with the desktop view.What is the platform that your users will be using the most? Starting with that size may be the most effective.Some things to consider for where to start are:

As a designer, as long as we are properly implementing breakpoints and responsive design principles, we will get the job done with flying colors. While the pervading idea in the past decade or so has actually been to start with the smallest, I would say that it doesn’t matter as much anymore. Some people even advocate for starting somewhere in the middle, in the tablet realms. smartphones or even smartwatches), or if you should go the other way around - start from smallest and go to largest. desktop screens), and then continually adjust until you get to the smallest screen size (i.e. There is some debate over whether you should start with the largest artboard size (i.e. By defining the constraints or anchors (which are the same concept, but different programs might refer to them as one or the other) you can define what the element respects when resizing, such as anchoring to the left, top corner of the screen.īecause this is a really difficult subject to describe in an article (and it would be way too wordy), here are some video tutorials that I really like for some popular programs (no affiliation, just love promoting great videos): Responsive resize is a tool that automatically resizes boxes and content when you resize the prototype, demo, and preview. The tool we’re going to be using is called many things, but I’m just going to refer to it by it’s name in Adobe XD: responsive resize. As designers, we have a bunch of really smart tools built into the programs we’re using. The article is written assuming that implementation will be done by a dedicated developer - as a UX designer, I hand off my designs to people who actually know what they’re doing when it comes to making an idea into reality! Responsive Resizeĭon’t waste time defining your design manually. This article is not going to include the specifics of front-end development in HTML and CSS and is mostly going to be focusing on the design aspect. In a nutshell, here are the main concepts you need to get started right away designing responsively. Tablets, smartphones, laptops, desktops, smartphones that fold in half (a modern marvel) - the list goes on. With the plethora of devices that any given person is using to access your website or product, responsive design has become necessary in order to cater to the many different screen sizes each platform utilizes.

Adobe xd responsive resize preview