Explore breakpoints and how they can impact your design. Also learn how Adobe Illustrator artboards relate to setting up your design comps.
- [Instructor] Let's talk a little bit more…about breakpoints and show how…they would relate to art boards.…Responsive web design responds to the needs of the users…and the devices that they're using.…The layout changes based on the size…and the capabilities of the device.…For example, on a phone, users would see content shown…in a single column view.…A tablet might show the same content in two columns.…Breakpoints are the point at which…your website content layout will change to provide the user…with the best possible layout to consume the information.…
Instead of being concerned with device breakpoints,…the best practice is to design…for the smallest viewport first.…As you expand that view, there will come a point…at which the design starts to break…or just not look very good.…This is where you'll add a breakpoint.…Approaching the design mobile first is the best approach…for a responsive design.…It allows you to layout the content that is most important…to your customers in a clear and logical way…on the smallest screen real estate.…
- Customizing a web workspace
- Using the artboards to create multiple sized files easily
- Laying out responsive web experiences using Illustrator
- Creating and using character and paragraph styles
- Working with symbols
- Recoloring selected artwork
- Creating a site map
- Creating moodboards
- Creating wireframes
- Creating full-blown comps
- Exporting icons for screens
- Extracting CSS styles
Skill Level Intermediate
1. Set Up the Project
2. Design Responsively
3. Development Process
4. Collaborate and Share
5. Export Assets
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.