• Calendar

    september 2016
    m d w d v z z
    « aug    
     1234
    567891011
    12131415161718
    19202122232425
    2627282930  

TARS: Free, Ready-To-Use Markup Builder

Front End is really huge nowadays. We have to draw sprites, transpile ES to js, less/sass/stylus to CSS and so on. And it is only becoming more and more complex over time. A lot of routine processes, which developers had to perform manually 2-3 years ago get fully automated today. But for an every old routine, there emerge two new ones, which often slow down the rate of our work, and kill all the pleasurable experience we get from the very process of front end development.

That is why I always advise to learn and implement new automating tools and techniques, which help you get rid of the boring manual routine and concentrate on the creative effort.

One of such tools that I’ve stumbled upon recently was TARS. TARS is a markup builder for front end, based on Gulp. Basically, it’s a framework with a set of gulp-tasks, which allows creating new tasks and modifying existing ones easily. You don’t need to have any experience with Gulp to work in TARS, since it provides its own UI architecture for storing tasks and watchers of your projects.

FEATURES

Here are some features that TARS comes packed with:

  • Jade or Handlebars as HTML templater.
  • Webpack (with Hot Module Replacing) or simple JavaScript-code concatenation in one bundle.
  • The command line interface (TARS-CLI), which auto-updates your version of the software.
  • ES6 (and some experimental features from ES7) integrated.
  • SCSS (SASS), LESS or Stylus as a preprocessor for CSS. Also includes a small set of mixins. Sourcemaps are integrated.
  • No external libraries and plugins (except html5shiv). Yes, this is a feature because you can choose any library you like and use it. Sourcemaps for JavaScript are included.
  • Uses Chokidar module for file watching.
  • Smart image processing, primarily, the SVG vector graphics. No more struggle with markup for screens with high pixel density. TARS supports two workflows of working with SVG: SVG-sprites and SVG-symbols.

tars-features

This is not the complete list of features – new ones add up with every global update. You can check out all of the current features on the project’s official GitHub page. The full list of documentation is also available there.

INSTALLATION

There are two ways to set up TARS on your system:

  • by installing the TARS-CLI (recommended method), or
  • by installing the TARS package, and then manually installing the required dependencies.

Let us go through the TARS-CLI installation process. To the ones who like to setup everything manually, please check out this list of instructions.

TARS-CLI is an interface of the main builder, which enables the user to:

  • Initialize the project;
  • Start the dev-command with browser reloading and opening the tunnel connection;
  • Start the build-command with the minified files or in release mode;
  • Add components to different sets of files;
  • Add an empty page or copy an existing page.

The prerequisites for running TARS are Node.js version 4.x.x or higher, and NPM version 3.3.10 or higher.

In order to install the TARS-CLI:

  • For Unix-based systems

From your terminal, run the following command:

npm i -g tars-cli

If you get a ‘Permission denied’ or an ‘Error: EACCES’ , try running the command again with sudo.

  • For Windows

From the command line or any other terminal, navigate to the Node.js installation folder (typically it’s C:Program Files (x86)nodejs). Then, execute the command:

npm install npm@latest

After that, run the TARS-CLI installation command, as in Linux.

To initialize your first project, type the following command into the line:

tars init

FILE STRUCTURE

The TARS builder will have the following structure:

tars-builder

And this is how the structure of your typical build is organized:

tars-structure-build

The file structure is generated automatically, so you don’t have to create anything manually. For the sub-structures of each particular components or builds, please refer to the Structure FAQ section.

BASIC COMMANDS

From the command line interface, an array of commands is available. All commands have a similar executing template: tars + command-name + flags

You can run the tars –help without additional commands and flags at any moment. This command displays information about all available commands and flags. Also you can add the –help key to any command to get full description of this command.

The tars –version command will display the current version of TARS-CLI installed on your computer and the version of TARS in your current project. Also, you will be informed whether updates are available.

Almost all commands run in the interactive mode, so you can communicate with CLI like it has its own GUI. If you are using interactive mode you don’t need to bother remembering which the flags are responsible for what. The interactive mode is easy to disable if you use automatic testing or something else that doesn’t require the human presence.

Here are the basic TARS commands:

Other custom commands are described in the relevant FAQ section of the project.

* * *

TARS was first released in late 2015, and by now it has updated to the version 1.8.3. Run by a team of only 3 people, this tool is becoming popular especially in the web development industry. TARS is distributed on a free-to-use basis, has an open source code, and is welcoming any side contributions.

For me and my colleagues, TARS has been a real time saver and organizer, which helped to reduce the amount of routine manual coding, and focus on doing what we love doing – designing fresh and innovative front end solutions.

You might also want to read “Development Trends that Will Shape the Web in 2016

Bogdan Voydevich is the Lead Front End Developer at Vintage Web Production – one of the most awarded web studios in Eastern Europe. An inspiring artist and graphic novelist, Bogdan likes to create visually appealing and innovative front end solutions for the web. You can reach out to Bogdan via Facebook or Instagram.

The post TARS: Free, Ready-To-Use Markup Builder appeared first on SpyreStudios.

5 Lessons to Learn From Microsoft’s Metro UI Design

Throughout the years, we’ve grown to love the Metro UI for its fluidity, intuitiveness, and usability. Today, we are going to explore the principles of the Metro design and learn valuable lessons on building a futuristic interface.

The Metro user interface design was first introduced in 2006 by the Microsoft Corporation. The company decided to change the UI style of its support software Zune. It switched to a cleaner, more typography-focused design that targets simplicity and usability instead of complex appearance styles.  Later on, the design concept of the new Zune desktop client was transferred to the Windows operating system. This resulted in the creation of the modern Metro design as we know it today.

The Key Principles of Metro UI Design And 5 Lessons You Can Learn From Them

#1: Content Before Chrome

Metro UI

Tile-based design of the Verge homepage that focuses on content

The signature look of the Metro UI differs with an elegant and fluid style that naturally translates between devices. The Metro UI is easily recognizable and acts as a branding look for the software and applications of the Microsoft Corporation. What makes this user interface different from iOS and Android is its plain authentic look. For the Metro UI, content is the king. Be it textual or visual, content is presented in it’s purest form. Every additional element only acts as an enhancement of the user experience.

Takeaway: The Metro design improves the UX by focusing more on content and cutting down the unnecessary graphic elements.

#2: Employ an Improved Information Architecture

The Metro design has strict rules when it comes to information architecture. Unlike other user interfaces, which present content on scrollable portrait pages, the Metro UI has a landscape layout. The metro UI for both mobile and desktop devices has implemented side-scrolling as a universal way of switching between content categories. While other OS interfaces have a dedicated menu on each page, the Metro layout uses a typographic menu which is stretched to the width of the whole UI layout.The innovations in the UI design also call for an improved information architecture.

The innovations in the UI design also call for an improved information architecture. The screen hierarchy of the Microsoft UI is limited to three structure levels: section pages, detail pages, and hub pages.  The hub pages offer an overview of the content, section pages display different categories, and detail pages showcase textual and visual content.

Takeaway: Strict content hierarchy allows users to orientate easily in a new UI environment.

#3: Create a Digital Design Authenticity

Microsoft’s user interface is all about simplicity. From the smallest details to the main content, Metro design adopts a clean look that’s focused on necessity. This contemporary design reflects the current trends and answers the demands of the modern user.

The Metro UI cuts all unnecessary elements in favor of improved usability. This design style has a futuristic approach towards user experience. It’s focused on creating a genuine digital look, thus, it has cut out all realistic elements. It lacks heavy graphic elements, like shadows and textures, which results in a swift and highly responsive design.

Takeaway: Welcome an authentic digital approach and create a clean user interface that’s inspired by the modern lifestyle.

#4: Ditch Icons and Embrace Typography

If you’re paying close attention to the current web and print design trends you’ve probably noticed the overly increased interest towards minimalism. This design style reflects the modern understandings for high usability. It employs the use of easily readable typefaces, solid colors, and simple geometric shapes to display content.

The Metro UI has implemented many of the features of the minimalist style but with a few exceptions. The decreased amount of icons in the layout is a signature look for the Microsoft products. The menu takes all the virtual space of the combined width of the app screens which allows the display of the full page names.

Takeaway: The large headlines and sharp fonts of the Metro interface are inspired by public transportation signs. By ditching icons in favor of text, the Metro design aims at creating a universal look that’s easy to read.

#5: Create a Fluid Interface With Improved Motion Design

One of the key features of Metro design, according to the Microsoft Corporation, is its fluidity. The page layouts are combined into a single, coherent page that’s conveniently separated into different sections. The universal textual menu covers the whole set of screens which encourages sidescrolling as a leading interaction movement. The different pages often share a uniform background and extend certain elements as guiding lines between screens. Yet, what makes the pages transitions truly fluid and intuitive is the optimized motion design. Motion is what makes the Metro style a consistent and intuitive interface.

Takeaway: Use motion to create a fluid and coherent design.

More on modern UI design:

Best Resources To Find UI/UX Design Inspiration

5 UI Animation Trends That Will Shape UX in 2016

 

 

The post 5 Lessons to Learn From Microsoft’s Metro UI Design appeared first on SpyreStudios.

Vectr: The Cross-Platform Vector Design Tool You’ve Been Waiting For

Finally, a vector-based graphic design tool that’s both simple and free.

The need of expanded accessibility and intuitive user experience lead to the creation of many web-based design platforms that  strive to challenge the design world as we know it today. Startups like Canva, Picktochart, Visme and Designbold are all a product of the growth of the design industry. What all of these tools have in common other than inventiveness is their raster oriented approach.

Today, I want to present you something different. A tool that reimagines vector graphic creation and unlocks the limits of cross-platform design.

Vectr: The vector design tool from the future

Vectr is a free cross-platform vector design software that’s built to work smoothly across various operating systems. It’s currently available on Mac, Windows, Linux, and Chromebook. The Vectr team is supported by strong investors in the web development field who once put their faith in WordPress and aided the growth of today’s most popular CMS platform. But that’s not main the reason why Vectr is promised to have great future.

Vectr vector design example

Created with Vectr.com

An Intuitive Approach Towards Vector Design

Throughout the years, I’ve stumbled upon and tested many vector design tools. Some of them, I never really understood ( sorry, GIMP ). But Vectr got me right at “Hello”. Here are some of the features I immediately fell in love with.

Vectr object snapping

Object snapping: The smart snapping creates convenient guidelines that will help you create perfectly measured vectors. I was amazed to see the tool suggested me to alight a randomly drawn object to the geometrical center and the sides’ middle of a triangle that I have previously drawn. The snapping tool is elegantly displayed at the upper left corner of the dashboard. You can choose between snapping to a grid or point depending on your needs and even turn off the option completely.

Dimensions in Vectr

Dimensions: Displayed on the bottom left of your screen, the dimensions will show you the size of your currently selected object or your artboard. This is extremely convenient as when creating pixel-perfect art, it’s crucial that you know the exact size of your graphic elements.

Vectr drawing objects

Vector drawing: Just like in Illustrator, you’ll be able to choose between a Pen and a Pencil tool. The Pen Tool allows you to draw vector elements by creating straight lines and curves. The Pencil Tool is intended for creating uneven, non-standard vector objects by simply drawing them on the artboard. Double clicking on selected vector lines creates additional points that allow you to make more detailed editing.

Flipping and arranging

Flipping & Arranging: Upon selecting an element, you’ll see a neat vertical and horizontal flip button that, believe me, will make your life a lot easier. Right beside the flip option, you’ll see two buttons for layer arrangement that will help you put your vector elements in order.

Objects in Vectr

Preset shapes: Although I love vector design, I always find it annoying to draw perfect oval shapes like hearts or drops or repeatedly redraw generic elements like a triangle, square, plus and others. The three dots in the right sidebar menu will reveal a neat template collection with preset shapes that you can use in your designs.

Typography in Vectr

Text editing: I’m not sure if I can upload my own font or not but I didn’t even give it a try. Vectr’s font library is so exhaustive that you could hardly fail at finding the right typeface. You probably have the complete Google font library at your disposal. Even though scrolling down the drop list can be a bit dull, you’ll be happy to see that each font is represented with a corresponding thumbnail image.

Additional Features

Metrics: You can easily change the metric system for your document by selecting the second icon just above the dashboard on the left. Here, you can also rename your project.

Pages & Layers: The artboards for your specific project are called Pages. You can delete and add new ones by clicking the Pages button that’s located in the upper left corner of your screen. The Layers button is located right next to the artboard selection option. From there, you’ll be able to lock your layers, rearrange them and toggle their visibility on and off.

Conclusion

I’ve had a great time designing with Vectr. Although some features are still under development it’s an amazing substitute for other premium vector design software. And, of course, it’s free.

If you, like me, are on a search for a reliable, intuitive, and convenient tool that allows you to design across a wide selection of platforms without disrupting your creative process, you need to check out Vectr.

Looking for more hands-on reviews and tutorials? Check these out:

Canva for iPhone: Your Guide To Designing On The Go

32 Photoshop Tutorials for Beautiful Logo Design Techniques

 

 

 

The post Vectr: The Cross-Platform Vector Design Tool You’ve Been Waiting For appeared first on SpyreStudios.

7 Ways to Design Your Blog to Improve UX

Your website may be a place for clients to find out basic information about your business, or it may constitute the entirety of your business’s presence in the world. Whether your website is for advertising, selling or a bit of both, you need to focus on user experience if you want to keep clients on your site. Users who find a site confusing or hard to navigate aren’t likely to return, and that can hurt your profits in the long run. Want to keep users engaged and make it easy for them to find what they want? Then, remember to focus on these seven essentials of improving user experience:

1. Position the most important stuff above the fold.

The phrase “above the fold” is an old newspaper phrase, which refers to having the top stories above the fold in the newspaper. In the online world, this phrase refers to everything that’s immediately visible on the page before the user starts clicking or scrolling. While making you site, identify the most essential pieces of information you want to share and make sure those details are above the fold.

For example, if your website is there to support your brick and mortar location, your address, phone number and similar details need to be above the fold. That makes it easy for users to find your site and immediately find the information they are seeking. Conversely, if you run an ecommerce site, you may want a search box, a description of your current sale and a photo of your best product above the fold.

2. Use white space wisely.

White space is another old print media term, and it refers literally to the white space in a newspaper or magazine layout. On your website, white space can be any color. It is simply space that isn’t filled with text or images.

Use white space wisely. Too much white space fills areas you could be using to promote products or services, while not enough white space results in a site that feels overly busy and cluttered. If a site is too cluttered, users are likely to feel overwhelmed and confused, not the emotions you are trying to elicit in most cases.

3. Consult with the pros.

Finding the perfect balance between text, images and white space as well as deciding what to put above the fold can be difficult, especially if you are new to the world of web page design. To help yourself navigate those issues easily, consult with a professional.

Some of your marketing funds should be earmarked for website development issues such as improving user experience. When you have a professional fine-tune your site, it can improve UX, which in turn keeps users on the page longer, increasing the chance that they will take action such as making a purchase or coming to your shop. When you have funds to focus on user experience, it is an investment into your company and its long term potential for growth, brand recognition and profits.

4. Optimize your site for mobile users.

As any design consultant will tell you, optimizing your site for mobile users is critical. A huge portion of the people who visit any site do so on their phones or tablets. If your site isn’t optimized, accessing it on a phone will be like looking at a huge site through a tiny window. Users will have to do a lot of uncomfortable scrolling, enlarging and looking around just to find the tiniest details.

In contrast, if your site is mobile optimized, the user sees the above-the-fold information displayed on their little screen the instant they pull up your website, and the rest of the UX features you’ve created will also shift slightly so that they work on a mobile.

5. Differentiate hyperlinks.

Whether a client is accessing your site on their mobile phone or their laptop, they need to be able to quickly identify the hyperlinks. Hyperlinks must be differentiated from the rest of the elements on the page through color, size, font and other details, and they should stand out in a way that intuitively says “click me, click me”. Additionally, to instinctively encourage flow, hyperlinks should utilize actions words.

6. Monitor your page loading speed.

When someone clicks on a hyperlink, they want the next page to load immediately. Even people who remember the days of dial up, aren’t willing to go back there. Now, people need pages to load instantly, and if they don’t, the user is likely to jump on another site.

There are multiple free and easy-to-use tools online that can analyze the loading speed of your website. These tools tell you how long the page takes to load, and they help you identify bottlenecks so that you can alter your page accordingly. Run these checks periodically so you know what your users are experiencing.

7. Be consistent from page to page.

As someone uses your website, they get used to your set up. They start to anticipate where to click or the most effective ways to navigate the site. To streamline the learning experience, all of your pages should be consistent.

Consistency from page to page helps your website to look professional, but it also optimizes user experience as it lets users take what they learned from one page and apply it to the next. Sites that lack consistency from page to page can be harder to navigate and less aesthetically appealing overall.

Crafting a website involves so many elements. You have to think about color, balance, information, graphics, text and countless other things, but arguably, one of the most important things to consider is user experience. If users cannot navigate your site, any bells and whistles it has will be rendered impotent. Remember, your site exists for your users — without them, it has no purpose.

Users should be your main priority while creating your site.

The post 7 Ways to Design Your Blog to Improve UX appeared first on SpyreStudios.

4 Web Design Trends Taking the World by Storm

Trends that You Will Want to be Aware of for This and Years to Come

Business has come a long way from the standard models of old that required an ad in the phone book. These days everything is online and with more and more businesses turning to a primarily web based platform, we can expect to see the continued evolution in website design. The avid website designer has to stay current with all of the trends if they are to stay competitive with the market. As we all know, design seems to change from time to time, so a study of the trends of the year is a good tactic when staying competitive.

Here are some of the website design trends that are taking over for this and the years to come.

Scrolling

There once was a time where website designers broke up much of the website’s content by adding additional pages to the website. The trend today however calls for fewer pages with more content. The use of the single page on a standard phone or mobile device can be a bit of a distraction with the need to click on every aspect that you want to see. In addition to the distraction that this can cause, it also leads to small buttons being unable to be accessed by those with large fingers. We have all had the unfortunate event where we attempted to click one thing and came up with something completely different.

Today website designers are jumping on the scrolling bandwagon. Instead of offering an array of clickable pages and objects throughout those pages, they are offering users the chance to do what they already do every day on social media with the ability to simply scroll through the information they seek.

Minimalistic Style

The websites that we have grown accustomed to have truly evolved throughout the years. During the dawn of the website age as we know it, there was competition to have the flashiest website around. Bright colors and lavish artistry seemed to take over the pages and load times were expected so you could get the full experience of the overall website.

Related: Be Trendy With These Minimalist Design Ideas

We now live in an age where people do not have time to wait on a page to load. It is estimated that a person will wait on average around 6 to 10 seconds for a website to fully load and anything beyond that does not get seen. More often than not the user will simply leave before they have had a chance to see anything within the site itself. Minimalism is now taking over. Simplified 3D models and GIFs are taking over throughout the website design industry because load times are far lessened and compatible on more platforms.

web design trends 3d

Real Photography

Standing out online is much more than offering services that no one else has. It is about true originality. For years, designers have relied on clip art and stock photos that they are able to use on websites to add a more humanistic quality, but many of these images have simply been overused therefore there is no real personality within their use. These sources for photos of real people are now being replaced with true originality.

Photography has taken a huge hit with the use of digital cameras and therefore much of the art has been lost, but photographers are finding new mediums for their art form by coupling their skills with many website designers. The photographers are taking photos of both people as well as the products that are being sold on the website. These photo sessions are enabling the website to contain live shots of real people using the product giving the product true personality and the website a depth that cannot be manufactured by stock images.

website photography

Bolder Icons

Icon usage can be overdone if the designer is not careful. The use of icons is made to be simple and distinct. These seemingly small aspects of website design have often been put at the bottom of the page or tucked away from the main focus, but now we are seeing a trend of much bolder icons becoming the center of attention. In the desire to utilize the minimalistic style, website designers are using icons to keep down load times and direct customers to the appropriate page easier and faster.

Website design will continue to evolve over time and these current trends may be obsolete in the next few years. The avid website designer needs to continually be on the lookout for trends that effect their craft and look at more about a website than just its standard content. As more people turn to mobile devices and away from the standard computer, we will continue to see websites cater to the mobile market making the standard website in need of an upgrade.

Douglas Siclari is CEO of the Siclari Studio of Art and Design. With over 15 years in the 3D arts and multimedia world, he has worked with some of the top 3D websites and blogs. He serves as Digital Marketing Consultant for CGTrader, a 3D model marketplace for computer graphics, 3D printing and virtual reality. 

Image sources 1, 2, 3

The post 4 Web Design Trends Taking the World by Storm appeared first on SpyreStudios.

What Designers Can Learn From Nature

Nature can teach us a lot about design.

Everything on our planet is built around nature’s principles of symmetry and beauty. Being the most complex design system we know, nature is bound to be our main inspiration source.

From city structures, architecture, and sculpture to different types of auditory and visual designs, nature can be incorporated in any artwork.

The Golden Ratio: The Foundation of Nature Design

Every little detail of our planet’s structure revolves around a series of rules that build nature as we know it. The Golden Section is a specific ratio between two or more adjacent objects. It’s found everywhere in nature and it’s used for achieving balance and coherency in art. Think about the way that flower petals are arranged harmonically onto the stamen. Or the perfect wind swirls that are formed by cyclones and tornados.

The Golden ratio is all around us and it’s the fundamental principle of nature design.

Takeaway: In art, the golden ratio has been used widely in the 20th century. Artist and architects relied on this simple rule to build monuments, edifices, create sculptures, and picturesque drawings.

Color: The Only Palette You’ll Ever Need

There are dozens of color selection principles like the Analog, Triad or Monochromatic rules. They feature vivid palettes with high contrast that are easily distinguishable.

Nature’s colors are often lower in contrast and use muted “Earthy” shades rather than the brighter, saturated spectrum of color.

Bold colors can be extremely attractive but they can also be distracting and overwhelming. Nature’s color palette is characterized with soft, pastel shades that are easy on the eyes and gives every design a touch of raw realism.

Takeaway: In nature, different tints and shades represent a variety of emotions. When correctly combined together, colors can tell rich stories that beautifully entangles visual elements with symbolism.

Texture: An In-depth Design That Puts Realism On a Higher Level

While we’re currently in the Era of minimalist design where solid colors and high contrast are a leading principle of design, the texture will always have a place in every design composition. It gives art a certain depth and affluence that can never go out-of-date. The texture is one of the fundamentals of nature-inspired design.

The texture is one of the fundamentals of nature-inspired design. It allows artists to build their own 3-dimentional world into a 2-dimentional art piece.

Takeaway: Every object in nature has its own texture and as an artist, it’s your duty to discover those textures and find ways to apply them to your own artwork.

Forms: The Shapes & Silhouettes Of Nature Design

We’ve already discussed the Golden Ratio and how it affects the geometry of nature. Just like we can use this ratio to create balanced visual compositions we can also take forms directly from nature. Relying on shapes and elements that build nature’s appearance is a great way to create realistic artwork.

Forms can be found in different elements such as leaves, clouds, mountain silhouettes, blooming flowers, animals, and plants.

Takeaway: Using various natural forms as the foundation for your design will help you create a beautiful and symbolic art piece.

Learn more about nature-inspired design

If you want to learn more about how nature can boost our creativity and inspire us to create different types of artwork, head to these articles:

Collection of 33 Earthy Nature-Themed Websites

 

Botanical Designs To Rejuvenate Your Inspiration

 

The post What Designers Can Learn From Nature appeared first on SpyreStudios.

5 Principles of Book Design That Work Great For The Web

Despite their differences, book design and web design have a lot in common. They both comply with specific design principles that work great for print design as well as the Web. This article will guide you through the five main book design principles that work great for web pages.

#1: Grid Systems

Setting up the right grid system is a large part of graphic design. No matter if it’s a book, a magazine, a brochure or flyer, grids systems are the foundation of great graphic design. It creates a composition that’s easily perceptible and simplifies content consumption by giving it a recognisable visual hierarchy. Grids are the base of print and editorial design but not exclusively.

Establishing a solid grid gives consistency and structure to your design.

This rule is equal for all types of design, including web pages. Having a grid system that really works is among the most important takeaways that web developers have learned from book design so make sure to apply it wisely and stick to a grid whenever you can.

Yet, don’t be scared to design out of the box. Fitting in extra large photos and aligning text to other accent elements can make for a unique and visually appealing design.

Just don’t align your paragraphs to the right. Trust me. It’s not as good at it looks like, especially when you’re dealing with large blocks of text.

#2: Typography Structure

Imagine reading a text that has no formatting at all.

We’re not talking about small details, such as bold and italic. They are just as important but for the purpose of this experiment, they can be skipped. Think of a book that has no paragraphs, no breaks, no headings, and subtitles. Just plain text.

Sounds hard to read but what does it have to do with typography?

In the meaning of visual structure, typefaces are just like text formatting. They help readers get through large chunks of text quickly and create a basic hierarchy of the content the read.

So you can basically but Comic Sans and Verdana together and you’re good to go, right? No.

Pairing different fonts is not an easy task but it’s also not a rule that should be undermined. A basic rule of thumb will be: when in doubt, match fonts from the same font family. Go for bolder titles and thinner paragraphs and stay away from italics, scripts, and decorative fonts – they’re not good for reading.

In reality, it gets much more complicated. Having a wide variation of typefaces will certainly make your design cluttered. This article will give you some good font pairing suggestions to start off with.

#3: Style Classification

Did you hear that Target removed the girl and boy sections, and united them into a single one? Clients got really pissed about it. But, despite most speculations, it’s not a gender problem – it’s about categorization.

People love classifying things and separating everything into clearly defined categories. The same applies to graphic design. In book and editorial design, different columns and chapters are often characterized with a unique layout. News sections usually emphasise more on textual content while cooking sections would mostly rely on high-resolution photography.

BloombergBloomberg

This principle can easily be translated to web design. Blogs, about us pages, and landing pages usually have completely different layouts. They have a specific structure that works for the particular purpose.

The style classification can also be mostly visual. Take Bloomberg for example. For each website category, there’s a separate home page design, color palette, and grid system. The same typography hierarchy is what keeps the design coherent between pages.

#4: White Space

It helps your design breathe. We’ve all heard that a lot but most people don’t really understand the true role of white space.

White space is not found in the lack of visual elements. It’s rather a graphic component on its own. One that sets the boundaries between different design compositions and hierarchy sections.

That’s why minimalism is so hip. It accents on different aspects of the design while giving them enough contrasting elements. So try avoiding the temptation of filling out every empty pixel on your screen. Remember that without contrast there’s no accent at all.

#5: Design Scaling

In the era of Internet, it’s hard not to talk about cross-platform design. Even editorial and book design are now distributed over various media platforms, all of which require a specific scaling.

Editorial design for different devices

With mobile devices on the scene, it gets even more complex. Web content is scaled down and restructured to fit tablets, smartphones and sometimes even smart watches. Being mindful about the size of your design is essential and will become a make-it-or-break-it point for design structures in the future.

Learn more about editorial design:

10 Gorgeous Examples of Grid-Based Editorial Design

The post 5 Principles of Book Design That Work Great For The Web appeared first on SpyreStudios.

10 Patchwork Design Examples That Are Better Than Minimalism

Have you noticed this recent trend – it’s called minimalism. It’s focused on necessity rather than quantity. Minimalist design strips down the layout to its fundamental features to provide simplicity and optimise the user experience.

Sounds familiar? Truth is, you’ve probably heard this about a thousand times already. This design style has been praised so much it has become rather mainstream. Like every other popular trend, it’s been overused and misinterpreted.

But we’re here to talk about something different. A design technique that can weave together different patterns and graphic characteristic, and still render a minimalist look. Think that’s impossible? Then, you should get to know the patchwork design style.

Let’s start off by giving it a proper definition.

What is patchwork in art: Patchwork is a design style that’s based on replicated patterns. It blends together different graphical components. The elements that form the end design can vary in size, shape, color, and texture.

Now that you’re familiar with the technique’s fundamentals, you can easily spot it in various art forms.

#1: Dockers.eu

Dockers web design

 

Designed by: Olivier Rensonnet

Seen here: Behance

This design of the Dockers.eu website is an ideal interpretation of the patchwork technique translated into web design. It combines various images in a seamless grid. The grayscale photography and orange tinted patches give the design a coherent look.

#2: Names for Change

Urban Ministries of Durham

Designed by: McKinney

Seen here: Names of Change

This website ridiculously resembles the features of the metro design. The dark background and even grid system comprised of various colourful images remind of the trademark appearance of the latest Microsoft OS. Yet, at its core, this design is a patchwork of different patterns and images. The color consistency and photographic filters unify the images and give them a cognate look.

#3: A Design Film Festival 2015

Patchwork tickets

Designed by: Anonymous

Seen here: Behance

It’s hard to notice it at first. The tickets for the A Design Film Festival 2015 seem like the typical minimalist design example. Yet, beneath their sleek appearance hides a beautiful patchwork. On closer examination, you can spot a consistent geometrical pattern that resembles the signature look of the festival branding.

#4: Mochiice

Mochiice patchwork design

Designed by: Jessica SjöstedtLouise OlofssonNatasha Frolova

Seen here: Behance

This Sweden masterpiece does the perfect job of combining contemporary minimalism and patchwork design. The color-rich illustrations give the brand an eye-candy appearance. The plain white sides of the box mute the saturated pattern design and transform it into a balanced minimalist artwork.

#5: Uzuri

Uzuri

Designed by: Chloe Galea

Seen here: Behance

Uzuri’s brand identity is completely based on patterns. The product packaging design features a colorful geometric motif. The product labels are simplified and lightened with a plain white background.

#6: P/D3 Glitch Collage Studies

Patchwork Glitch Patterns

Designed by: Wayne Edson Bryan

Seen here: Behance

The patchwork collages of Wayne Edson Bryan explore the hidden beauty of digital glitches. He uses different grayscale images, text elements, and geometric grids to create coherent collage designs with a consistent patchwork layout.

#7: VIEWS Corporate Design

Patchwork poster design

Designed by: Yves (Khay Redd) Kräher

Seen here: Behance

This patchwork design consists of distorted dot patterns and typography. It relies on heavily contrasting colors to create an eye-catching design that should “irritate and play with the perception”.

#8: Donut’s Club

Patchwork design

Designed by: CODE501 .Brandiziac

Seen here: Behance

The Donut’s Club has a packaging design that can instantly make your mouth water. The design combines a patchwork of donut drawings which perfectly blend together to create a consistent artwork.

#9: The Patchwork Polyphony

The Patchwork Polyphony

Designed by: Victor Tyapkov

Seen on: Cargocollective

This is a design project of the Arctic Art Institute that unites Russian and Norwegian graphic designers. The project aims to create a collaborative collection of artwork that represents love, happiness, and family.

#10: The Patchwork Polyphony

Patchwork Poster

Designed by: Eriksen Brown

Seen on: Tumblr

This poster is a great example of the Memphis design style. It incorporates dot patterns in different shapes and opacity to create a geometrical patchwork design.

The post 10 Patchwork Design Examples That Are Better Than Minimalism appeared first on SpyreStudios.

Best Resources To Find UI/UX Design Inspiration

Designing a custom interface from scratch is not a simple task. Even professional designers browse other interfaces for inspiration and idea generation. But it can be tough knowing where to look for this kind of inspiration, especially since the web is saturated with hundreds of design resources.

In this post I’d like to share a handful of resources to find free UI and UX design ideas online. These sites are all free to browse and frequently updated with new ideas.

Whether you’re designing for mobile apps or website layouts there’s no shortage of inspiration. You just have to know where to look to find the best stuff.

UI/UX Galleries

Whenever starting a new project one of my first destinations is a related inspiration gallery. These galleries curate designs and organize them based on subject matter, colors, design features, and other similar properties.

For website ideas I prefer siteInspire just for the humongous collection of 4000+ different websites in their gallery. You can search by subject matter, design styles, or just browse the whole collection page by page. But Unmatched Style is another decent choice.

siteinspire gallery

Mobile designers have a little more to choose from because there are so many design mockups and quality mobile apps out there.

The difference is that most mobile apps follow design patterns rather than specific interface features. These patterns are easy to repeat once you understand how they work. But you really need to study mobile app design to put together working ideas.

Pttrns and Mobile Patterns are two websites both made to serve mobile designers. They showcase quality mobile app design patterns that you can repeat and restyle for your own applications.

Many of these patterns actually come from real applications showing designs from prominent app screens. This offers inspiration that’s not only beautiful but also feasible to re-create since an existing app already uses the interface in real life.

pttrns gallery

UI Parade is a similar concept but with spec mockups rather than real applications.

All of these mobile design galleries feature quality interface patterns, color schemes, typographic choices, and icon designs to help you build usable interfaces of your own. They can even influence website layouts in instances where the design patterns can be device-agnostic.

Another personal favorite of mine is UI Garage which catalogs mobile-specific interfaces and design patterns all in one place.

These galleries go to great lengths to help you search by category and UI element like signup forms, empty state pages, launch screens, and checkout forms(among dozens of other options).

UX Archive is somewhat unique in that it presents real application flows from start to finish. So you’re not just looking at the designs. You’re looking at the entire user experience flow moving from the first page to the last page.

This may not be as useful to interface designers, but UX designers & animators will really appreciate the storyboard-style layout of this gallery.

Another alternative is to peg down a niche specific inspiration gallery suited to your needs. There are so many great galleries on the web and new ones launch every day.

Here’s a handful of specific niche sites you might enjoy that target inspiration for unique digital interfaces.

Best Design Blogs

For more specific design galleries I’ll browse through blogs for showcases and hand-curated collections. These galleries get a lot more specific with ideas like feature film websites and targeted small business websites.

I’m always looking for blogs that actually have a unique inspiration category for organizing their galleries. You can find this on many big design blogs like Speckyboy, WhatPixel, Line25 and Hongkiat.

There is no right or wrong way so sort through these galleries. Some people might browse the category page by page, others might prefer to nitpick through inspiration galleries based on specific needs.

There’s almost no limit to how many custom inspiration galleries you’ll find on blogs.

The most useful galleries are categorized by certain design properties you’re looking for. These can include small business designs or specific colors or certain types of layouts(like minimalist or grunge or retro).

Even SpyreStudios has its own inspiration tag for browsing through websites and design galleries.

And it’s likely that all your favorite design blogs have their own inspiration categories too. You’ve just gotta find them and bookmark them for future reference.

Here are some honorable mentions for inspiration categories on other design blogs.

Design Communities

I’m surprised how few design communities are online in today’s age. While there aren’t a large number of these communities, the ones that are online really pack a punch.

Dribbble is the most populated and offers the most volume when it comes to design inspiration. Users upload new content every single day and there’s likely over a million unique shots of mobile apps, website layouts, and other product/illustration designs.

I also like Behance although it’s admittedly lower quality than Dribbble. Behance is a completely free network while Dribbble is invite-only so they both have different content requirements for publishing. However they’re both fantastic options and if you’re looking for inspiration you should consider browsing through both.

dribbble homepage

Sometimes I’ll also check out the Awwwards galleries since many of them are hand-curated by a combination of user votes and editorial votes.

Awwwards has its own blog with inspiration galleries there too. But the site’s main purpose is to showcase the best designs from around the web.

The problem with Awwwards is that many of the designs tend to “push the limits” of traditional interface concepts. This means you probably won’t find classic layouts in the site, but rather examples of experimental or avant garde designs.

It’s still one of the best communities for design inspiration so it belongs in this list. Just be wary of how many ideas you borrow since the designs can be rather intense.

And lastly there’s the newer social news community of Designer News. This community is 100% powered by user voting so the links end up on the front page based on popularity of the community.

Many of the posts do relate to product launches and breaking news. But often times you’ll find a post with the prefix “Site Design”. This means it’s a post showcasing a specific design(or redesign) of a website.

designer news homepage

I’m a huge fan of Designer News and I think the post quality is incredible. If you’ve never checked it out before then I’d give it a very high recommendation.

Social Profiles

Very few social networks offer prominent inspirational content. But the few that do are fantastic. Twitter and Facebook are big networks but they’re made for communication and branding rather than inspiration.

One great choice is Instagram where you can actually search via their native web API. For example you can search the tag wireframes to find wireframe sketches posted to Instagram.

In that process you might stumble onto a cool wireframes IG account which specializes in posting wireframe inspiration. This is the type of stuff you won’t find in Google images and Instagram makes the perfect network for photo curation.

instagram sketching page

Another social site I adore is Pinterest. The userbase tends to be shoppers and “mood board” type users but there’s a great deal of web design inspiration too.

In fact, a search for web design shows hundreds of custom boards dedicated to website design inspiration. The same can be said for UI/UX design, mobile app design, icon design, and basically every other form of digital design.

Pinterest is heavily trafficked and mostly full of people who love beautiful things. If you’ve never used Pinterest for design inspiration it can be rather hectic at first. But once you learn how to search and find what you’re looking for it can turn into one of your favorite tools.

The last site I want to recommend is Tumblr. I haven’t found too many social profiles on here that curate beautiful design, but there are some and they do the job well.

Mobile Design Inspiration is a Tumblr account dedicated to UI/UX mockups and custom animations.

It’s updated regularly with Android/iOS inspiration sourced from all over the web. Tumblr blogs like this one can save you a lot of time scouring Dribbble and Behance since it curates all these resources in one location.

mobile design inspiration gallery

And if you have the time you might even setup your own social channels to share inspiration ideas for others.

The design community is made up of great people who are willing to dedicate themselves to the craft. And it’s this dedication that makes finding quality inspiration so easy and fun.

Inspiration & Beyond

All of these websites should get you started on the right path to finding quality interface design inspiration. Over time you’ll learn which sites offer the best results for your projects and you’ll end up going there first.

But there is no wrong way to find inspiration so just dig in and go to town! And don’t forget that you always have Google, by your side which may just be the #1 inspiration resource finder on the web.

The post Best Resources To Find UI/UX Design Inspiration appeared first on SpyreStudios.

5 Unexpected Places To Find Design Clients

Finding design clients isn’t always easy. Sometimes, it requires the same amount of creativity we put into building our best designs. But that’s what makes freelancing so amazing. It’s filled with untapped resources that can help you find fresh collaboration offers and new design clients. All you need to do is put your creativity to use.

#1: Partner up with tech experts at a coworking space

Working at home can be quite enjoyable. You’ll be surprised how attending meetings in your PJ’s can suddenly become a normal thing. And how quickly you’ll adapt to a new morning routine that starts right about when you’d usually take your lunch break. It’s all a dream come true until the loneliness steps in.

Find design clients

Sooner or later you’ll realise you maybe miss your old office. Luckily, you don’t have to get your job back. All you got to do is find a cosy coworking space.

There are thousands of coworking spaces all across Europe and the US where tech experts, startup owners and working nomads build their products.

Go out of the house for a change and meet some new friends at your local coworking space. Who knows, maybe you’ll be able to partner up with other great minds and join forces to create something amazing together.

#2: Create online course and expand your auditory

You’ve probably never envisioned yourself as a teacher. Truth is, most people don’t. It’s a role we tend to dislike and connect to our childhood years spent under the close guidance of strict councillors.

Find design clients

Still, the ability to inspire and educate others is a quality not many can boost with. If you’re an expert in your field, you’re a problem solver and you love sharing your knowledge you’ll definitely love coaching. And doing it from the comfort of your own home is even more delighting.

Today, there are hundreds of platforms, like Udemy and Teachable, where you can create and distribute your online courses. And even earn something on the side. But the real bonus that comes with it is connecting with people. You’ll find that most of your students will usually be experts in different fields that might be interested in having a professional help them with their graphic tasks.

#3: Grow big by completing small task

You just quit your job to start your own freelancing business but you can’t find any clients? Don’t worry that’s absolutely normal. Yet, this doesn’t mean things should stay that way.

Find design clients

While places like AirTasker are famous for providing small handyman, housekeeping and delivery jobs, there are also many people who seek designers there. And there’s always Fiverr which is focused mostly on digital services. You’re probably wondering what’s the catch? Why are there so many people offering their services for a few dollars at most?

Truth is, most of those small tasks lead to bigger ones. You design a stationary for John and next thing you know he wants you to create his brand identity and website, too.

#4: Get new clients through a coupon website

What’s the first thing that comes to your mind when you think of coupons?

Find design clients

It’s probably not exactly related to design but that’s the charm of it. People in sites like Groupon and LivingSocial are in for the deals. They’ll take anything that offers quality and affordability in a single package.When the market is not flooded with quirky design studios that offer to create you an awesome logo for a dime, your chances of getting a few clients suddenly raise.

But be prepared for a huge load of work. You might end up having more clients than you’ve bargained for. Design them a great product and provice a memorable experience and people will come back to you with more requests.

#5: Give away freebies to the designers community

People love free goods. They love them so much they’d gladly tweet about them or like them in return.

Find design clients

Designing for the community is a type of charity work that doesn’t necessarily pay off but doing it feels great, nonetheless. But there’s something that often gets overlooked. When you put your heart and soul into creating your  product, it will inevitably get noticed.

You don’t need to get shared by big magazines to discovered by people. All you have to do is do what you love with passion and soon, you’ll be able to find a lot of new design clients.

You’ll also love these articles:

10 Things Every Web Developer Should Do to Woo High-Paying Clients

Keep Scammers & Bad Clients Out of Your Freelancing Business

 

 

 

The post 5 Unexpected Places To Find Design Clients appeared first on SpyreStudios.