Inside specs of Pixsellz best-selling wireframing kit — Sections 2

Powerful wireframing kit for web projects based on design system.

Pixsellz
Pixsellz
Apr 21, 2020 · 5 min read

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.

Comparing Sections 2 to other well-known wireframe kits out on the market.

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.

  1. Layouts
  2. Smart Typography
  3. Base Elements
  4. Theme Setup
  5. 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.

How Layouts are used to build web templates for desktop & mobile.

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.

A quick preview on how Smart Typography works.

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.

Base Elements overview.

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.

How to change Layer & Text Styles.

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.

How to add import Material Icons into your project.

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.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store