![]() I'm aware this may get confused with CSS problems and such, but, and although I'm only an experienced beginner, I think this is because I've created the design with a 1920x1080 dimension, instead of a more general resolution like 1440x1024. Now, that's impractical for the user, I want a 1920x1080 design to work on my 1024x768 screen. For instance, using a lower screen size with a default zoom of 100% makes everything bigger, and it only looks good by reducing the zoom to 50%. I was able to recreate a draft, and I've noticed everything looked oversized and bigger on the web than what I've designed. Hello guys, recently I've been learning how to design websites with Figma and apply them with CSS. Have fun, and look back to previous lessons if you need a reminder on how to do something! In case you get stuck, we’ve included our own versions below that you can use for inspiration-or, if you prefer, have a go at recreating the layouts we made.TL:DR: Should I design in lower screen sizes? Such as 1440x1024/1280x720 Check out the site UI Patterns for some inspiration on how you might want to lay out elements in a different format:.Take a look at other websites or apps to get a sense of how the relative scale, sizing, and spacing of elements might need to be different on a larger device.Equally, what might you want to be different? (For example, how might navigation and menus be different on tablet or desktop?).As a user, what might you want to be consistent between the mobile and tablet/desktop versions of the app? (Perhaps color, or certain layout patterns like in the Photo Post screen?).Here’s a checklist to keep in mind as you work on this: You can copy elements across or simply use it as a point of reference. Tip: When translating your work from mobile to tablet or desktop, it's helpful to have the original mobile screen design right next to the new Frame you’re working on. Once the Frame has been created, switch the orientation to Landscape at the top of the Properties panel, next to the drop-down we used earlier to switch a Group into a Frame:.Click the “Tablet” drill-down menu in the Inspector.Here are some specifications for the Frames and Layout Grids for your chosen device: Don’t feel obligated to do all four, but give at least two a try. To get you started with today’s challenge, first decide on how many screens you'd like to recreate at a larger scale. You can apply this method to other screen elements as you develop your tablet or desktop version of the app. Presto! A nav bar that resizes and scales correctly and stays pinned to the bottom of the Frame. Try grabbing a corner of the Profile Frame and resizing it to see what happens.Background rectangle: Left & Right, Bottom. ![]() Double-click the Nav Bar Frame, select each object in turn, and set their Constraints to the following: ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |