Found 63 bookmarks
Newest
Responsive Design in Adobe XD
Responsive Design in Adobe XD
In Adobe XD it’s important to illustrate how your layouts are going to behave responsively. Learn how to best use XD’s toolsets to efficiently create responsive design mockups. ► Unlimited Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description Source Files: https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/30/courses/1256/attachment/SourceFiles_ResponsiveDesignInAdobeXD.zip 1. Introduction 0:00 1. 1Responsive Design in Adobe XD 2. Responsive Refresher 0:49 2.1 Responsive Design Is Just Two Things 6:41 2.2 Workflow, Breakpoints, and Do We Still Do “Mobile First”? 3. Responsive Design in Adobe XD 16:18 3.1Quick Overview of What You Can Do in XD • Code-Friendly Design With Adobe XD: https://webdesign.tutsplus.com/courses/code-friendly-design-with-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description • This Is Adobe XD: https://webdesign.tutsplus.com/courses/this-is-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description 21:15 3.2 The “Responsive Resize” Function 30:20 3.3 Artboards and Responsiveness 34:27 3.4 Emulating Flexible Width Columns 43:44 3.5 “Repeat Grid” and Responsiveness • Prototyping an App With Adobe XD: https://webdesign.tutsplus.com/courses/prototyping-an-app-with-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description • Logo: https://elements.envato.com/gear-cloud-logo-template-TR6YKU?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description • Image Placeholder: https://elements.envato.com/1000-image-placeholders-35266F?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description • Social Icons: https://elements.envato.com/40-social-media-icons-G6RA8Q?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description 52:14 3.6 Handling Text 57:20 3.7 Create a Max-Width Artboard 4. Breakpoint Artboards 59:34 4.1 Creating Breakpoint Artboards 1:03:07 4.2 1000px Breakpoint 1:06:28 4.3 900px Breakpoint 1:10:21 4.4 700px Breakpoint 1:14:51 4.5 500px Breakpoint 1:17:48 4.6 400px Breakpoint 1:20:47 4.7 Smallest Breakpoint 5. Conclusion 1:24:42 5.1 Device-Specific Artboards 1:28:18 5.2 Wrapping Up ► Want to learn Adobe XD? Check out our new free course Adobe XD for Beginners: https://youtu.be/WEljsc2jorI - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Envato Tuts+ Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description ► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus ► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus ► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus Envato Elements All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes: https://elements.envato.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description adobe xd responsive design
·youtube.com·
Responsive Design in Adobe XD
Responsive Sketch Pad
Responsive Sketch Pad
Quickly generate cross-platform application ideas. Brainstorm breakpoints and get a handle on how a website might translate to mobile and tablet versions. This pad has 2 device silhouettes on the front and 3 on the back.  Features:- Printing on both sides- Dot grid, 150 PPI- Letter size- Project Name, Screen, Date & Note fields- 50 sheets, 110g/m² paper- Cardboard back- Rounded bottom two corners- 100% Recyclable This pad works with our website stencil and pixel ruler (sold separately).
·uistencils.com·
Responsive Sketch Pad
Responsible Considerations For Responsive Web Design
Responsible Considerations For Responsive Web Design
Responsive Web design has been evolving rapidly ever since Ethan Marcotte coined the term two years ago. Since then, techniques have emerged, become best practices and formed part of our ever-changing methodology. A few obvious examples are the multitude of responsive image techniques, conditional loading, and responsive design and server-side components (RESS), among many other existing and emerging strands stemming from the core concept of responsive Web design.
·coding.smashingmagazine.com·
Responsible Considerations For Responsive Web Design
Implementing Off-Canvas Navigation For A Responsive Website
Implementing Off-Canvas Navigation For A Responsive Website
The varying viewports that our websites encounter on a daily basis continue to demand more from responsive design. Not only must we continue to tackle the issues of content choreography — the art of maintaining order and context throughout the chaotic ebb and flow of the Web browser — but we must also **meet the expectations of users**.
·coding.smashingmagazine.com·
Implementing Off-Canvas Navigation For A Responsive Website