One of my favorite features of Sketch is the built-in layout grid. In Sketch, you can easily toggle a transparent layout guide and quickly change the column and gutter sizes. As mentioned, anything possible in CSS is possible in Sketch. Creating rounded corners on an action button is as simple as clicking the object and adjusting the radius in the sidebar. While the CSS3 tools are nifty, several other design programs out there have these same tools.
Sketch takes it one step further by enabling designers to copy accurate CSS styles for these elements. This makes for a more seamless experience between design and development. In addition to creating and copying CSS styles, designing duplicated content is easier, too. Sketch allows you to turn a group of objects into a symbol that can be copied and repeated, and any changes to that object are automatically synced to all instances!
Using symbols, we can play around with the sizes of the images, text and colors for all three at the same time, making life a little easier. Symbols even work between templates, so if we decide to use the same layout on the page listing blog posts, all we have to do is copy an instance of the symbol there, and the changes will sync between all of them. While I do use symbols for things like blog posts and product listings, I like to use the Dynamic Button plugin for buttons on the page.
The plugin essentially creates a symbol for your button, but automatically adjusts the padding on the sides according to the length of the text. I touched briefly on how helpful symbols can be on the home page, but what about with pages with a lot of repeated content, like product and team listing pages? While using a symbol to create an individual item in a listing would be helpful, content will eventually need to be added to all of these objects in order to look realistic to the client.
Additionally, clients rarely have content ready before the design is approved. Thankfully, Sketch has several plugins to generate content automatically in a design.
The Day Player plugin is a great resource that fills in placeholders from various image services. I like Placehold. For mockups that need significantly more filler content, I like the Content Generator plugin. The team listing page, for instance, needed a male or female image, a name, a title and some contact information. Using the plugin, all I had to do was select the image placeholder boxes for each of the team members, go to the plugin options and choose between a male and female avatar.
Filling in a name, along with an email address and phone number was also just as simple. For placeholder text, we can again use the handy Content Generator plugin to fill in lorem ipsum text, completely eliminating the need to find an online service to generate the same thing.
Also, did you notice the bullet points in the text? Another great feature of Sketch is the built-in generation of numbered and bulleted lists — a feature that has always been lacking in other design programs including the almighty Photoshop and the screen design-oriented Fireworks and painstakingly tedious to achieve.
Being able to format text exactly how it will appear in the browser is great, and Sketch helps you do it!
One of my favorite features of Sketch is the support for multiple artboards on one canvas. Photoshop forces you to create multiple PSD files and then switch between windows to work on various mockups. This process was such a hassle that I would create mobile and tablet mockups only for big-budget projects.
In Sketch, you can see desktop, tablet and mobile mockups all in one view , allowing you to work on the mockups simultaneously. For Fleet Feet in particular, multiple artboards proved to be especially helpful because of the sheer number of templates.
When editing symbols, text styles and colors, I could see how changes affected all of the mockups at once. Seeing this also helps the designer to remain conscious of content flow and interactions going from desktop to mobile. Creating these multiple artboards is also easy in Sketch. Another neat feature of Sketch is that you can preview designs on the device they are meant to be viewed on. Although not technically a built-in feature, the Sketch Mirror app syncs with your open document and allows you to see how your design would look on an iPhone or iPad and instantly preview changes.
This app has proven to be great for making final tweaks and showing off designs to clients. Giving a more fluid and realistic preview of how a responsive design will actually look through interactive prototyping is quickly becoming a necessity for web designers.
Even prototyping plugins look to be on the rise also. Once the Fleet Feet design was ready for development, it was time to export the assets. Thus, it was up to me to slice up all of the assets for the project. Thankfully, Sketch makes exporting all of the files super-easy. This covers all of the bases for displaying the assets on various devices. Sketch makes this simple, too. Using the Sketch Style Inventory plugin, you can create in one click an inventory of all of the swatches and HEX codes of colors used on the page.
Fonts work the same way. I like to use the plugin to create a text styles inventory as a reference guide for developers. Also, remember that I mentioned that you can copy the CSS styles for any element in a document? To get these text styles into a useable form for developers, all you have to do is select all of the layers in the type inventory, copy the CSS styles and paste them into a style sheet.
Well, the app still cannot be the only design program in your toolbox. It features a clean and elegant design that will give a more professional look to your website. The template features a complete website design with all customizable elements and 8 Artboards covering different parts of the site layout. You can design a stylish personal portfolio website using this amazing Sketch website template. It comes with a modern and clean layout.
Along with all the necessary sections for highlighting your skills, services, testimonials, and a portfolio gallery. Every app needs a landing page to promote its features and attract new users. With this Sketch template, you can design a more effective landing page for a mobile app. The template includes many useful sections for showcasing everything from your app screenshots to pricing plans and more. Use this modern landing page template to design an attractive website for your SaaS business.
It will allow you to effectively detail all the information about your software, section by section. The template also features a sleek pricing table and a testimonials section. This is a free website template for Sketch you can use to design a simple and modern website for a small business. Struggling to find inspiration to design your furniture website?
Then use this free template to draft a complete website layout without an effort. This free Sketch template comes with 7 Artboards with all the elements for making a furniture store website.
You can use this Sketch template to design a modern eCommerce website or a shop for branded products. It includes page layouts that can be easily customized to your preference. Whether you are launching a high-end hair spa or plain old barbershop, this website template will help you advertise your business in the best light possible, and attract customers.
Looking for inspiration to design a minimal online store? Then use this Sketch template to get a head start. This template features a modern and minimalist online marketplace design.
This landing page template is perfect for designing websites for both agencies and consultants. The template features multiple sections and lots of components that you can easily edit and customize using Sketch and Figma. This stylish website template is made specifically for creative agencies. It includes a complete homepage design featuring a modern look and feel. The design uses the Bootstrap grid layout with free Google Fonts. The template also comes fully layered to make it much easier for you to edit and customize.
If you prefer a website design with an ultra-minimalist look, this template is for you. It features a clean, simple, and minimalist design. There are no images with bright colors. Only creative illustrations. The design uses white space to its advantage to format its content in an effective way to improve the user experience. Another minimal website template made with modern brands in mind. This template features not just one, not two, but 5 different homepage designs. The templates are most suitable for tech startups and agencies.
Looking for inspiration to design a bold website for an agency? Then this template will help you get the job done. It features a very visual-centric design that uses lots of images to make the design more attractive. The template uses the Bootstrap grid layout and you can customize it using both Photoshop and Sketch.
A modern take on digital agency website designs. It includes a section for showcasing clients, projects, services, and more. Futura is a website UI kit. This kit comes with all the elements you need to create a complete website. It includes a scalable vector icons pack and uses free Google Fonts. This templates pack is designed for making websites for agencies.
It features a homepage with multiple sections for describing your services and showing off your portfolio. If you need a landing page to promote your skincare appliances, or beauty products, this Sketch template is well worth checking out. Whether you are a photographer, graphic designer, or developer, this template will come in very handy. It features a complete website layout you can use to design a website for a creative or a digital agency website.
In addition to the homepage, it also includes templates for inner-page designs as well.
0コメント