Inside specs of Pixsellz best-selling wireframing kit — Sections 2
Powerful wireframing kit for web projects based on design system.
Hi there! After 3 months of hard work and dedication, I’m pleased to announce our best-selling kit — Sections 2 has been released. We know that we could have just added few extra changes and released the kit as Sections 2 but that wouldn’t be fair to our clients because that would be an easy way out. Instead, we have completely reworked the entire kit! We have worked on all aspects of the kit, from buttons to layouts which supports all the latest and main features of Sketch App & Figma.
Before we dive into the kit and all its changes, I want to remind you about the origins of this kit and how the first version was a stepping stone to all of our remaining kits.
The first version was created 2 years ago and this was the first ever product of Pixsellz team. Since we were fairly new out on the market, our main goal was to give our clients such a kit which touched upon all well-known categories. We wanted to make it so big while keeping its core value so that customers wouldn’t have to go search for other wireframing kits out on the Internet. Thus, Sections 1.0 consisted of 330 layouts in 17 different categories, it also included Base Elements and Theme Setup.
In addition, we wanted to make sure our clients where able to use Sections 1.0 in most of the tools that are widely used, therefore we made it compatible for Sketch, Figma, Adobe XD, Studio and Adobe Photoshop respectively while supporting all the latest features of these tools at the time. More than 2.3k copies have been sold and this is Pixsellz flagship best-selling product to this day.
Overview
Sections 2 is made up of a large set of pre-constructed layouts (337 to be precise) in 17 popular categories. The main engine of this UX kit is its design system —which gives you a wide range of options to speed up your web prototyping experience.
The design system is neatly categorized in such a way that is easy to read, logical, and easy to use — which gives you a competitive edge to build a powerful wireframing kit at ease.
In addition, Sections 2 main features:
- 330+ Layouts
- 17 Categories
- Light & Dark
- Material Iconset
- Open Source Font
- Bootstrap 4 Grid
- Smart Typography
- Base Elements
- Theme Setup
Typeface
In Sections 2, we used the Inter Typeface Family. This is a free font family designed by Rasmus Andersson (which our team thanks him by the way for creating an excellent readability font for our computer screens).
Before opening Sections 2, you will need to install this font which can by found in Inter Typeface Family website or in Google Fonts for free.
Tutorials
In this section we don’t want to bore you with blocks of text explaining the inside specs of our kit, therefore we made a couple short video tutorials which shows you how certain features can be used. We have picked out the main features of the kit — Layouts, Smart Typography, Base Elements etc. which are considered the newest features of Sketch and Figma.
- Layouts
- Smart Typography
- Base Elements
- Theme Setup
- Icons
1. Layouts
This set contains over 330 ready-to-use layouts in 17 popular categories for desktop web & mobile. Frequently used layouts are compiled in each category. To quickly build a template, you need to go into the desired category and simply copy and paste the layouts into your project artboard.
2. Smart Typography
This set of components helps you quickly create ready content in layouts. Smart Typography contains all the sizes of Headings and Text, which comes in two format alignments: Left and Center. It also has different variations of Lists. Smart Typography is created using Auto Layout/Smart Layout features of Sketch & Figma. When you add content, the components automatically resizes while maintaining the respective indentation between blocks.
3. Base Elements
The Base Elements in Sections 2 are neatly organized and easy to use. Some elements are resizable and has Smart Layout/Auto Layouts feature enabled. This product contains all commonly used elements for web prototyping. With the help of Base Elements you can quickly create layouts of any complexity at ease.
4. Theme Setup
Theme Setup includes all the colors you need including several shades of black and several sizes of Headers and Text. In Theme Setup you can quickly change Layer & Text styles. Sections 2 also comes in dark and light modes.
5. Icons
Sections kit uses Material Design Icons by Google which has over 1000 icons in 16 different categories. However, we did not include all 1000 icons inside Sections 2 to avoid long loading times inside your project, but you can add all the icons if you need to at any time.
In order to install all icons, we have specially created a separate file that contains all the icons. To add an icon you need to copy/paste the icon into the Symbols section in Sketch (or Components section in Figma). All icons are organized, renamed for symbols hierarchy and have style properties included.
Try the Demo Version
If you still haven’t bought Sections 2, you can download the demo version which is absolutely free. It includes 2 free templates for desktop and mobile versions.
- To buy the product or learn more about it, visit sections.pixsellz.io
- If you have any questions, you can contact us and we will be happy to help you.
- Follow us on Twitter for news, updates and quick videos about Pixsellz products.
What’s next?!
In the next article, I would like to create a short guide on how to create Smart Typography using Sketch & Figma features. If you are interested, support this article or leave a comment below.
