Category Archives: WebMaster

The Basic Principles of Visual Design

Posted 4 days ago by José Torre

Yesterday I was listening to a podcast and heard someone who was about to ask a question saying something along the lines of “..long time fan, first time caller…” and for some reason that got me thinking about Medium. I’ve been consuming content here for a long time but have never contributed myself with my 2 cents. Today is the day this changes.

As my introduction I decided to write about something close to my heart, Visual Design (aka graphic design), more specifically the basic principles I learned to use which I consider essentials for me to perform my job well.

I want to keep this article short, for that reason I will try to be brief in each of these principles, for the ones that deserve a bit more depth I might dedicate a full length article in the future.

Ok, ready? It all starts with…

#1 Point, Line & Shape

These are the most basic building blocks of any design, no matter what it is. With these you can create anything you want, from simple icons to very complex illustrations, everything is made with the combination of these simple elements.

In geometry a point is a combination of x and y coordinates, add a z axis and you’re in 3D, but let’s stick with 2 dimensions for this article.

Point > Line > Shape

If you connect two points you’ll get a line. A line that is formed by an immensity of points, a bit like a bunch of atoms form molecules which, in turn, form all the objects around you. Then, if you add a third point and connect them all you have a shape, in this case a triangle, but as mentioned before you can use this basic elements to achieve pretty much anything that you want.

Now, to your eyes these shapes don’t really exist until you add something to it…

#2 Color

Visible Color Spectrum.

The human eye can see over 10 million different colours from red to violet, and from young age all of us learn to attribute certain values or meanings to specific colours.

Imagine the traffic lights for instance. They’re just colours but we learn that red means stop, green means go and yellow means step on the metal because you can make it before it turns red. This to say that we take very different actions just based on a colour, sometimes even without thinking about it.

In my opinion this happens simply because we learn these things, not because a colour has an intrinsic meaning attached to it. This is more true if you consider that these meanings will change depending on your culture, where and when you were raised.

“All this to say that you can add meaning, intention and a tone just by picking the right colour, you just need to make sure you understand very well who you’re designing for.”

Now that you can see your triangle, how about making it more interesting…

#3 Typography

From a triangle to an A

This is a big one and I consider one of the most important, and difficult, things for designer to get right. It’s not only about what you write but how you present it. Typography is how your words look like.

With the right typeface you can have a banal piece of text and make it powerful, but that’s not easy to do, what is easy is to completely mess up a powerful statement just by selecting the wrong typeface. Typography, as well as colour, allows you to define a tone.

“Most typefaces are designed with a purpose, you just need to learn what that is and use it in your favour.”

Some typefaces are great for big blocks of text, some work great as titles. Some are merely functional and super clear and others are just meant to be fun or used ironically (you know what I’m talking about).

There are thousands of different typefaces to choose from but unless you need something whimsical or you’re trying to make something very specific I would always advise to stick with the classics. However, if you’re felling bold you can even design your own typeface, although I think that is one of the most challenging things to do properly as a designer, but if you think you’re up for the task one thing that you can’t forget is…

#4 Space

“The way you balance your space can be a maker or a breaker, especially in typography.”

You need to consider how each element/letter relates to each other, give them the precise breathing room they need, this is usually referred to as negative space (positive space are the actual letters).

Adjusting the negative space between letters (aka kerning).

You need to take the negative space as part of your design and use it well, space can be powerful and help your viewer to navigate through your design. It can also be a place to rest the eyes.

“Use it wisely though, too much space and your design will look unfinished, too little space and your design will seem too crowded.”

Managing to find the right ratio between positive and negative space allows you to create…

#5 Balance, Rhythm & Contrast

This is when you’re starting to make a bunch of plain elements into something interesting and appealing. Balance well all the elements on your design by considering their visual weight. A big black square in the your bottom right corner will sink your design from that side. Compensate for that weight or move it to other position.

Adjusting the Visual Weight of the words to create rhythm and contrast.

The way you lay elements in the page is crucial, making some elements heavier than others will help to to create contrast and rhythm and lead your viewer’s eyes through your design gracefully and effortlessly.

Something that may help you with rhythm and balance is also to play with…

#6 Scale

Taking it one step further by adjusting the scale of the words.

Scale helps you not only creating rhythm contrast and balance but also hierarchy. Basically not all the elements in your design should have the same importance, and one of the best ways to convey that is size.

Now, this must serve a purpose. Don’t go for the “make my logo bigger cream” approach and forget about the space I mentioned before.

For instance, take a newspaper page. What’s the biggest thing in the page?

The titles, that are also usually short. Why? So you can scan the page quickly and see if there’s something interesting for you to read. Then we have the subtitles that are smaller but give you a little more information about the article, and finally we have the article that has the smallest font size but also the most comfortable to read a long piece of text.

So, it’s all about making the size serve a purpose and never forget about the person who will consume your design. Speaking of newspaper, is time to bring some order with…

#7 Grid & Alignments

It’s like that oddly satisfying feeling when you’re playing Tetris and you stack that last bar that clears your screen.

Creating some relationship between the elements to make it look more balanced and pleasant.

These are supposed to be invisible but you’ll see them if you open a book or a newspaper, but (no matter what you’re designing) following a grid will structure your design and make it more pleasant and easier to digest.

“Even if you’re making a chaotic design purposefully, there must be an order for that chaos.”

Alignment is specially important with text, there are several ways to align it but my rule of thumb is to align it left. It always depends on what and for whom you’re designing of course, but generally, people read from left to right, top to bottom, which makes text that is center or right aligned much more difficult to read.

#8 Framing

This is a key concept in photography but it also applies in visual design.

Whether you’re using a picture, an illustration or something else, framing something properly makes all the difference.

Reframing the composition to add interest and an extra element.

Try to direct the eye to what matters, crop/frame images to make your subject stand out or to reinforce your message. It’s all about telling the right story and telling it well.

After all this, if you feel there’s something missing, you can play around with…

#9 Texture & Patterns

Trying out a noisy texture.

I personally see texture and patterns like accessories, you don’t have to use them necessarily and you can live without them but sometimes they can, almost on their own, make your design or add that little extra interest it was missing.

Textures are not as trendy as they used to be a while ago but with them you can add another dimension to your design, making it more three dimensional and touchable.

“The texture doesn’t have to be in the composition itself, if it’s something that is going to be printed, picking the right paper, add things like bevel, emboss or UV varnish can make your design pass from banal to something superb. But pick one, don’t go crazy with the special finishings.”

Patterns are all about repetition, and can be almost considered textures depending on how you’re using them. I see them mostly used as a way to inject rhythm and dynamism into a flat design and a way to compensate the excess of negative space.

Last but not least, and this is actually what I personally consider to be the holy grail of visual design…

#10 Visual Concept

This is the idea behind your design. What do you mean with it and what’s the deeper meaning behind the superficial image.

An idea lamp… cliché, I know 🙂

This is what distinguish a great design from something you can download from a stock website.

Design with intent and always have an idea that connects everything in your design. Pick your fonts carefully and with a purpose, think about how every tiny part of your design follows that base concept. Coherence is everything.

“If your concept is strong you’ll be able to defend it and sell the idea to your client/boss or whomever you’re presenting it to.”

Also, a properly thought out design will last for ages. Trendy hipster things are nice and cute but, as the moustaches and the checkered shirts, they come with an expiry date. I really believe that a good design does NOT follow trends, but it creates them instead.

There you have it, “my” 10 Principles to build a good design. Even thought I consider #10 the essential one, you need to pay attention to all the others principles and make sure you really become a master of your craft. You might have a great idea but I think you also need to know how to make it justice (or have someone who does it for you).

They say you can’t judge a book by it’s cover, but most people actually do. If what’s inside the book isn’t well portrayed in the cover that will definitely influence how well it does.

Alright! That is all.

As a final note I must mention: There are, of course, other things I take in consideration for a project/design, like understanding who is it for, and what do we want to achieve with it, however I didn’t make those part of this list of principles because I consider these “constraints” an essential part of defining the visual concept. The idea might be brilliant but if it doesn’t answer the project’s needs it will sooner or later fail.

I hope you find this useful even if you already know all this. I’ve definitely used this set of principles as much as I use my Staedtler pens and it actually was an interesting exercise for me to deconstruct my designs into it’s bare “building blocks”.

This article was originally published on Jose’s Medium page.

Article from:

fibank интеграция epos терминал , как да трансформираме JKS формат в PEM, за нуждите на PHP

Това кратко ръководство има за цел да ви запознае с информация “как да трансформираме JKS формат в PEM, за нуждите на PHP”.

Предполагаме, че работите на Windows (една от най-разпространените операционни системи)

Трябва да имате инсталирана Java Runtime Environment

От FiBank Получавате:

1. Разархивирате с паролата, която са ви дали за zip.


За демонстрационни цели нека кажем, че файлът, който сте разархивирали се казва ОРИГИНАЛНО: imakstore.VENCEDOR
Дългата парола за отключване на СЕРТИФИКАТА (не на архива) е: CERTPASS

2. Пуснете Command Prompt като администратор.
Run as Administrator

3. Чрез отворения терминал влезте в директорията на JRE / bin

cd C:\Program Files\Java\jre1.8.0_121\bin

директорията jre1.8.0_121 – може да варира спрямо текущата версия на JRE (Java Runtime Environment), която сте инсталирали.

Тук се намира keytool.exe , което е част от JRE.

Изписваме следната команда, която има за цел да конвертира файла в .p12

keytool.exe -importkeystore -srckeystore imakstore.VENCEDOR -destkeystore imakstore.VENCEDOR.p12 -srcstoretype JKS -deststoretype PKCS12 -srcstorepass CERTPASS -deststorepass CERTPASS -srcalias ima -destalias ima

На мястото на imakstore.VENCEDOR , слагате името на вашия файл.

На мястото на CERTPASS, слагате паролата, която ви е дадена от fibank (не паролата за архива, а паролата В архива, нещо от типа: KFb1bVv8xHDjcnYn1DNqSJe3qfdVogbg).

Ако не ви излезе някоя грешка, честито ! Имате файл
C:\Program Files\Java\jre1.8.0_121\bin\imakstore.VENCEDOR.p12

4. Трябва да конвертираме .p12 в .pem , за да можем да го ползваме с РНР спокойно.

Това действие се извършва на вашия сървър, с който ще работите като връзка към fibank.

4.1. Качвате файла imakstore.VENCEDOR.p12 в главната директория на сървъра си.

4.2. Хубаво е да имате ssh достъп до сървъра си, в противен случай трябва да изпратите на поддръжката на сървъра, да пусне командата вместо вас.


openssl pkcs12 -in imakstore.VENCEDOR.p12 -out imakstore.VENCEDOR.pem -passin pass:CERTPASS -passout pass:CERTPASS

Хубаво е да ви излезе ред: “MAC verified OK”, ако не излезе, редно е да се свържете с fibank за повече инфо.
Вече имате файл : imakstore.VENCEDOR.pem , който се намира в главната директория на сървъра ви! /там където трябваше и да сте качили imakstore.VENCEDOR.p12/ – best way to make a custom web font

Like it says on the intro “Custom built and crisp icon fonts, done right”

Why IcoMoon? / /

Build Custom Fonts

Using the IcoMoon App, you can build your own custom fonts that only contain the icons that you need.

Pixel Perfect Results

Unlike similar services, the IcoMoon app takes grid sizes of icons into account and generates crisp, pixel perfect results. With a proper alignment, the font size you set would directly translate to the size of the icons.

Free Icons, Free App

The IcoMoon app is free. You don’t need to pay anything or give back any credit for using it. IcoMoon’s Library features many high quality icon sets. All of these icons are designed on a grid and they are optimized to be used with the IcoMoon app. Add any set you wish to easily browse and search its icons.

Awesome Iconography Tool

The IcoMoon app is an advanced iconography tool. It lets you sort your icons, manage your icon collections, or make your icons searchable by adding tags to them. In addition to fonts, you can generate PNGs, SVGs and CSS sprites in any size and color you wish.

Import Your Own Vectors

In the IcoMoon app, you can import your own vectors (SVG images or SVG fonts). Importing icons happens locally, in your browser. Your vectors won’t get uploaded to our servers when you import them. Some basic editing options such as moving, mirroring and rotating are available too.

Works Offline

Once loaded in your browser, the IcoMoon app works offline. When you import an icon or generate a font, everything happens locally, in your own browser. Your icons/fonts won’t be uploaded to our servers. You can even load the IcoMoon app when you have no connection if you install it from the Chrome Web Store.

Multiple Ligatures Per Glyph

Instead of assigning single characters to your glyphs, you could assign different tags to them (ligatures). This feature is especially useful for fallbacks or desktop usage of the fonts. Learn More…

25+ Free and Sought-After jQuery Plugins

With a quite promising slogan “Write Less, Do More,” jQuery has become the first choice among web developers, and is probably one of the most popular JavaScript libraries. It is not surprising since it fully justifies the motto and has an enormous potential that can be easily unlocked by any tech-savvy person. Here are a few free jQuery plugins that are considered to be the most popular, the most sought-after and the most effective.

There are tons of fast, versatile and feature-rich solutions that are powered by it on the wild. High value plugins are are universal, and can bring benefits to different projects and layouts. As a rule, we seek code snippets that were neatly and professionally converted into plugins that have documentation and intuitive manual.

These tiny and lightweight enhancements refine projects in terms of design, interactivity, user experience, readability and other significant and integral aspects.

List of Free jQuery Plugins


Free jQuery Plugins

Datedropper is a lightweight jQuery plugin for working with dates that populate forms. It presupposes settings for customizing color, animation effect, language, format, background, border color and some others. The official website includes demos and all the necessary documentation.



With two traditional gallery styles, full and minimal, PhotoSwipe is aimed to showcase a series of images in the best possible light. It is a perfect match for modern responsive websites that should provide an optimal experience for different devices. The plugin supports all standard touch gestures. The navigation is also available through keyboard and intuitive interface with pixel-perfect graphics


jQuery Plugin

Chartist turns the display of boring statistics into a captivating, engaging and visually interesting spectacle. This small, responsive SVG-based library lets build vibrant and dynamic charts. The only drawback is that the plugin is supported by modern browsers such as IE9 and higher, Safari 7, Android 4.3, Firefox 3.1, Chrome 3.5.



The main goal of Animsition is to enhance the user experience by making the transition between pages a pleasant event. This tiny jQuery plugin allows creating smooth and eye-pleasing CSS-powered animations that accompany shifting. It offers almost 60 different effects including standard fade series, fade-up series, fade-down series, rotate series, flip x/y, zoom series and overlay.



FSVS, or Full Screen Vertical Scroll, enables you to deal with scrolling effects more efficiently and productively. It leverages CSS3 transition effects and has an optional yet vital jQuery fallback. Since it should provide an extra functionality for small devices such as tablets and cellphones, it supports touch gestures and swipes. What’s more, you can also use arrow keys, mouse wheel, click and drag.



Strip is a modern solution to add an elegant lightbox to your website. It is smooth, sleek and smart. Since it takes up not the whole browser screen, users are left with free space and some other parts of the layout for better and less intrusive interaction. Moreover, it is driven by jQuery, so that all the modern browsers handle it.

Sweet Alert

Sweet Alert

Sweet Alert enriches regular and dull pop-up windows that appear when something wrong happens or when you require some interaction from the visitors. The plugin automatically centers an alert box and provides a semi-transparent dark overlay accompanying screen thereby easily focusing the whole attention on the content. It is highly customizable in terms of design and complementary effects.



Midnight offers a simple yet viable solution for improving and enhancing fixed top bars that, as a rule, are used as primary navigation centers or advertisement/info panels in long or parallax-based websites. It lets switch between several variants while the user is moving down.

Block Scroll

Block Scroll

Block Scroll was created to improve readability and user experience. Content heavy and information overloaded projects will feel the whole potential of this product. It breaks the page into digestible portions that are displayed one at a time, giving readers freedom and time to enjoy data.

Paper Collapse

Paper Collapse

Paper Collapse is a regular accordion that has a beautiful, sleek appearance and a handful of features. Being inspired by Google’s Material Design, the component employs Font Awesome icons to make the interface look more intuitive and more harmonious and stylish.



FocusPoint offers simple yet useful instruments for cropping of flexible image containers, making this process more intelligent and hassle-free. It is well-suited for full-screen images. It easily deals with different dimensions and two modes, such as portrait and landscape, in order to maintain consistency in style and provide better experience on smaller devices.



TextTailor is intended to work with text more efficiently. The plugin makes the content to be more responsive and mobile-friendly. Its primary function is to force the text to fill the height of the container thereby contributing to the general formatting and design aesthetics.



BootGrid is a small and powerful enhancement for Bootstrap-driven websites. It has an intuitive interface that improves work with one of the basic components. It easily transforms a primitive table into refined data table with extra controls and options.



PrettyEmbed allows populating projects with YouTube-hosted videos without delays and problems. It comes with such features as fetch the preview image that won’t look distorted on a huge or vice versa small screens, extra customization options, and native support for FitVids.



Waves was also inspired by the Google Material Design concept. It offers a tiny accompanying effect that enriches clicking. You can apply it to buttons, icons, DIVs and images. What’s more, it perfectly works with event handlers inherent to jQuery and JavaScript.



jsPDF is HTML5-based client-side solution for dynamically generating PDF files. The library is quite powerful in what it can do so that in order to feel its enormous potential you should visit the official website. It ships with numerous built-in functions and uses jQuery. As for browser compatibility, it works well in Firefox 3+, Chrome, Safari 3+, Opera and even IE 6 (with some tricks).



fontFlex is aimed to make the primary font of the website responsive and fully adaptive. The extension dynamically selects the right size that should make the content look more appropriate within a container or browser screen, improving readability.



Video backgrounds made easy with this super lightweight and smart plugin. Vide helps to enrich the website with lavish and dynamic visuals. It is supported by the latest browser versions; with one exception, as usual, IE8 and lower are left behind. Some versions of Android and iOS can also experience problems. For the rest, everything is fine.



Trianglify is all about fascinating, eye-catching and stylish polygonal art that beautifies an appearance of any website giving the backdrop a cutting-edge feel. The online tool automatically generates the vibrant and geometric style SVG background images that are constructed from triangles. You can specify the amount of objects, their size, color and even set the output format.



TitleNotifier is a miniature dependency-free JavaScript library with a set of instruments for thorough customization. It shows the number of unread notifications in your web page title, just as Gmail does it when it comes to unopened messages.



jBox is a small yet powerful and advanced plugin that deals with pop-up windows, tool tips, notices and images. Each one has its series of assigned effects that contribute to general aesthetics and user experience. It meets standards for retina screens and works great, even in IE8.



CrossFade is a minified jQuery plugin that weighs only 3kb. It is an excellent enhancement for long-page websites where images play the first fiddle. It preloads images as to not annoy users with a boring loading process.

Scrolling Progress

Scrolling Progress

Scrolling Progress provides your online visitors with visual indicator while they are moving down and exploring your long-page website. Designed with the help of HTML and CSS and charged with extra dynamic feel by jQuery, this framed code snippet can contribute to general experience and benefit any project.

Select or Die

Select or Die

Select or Die is a plugin which aims to bring elegance and refinement to plain select inputs. With it, drop-down components look nifty and stylish much like ghost buttons. However, it will be useful for tech-savvy people since it does not have a friendly interface.



tableExport works with various sorts of tables. You can export HTML table into such popular file formats as JSON, XML, PNG, CSV, TXT, SQL, MS Word/Excel/PowerPoint and even PDFs in several clicks.

Scroll Up Bar

Scroll up bar

Scroll Up Bar is particularly useful for mobile and tablet user interfaces that are suffering from a lack of free space. The plugin hides the navigation bar that as a rule sits on the top when the user starts to scroll down and shows it when a user is ready to go up thereby providing an extra space and not distracting from the design.



CoverVid is another viable and efficient solution to work videos into a project and set them as a basic background. It cooperates mainly with HTML5 videos. There are several settings that allow getting the most out of it.


When it comes to enhancements and improvements, it is hard to find something better than a pack of tried-and-true and approved by dev community jQuery plugins. They are proved to be the most viable, easy, cost-effective and time-saving solutions.

You can solve a bunch of common problems with the help of them, starting from making more eye-catching calls to action to enriching user experience in long-page websites with extra informative indicators or captivating effects. Some of them have a great informative background, others should be perceived on an intuitive level, yet all of them deserve your attention.