So now, I always ask for both the desktop and mobile design versions before I start on the implementation. It introduces a lot of unnecessary rework, and it's super time-consuming to implement something like that and then make the app switch between desktop and mobile versions seamlessly when resizing the browser window. I often receive the desktop version of a given application, implement it, and later get the mobile version with a completely different UX. What’s the number one problem you face in your work, and how do you solve it? This way, it's also easy to apply design changes later on as you only need to change it in one place in the code and it will get propagated everywhere. I create global SCSS variables for colors, repeating dimensions, etc. Instead, I try to deliver the same result with the least amount of CSS code possible. We usually collaborate using one of the work tools that allow me to quickly inspect various design elements, measure distances between them, and see the corresponding CSS code. I find that communication with your designer is especially important at this stage when working on projects with really tight budgets. I study the requirements, identify the most complex parts of the implementation, and communicate my findings back to the designer so they can modify the design. Typically, I start by analyzing the work handed off to me by a designer. They are often complex products where a deep understanding of a given framework is needed in order to deliver a result that is both easily maintainable and doesn’t suffer from any performance issues. I usually work on web applications built using one of the leading JavaScript frameworks - Angular, React or Vue. Describe your typical workflow for us, Tomas. He specializes in building single-page applications (SPAs) and enjoys transforming beautiful designs into smoothly-working products used by many people. Recently, he has been working remotely as a contractor for various companies worldwide. I encourage you to experiment and explore.Freelance Software Developer Tomas is a full-stack developer with 15 years of experience in coding. Note: The ideas presented are not hard and fast rules. Here is a screen shot from a past project I employed this technique:įor this particular project, my h1 was set to 48px on desktop and 40px on mobile. I start with a modular scale (but they usually come in decimal points), I then round up or round down as my eye pleases. You can then use this new scale on the other mobile artboards. Trust your eye: You can basically just copy over all the content from the desktop artboard to the mobile artboard and resize visually to your discretion. This can be done using, or even manually in your design tool of choice.Ģ. You start with a base font size and multiply it by the selected ratio. A modular type scale is a series of type sizes that relate to each other because they increase by the same ratio. In adapting texts to mobile, there are 2 methods you can use:ġ. So say your initial desktop width was 1440px, and your mobile is now 360px. Breakpoints are the point at which the content of your site will respond to provide the user with the best possible layout to consume the information. So generally designing based on breakpoints is your best bet. They have a great explanation of pixel density and all of this in Material Design: Density and ResolutionĪccording to you, what you made was a landing page. Instead of millimeters they use "density-independent pixels" or DPs so that things are still in pixels and make sense without knowing DPs. Google's solution for this is to convert everything to pixels with specific physical dimension. Think about how much this clears things up. So you define what the output should be in physical size in the design and it's the developer's job to match the physical size. Use their physical size on the display to define them. Measure things using inches or millimeters. Instead of measuring things in pixels which are input, measure the physical dimensions of the output. The solution is to measure the physical size of things. The high-density display has smaller pixels so a larger button is physically smaller: Adding to this issue is OSs and browsers resizing things to try to solve the issue.Ī low-density display (top) has physically larger pixels so a smaller button is physically larger: The problem is the size of pixels changes across devices. I believe learning to work in physical display size will solve this for you.
0 Comments
Leave a Reply. |