You can start looking at these ones, I kind of ignore the iPad Pro because it's as big as a desktop. So that's for mobile, you can see down here, for tablet's, just underneath. I often just pick my mobile size to be 400 to include all of those but you will be excluding a couple, the big giant phablet one I think there's some ones down here, Nexus 6, it's slightly bigger, it's a big phone. It covers iPhone 6, and you can see, all the earlier ones as well, don't get above 375. This is what we use as designers, this is pixels wide, and we can see that the new iPhone 7 is 375 pixels wide, so that gives you a good gauge of, "Okay, maybe my mobile needs to be about that, or at least include it because it's one of the more popular phones." You can see, the 6 Plus, the big giant phone is even bigger, and I kind of ignore that one, I let him deal with the tablet size, because it's such a big phone, it's that big phablet thing. It just gives you interesting stuff about what sizes- now, ignore these physical heights and widths, use these CSS widths. We need to work out what sizes to use, and that can be a little bit tough because that changes over time, there's so many device sizes, but I've got some basics for you to use, that's what most people use, and if you want to be more informed about what's coming out, what devices are there, there's a really cool site called mydevice.io/devices, so go do that whole url there in one go. So let's work out what sizes we need to make these first, and then we'll go and build them in Illustrator. ![]() This is going to be our desktop size, this is going to be our tablet size, and this is going to be our mobile size. Hey there, in this tutorial we're going to make these Artboards in Illustrator. Cheat sheet - Adobe Illustrator CC 2017 FREE Your first project - Adobe Illustrator CC 2017Ĥ5. Next steps to becoming an amazing UI designerĤ4. How to get your first work as a UI designerĤ3. Learning the language of UI user interaction designĤ2. Exporting CSS for developers using Adobe Illustrator CC 2017Ĥ1. Exporting your UI for App design using Illustrator CC 2017Ĥ0. Retina - HiDPI and responsive image export from Illustrator CC 2017ģ9. Exporting logos and icons from Illustrator 2017 for UIģ8. Exporting images and pictures from Illustrator CC 2017 for webģ7. Should I be using SVG export in Illustrator CC 2017 for web designģ6. Export your full page web ui mockups from Illustrator CC 2017 FREEģ5. Creating a mobile responsive UI website design in Illustrator CC 2017ģ4. Creating a tablet version of our UI web design in Illustrator CC 2017ģ3. Creating mobile & tablet versions websitesģ2.Drawing icons & logos in Illustrator using the pen tool Creating custom icons & logos using the shape builder tool in Illustrator CC 2017ģ1. How to adjust vector shapes in Illustrator CC 2017ģ0. Align & distribute icons in Illustrator for web designĢ9. Using Icon finder for free website UI social iconsĢ8. How to use layers in Illustrator CC 2017Ģ6. Washing out images in Illustrator with coloured backgroundĢ5. Adding Linking Cropping & Masking images in IllustratorĢ4. Production video - finalizing nav, hero box and fontsĢ3. Using the right web fonts Google Fonts & Typekit.Ģ1. Matching brand colors using Adobe IllustratorĢ0. Bring in your vector logo to the layout FREEġ9. Starting your web design using Illustrator templatesġ7. Creating the Tablet and Mobile wireframes in Illustratorġ6. Creating a wireframe - High Fidelity - Illustratorġ4. ![]() Creating a wireframe - Low fidelity - hand drawn. How to make a responsive 12 column grid in Illustratorġ2. What is a grid system & responsive mobile & tablet designġ1. What screen sizes to use for desktop, tablet & mobile web designġ0. Creating a sitemap in Illustrator CC 2017ĩ. Getting your workspace & Illustrator preferences ready for UI work FREEĨ. Download the exercise files, completed files & cheat sheetĦ. What is Illustrator’s role when designing a websiteĥ. UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP FREEĤ.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |