One of the most effective ways to market your brand online is through banners. Attractive, eye-catching banners don’t just play the part of getting customer attention they are also one of the most traditional-but-still-relevant methods of promoting your brand image. The easiest example of effective banner marketing is affiliate program banners. They have all the relevant information squeezed into a box sized attractive banner that’s so catchy that a significant percentage of people viewing them end up either visiting the affiliate marketer’s website or actually enrolling for it.

While using banners is one thing, designing them is an entirely different story. Actually, the way your banners perform depends to a large extent on the way they are designed. That’s probably the reason organizations really wanting to reap a significant advantage hire banner designers and marketers dedicated to the end. However, affording good banner designers is not everyone’s cup of tea.

So if you’re a professional just starting out, does that mean you have to lose out on online marketing? Of course not! With Bannerwise, you can design and use engaging banners at an affordable price and capture all the audience attention you want.

Bannerwise – Easily create beautiful banners!

Bannerwise is a tool that lets you easily design ad banners of different sizes for different devices like mobile, desktop, and laptop. Suitable for businesses of all sizes, this cloud-based tool provides users with an interactive online interface where users can either upload images and design custom banners or choose from a rich library of pre-built templates. With users across the globe raving about it, Bannerwise is well on the road to grabbing the spot of the most coveted online banner designing product.

Key advantages Bannerwise offers include:

• Allows thousands of businesses to scale-up their banner production
• Optimize their display campaigns
• Improve their workflow

Here’s a quick glance at the best features of Bannerwise:

• Enables users to create professional HMTL5 banner ads quickly and easily
• Intuitive interface means no coding skills needed
• More than 100 professional animated banner templates
• Allows you to create one design and scaled it to fit all sizes and formats automatically
• You can edit all your banners simultaneously and monitor the changes keenly
• Banners designed with the tool are compatible with most popular ad networks
• Banners are high resolution but low in size
• Professional animations in a few clicks
• Allows easy banner optimization and testing

How the tool works

Trying a tool out before putting money on the line is the smart thing to do. So start using Bannerwise through the free 14-day trial by clicking on the dark pink button that says “Get My Free Trial” on the home page; doing that will redirect you to a sign-up page where you need to fill in your details. Once done, you’ll reach a login activate page with the message “We’re very excited to have you on board!”

But this is where the story sadly took a halt. Quite surprisingly, this message was followed by another one stating that we’ll be contacted by one of Bannerwise’s display experts soon. We weren’t sure why we were rebuffed like that when the next screen we should have seen was the tool’s dashboard. One reason we could think of was that we filled in dummy details since we simply wanted to check out how the tool looked in action.

But even after trying with legitimate details the message was the same. Either the platform was under maintenance or they weren’t accepting new registrations at the time, or maybe that was just the way they operated. But it was unusual. There was nothing more we could do except wait around to be contacted.

Pricing & Licenses

Bannerwise can be used in one of 3 flavors:

• Starter plan that gives a single user access to create about 25 banners for €99 per month
• Standard plan that allows up to 2 users to create unlimited banners for €239 per month
• Professional plan that lets up to 5 users create unlimited banners for €399 per month

There are additional benefits associated with each plan with more features being available with the higher priced plans, obviously. Steep prices if you ask us, but then, if you strike the right cord with your audience through banners created using the tool, you’ll end up making much more that you spend.

• Design creative, elegant, catchy HTML5 banners within a few clicks with @BannerwiseNL bannerwise.io/ via @supermonitoring

  Tweet this

Verdict

We actually couldn’t find out any pros or cons with Bannerwise because we didn’t get a chance to use it. At the time of writing this review, we were waiting for someone from Bannerwise to contact us and take things forward. So saying anything at this point would be futile. But we promise to put up a review of the tool’s working with its pros and cons as soon as we get the chance to experience it.

One of the most essential parts of web development is finding the right look-and-feel for what you’re building. When working on a project, web designers experiment with tons of themes, customizations, animations, and other aspects to find exactly what they or their clients like. And CSS plays a major role in such web designing. Typically, web designing with CSS involves putting in the code, watching how it turns out on the website, tweaking the code a bit, then again watching the results, and so on. It’s an iterative process involving considerable time and effort. And for someone who’s new to CSS, the whole thing can turn into a nightmare since he’d have to research to find the exact lines of code that can result in the effect he want.

Although it’s a part of the job, it is natural for designers to feel exhausted and frankly, annoyed with it after some time. But that’s just how the process goes. There isn’t really anything anyone can do about it right?

Well, not actually! With Animista, a lot can be done to ease CSS based web designing; actually to the point of making it click-based. Want to know how?

Animista – the wonder tool for creating and testing CSS on the fly!

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and save only the ones you actually wish to use. It’s like a supermarket for CSS animations. You visit, you tweak and play around, you consider options, and you pick the stuff you like. The online tool contains a considerable amount of animations that have been organized in a meaningful and accessible way so that they can be easily reused on different projects. What started off as a small personal project for a web designer, has shaped into this online playground which contains a collection of pre-made animations that can be tested with various options like easing, delay, duration and others. Once a user is satisfied with his selections, all he needs to do is save the code for the animation and he’s done. The work which would have taken hours to research, build, and test, squeezed into the work of minutes – that’s Animista for you!

Here are the best features of the tool at a glance:

• Generates CSS animation code at the click of a button
• Contains pre-designed motions like slides, transforms, swings, shade dump animations, and more
• Supports exporting generated code
• HTML5 FileSystem API based downloads supported in Chrome browser

Now, let’s start playing!

This is how it rolls

The tool’s homepage is a bit confusing to be honest, but you can view that as a sign of uniqueness too. When you visit the page, all you can see in the name of the tool and a ‘Try Me’ button next to it. That’s it! No scroll-bars, no menus, no footers, nothing. For a moment you start wondering if the page has loaded properly or are some elements still pending. Once you’ve figured out that you need to click on ‘Try Me’ to proceed, you’ll land up on the tool’s dashboard. And everything will instantly become clear.

Here’s the working of the tool explained step-wise:

• Instead of the black box in the center of the screen, select an object which gets affected by animations. For this click on the drop-down named “select object” in the Options section on the left (try the card (hor-flip) 3D object)
• Browse through animation options displayed within circles on the top and play with various options like easing, delay, duration etc. You should be able to see how they affect the animation on the spot
• You can change animation attributes through the Options section of the left. Everything will show results instantly
• When you see something you like just hit the ‘heart’ icon on the upper-right corner of the animation panel. Once you do this, several options will become available on the top-right corner of the screen.
• Rinse and repeat until you are happy with your picks. You can see your favorites at any time by hitting the “Funnel” button or click the “Trash” button to start from scratch.
• When you are ready, head to download screen by clicking the ‘Download’ button or download link in main navigation. If you use Chrome browser, hit the download button and check your download folder. If everything went well the ‘animista.css’ file should be there.
• Alternatively, you can generate the code for the animation by clicking on the “curly braces” icon on the upper-right corner of the animation panel. When you see the code, simply copy it and paste it into your favorite code editor.

What we like and what needs to be improved

Needless to say, a tool that offers such flexibility, variety of options, and ease-of-use and is also free is a clear cut winner. However, Animista does have a lot to improve on. This includes direct download support for browsers other than Chrome, more object options, and a brief explanation of what the different options on the left exactly do (it’s mostly try and find out for beginners right now).

• Build, Tweak, & Play with CSS Animations on animista.net/ @cssanimista via @supermonitoring

  Tweet this

Verdict

We like Animista, and so do a lot of designers across the globe. A few more enhancements and sometime later this tool could be one of the simplest-yet-most-useful tools out there.

Love playing around with images but don’t have a licensed copy of Adobe Photoshop or similar cool image editing tools? Wish to unleash your creativity by enhancing a few pictures from your latest travel trip but have very limited editing options in the tool you have? Monitoring the online space for a great tool that can help you easily bring out new shades in your pictures without having to pay too much?

Did you answer all those questions with a ‘Yes’? If so, your search should end at Photopea – the perfect free online image editor.

Photopea – Load, Edit, & Save Images easily

Photopea is a free online image editor that lets you load, edit, and save Adobe Photoshop (PSD) files, Gimp (XCF) files, and Sketch (Sketch App) files without using any plug-ins. And that’s what sets this tool apart from conventional photo editors.

Popular image editors like Picasa, Pixlr, Fotor, etc. can work with a wide variety of generic image formats like JPG, PNG, BMP, GIF, etc. However, most of them fail to load and edit image files created with other photo editing tools like Adobe Photoshop, Gimp, or Sketch. So what should a user do if he wishes to edit an existing PSD / XCF / Sketch file downloaded from the Internet or one that is created by him with a version of Photoshop / Gimp / Sketch that has expired? Answer – use Photopea.

Photopea uniquely gives you the freedom to work on image files as you would using popular commercial photo editors like Photoshop. Since the tool is free to use, it is an extremely useful alternative to Photoshop or Sketch. So while professional users and organizations might want to stick to commercial tools for the features they offer, home users who cannot afford them can use Photopea to the same end. The tool doesn’t need you to download or install anything; you can use it directly from within your web browser.

Some of the coolest features of the tool include:

• It can work with both raster and vector graphics
• Enables dragging-and-dropping images into the browser to import for editing
• Allows saving work as PSD or as JPG / PNG
• It can work with layer styles, masks, smart objects, text layers and more
• Adjustments include Brightness, Contrast, Levels, Curves, Vibrance, Hue, Saturation
• It can run on any device (desktop, laptop, tablet, phone or any other computer)

Photopea can be used for tasks as simple as image resizing to complex work such as webpage design, photograph processing, creating illustrations, etc. The tool doesn’t have much of a learning curve attached so you can start playing around with it in no time.

How to use Photopea

Land up on the tool’s homepage (www.photopea.com) and you should see the editor open up in the window. Plus point one – no signup needed, it lets you get straight to the point. Since it is free of cost you might see some advertisements in the right hand panel of the screen; if they’re distracting to you, close them using the small x on the top-right.

To start editing images, you can start a new project by clicking on ‘New Project’ in the center of the screen or by going to File -> New. You’ll be asked to give your project an appropriate name, a preferred width and height, and choose a background color. Click on ‘Create’ to open up a white canvas for your first Photopea project. Alternatively, you can load an image from your computer by clicking on ‘Open From Computer’ or going to File -> Open. The third option is to load a demo PSD or Sketch file and start editing it.

Once the file opens up, editing it is pretty much the same as Photoshop. The tool’s interface too resembles Photoshop so that users can have a sense of familiarity. All editing options have clear Alt texts so if you don’t understand the symbol for any tool, just hover your mouse on it and you should see its name.

The tool is largely user-friendly except for a few glitches here and there. For example, it doesn’t let you modify any text on the image directly. To do so, you either need to hide the text layer or delete it and add a new text object on top. Similar minor restrictions should be expected at every point while using the tool.

One of the most useful editing options is the Move tool that lets you drag and position any part of the image to any place you want. This is because like Photoshop, Photopea regards an image to be composed of several layers with each layer hosting one image component. That’s the reason it gives you the kind of image editing flexibility it does.

To understand the tool’s working in detail, visit the ‘Learn’ section through its button on the top-right menu.

Pros VS Cons

Photopea scores some major plus points:

• Doesn’t require any download, install or plug-in to work
• Loads quickly and is very responsive
• Drag-and-drop support
• Very familiar to Photoshop
• Eliminates environment constraints that Photoshop or other editing tools have

There are a few drawbacks too:

• Users with no prior knowledge of Photoshop might get lost easily
• If only basic image editing options are what you’re looking for, this might be a very complex tool for you

• Load, edit, save PSD/XCF/Sketch file within your browser with @photopeacom photopea.com/ via @supermonitoring

  Tweet this

Verdict

True to the claims of it being a worthy alternative to Photoshop, Photopea is a very useful tool that gives users access to quite a few Photoshop features at absolutely no cost. However, it does have its limitations. It can easily get confusing for beginners or home users with no extensive image editing experience. It is ideal for users who are familiar with Photoshop, Sketch, or Gimp and who know their way around image editing terminologies.

Many people wonder how to create a website. Some are ambitious and learn various programming languages to build their own website. Other can’t decide which interactive agency should they choose, or look for cheap freelancers, which does not guarantee good project.
Fortunately for all of the above (and not only them) creating a website can be really simple and does not require specialist knowledge. Webmasters, entrepreneurs, hobbyists, amateurs and curious, can use the help of Webwave, the Polish website editor.

Create websites without coding

WebWave appeared on the Polish market in 2013 and since then has been systematically developed and improved. This tool allows you to create your own site using drag and drop interface. It doesn’t require any expertise in web designing and web development or coding skills. You can easily place every object with the accuracy of 1 pixel exactly where you want, using only mouse.

Using the wizard is completely intuitive, simple and pleasant, and give the creator full freedom of design. You can start your website completely from scratch, or use one of over 30 pre-defined templates. Both the wizard itself and the templates are completely free, but we will write about money later.

What word would best describe this wizard? Professionalism! Websites created in the WebWave editor are no different than projects created by specialized marketing agencies because:

• they are fully responsive – they work well on every device, from a computer to a smartphone;
• they are search engine (Google, Yahoo, etc.) friendly;
• they have very well optimized code that allows pages to load quickly.

The wizard has a lot of flexible features, and we can easily integrate it with external tools. WebWave’s major advantages include:

• unlimited transfer and disk space;
• multilingual websites;
• possibility to upload your own HTML, CSS or JavaScript code (for more experienced webmasters);
• site statistics;
• own “404 error” and “301 redirect” pages;
• integration with Facebook, Disquss, Google Maps, Google Analytics, LiveChat, Freshmail, Shopify, Salesmanago and many others.

How to create a Web page in WebWave

To start working with the wizard, go to the WebWave website and sign up. All the work – creating, editing and administering the pages is done through the webmaster panel. After creating an account, click on the “New Page” button and either choose an empty website or choose one of the templates. After selecting the choice we are looking for, the entire wizard is shown.

WebWave creators do not leave their customers to grope in the dark. A 15 minute movie explains the most important elements of the wizard right from the start. This tutorial is really recommended to all users as only several minutes are enough to present most of the tools and capabilities. At webwave.me/Help we will also find a detailed guide to each option.

To get to know WebWave even faster, we recommend to select and edit one of the templates first. By clicking on any part of the page, we can easily modify it – change position, edit content, color, background, images, add animations, etc. A great feature is the ready-to-add elements such as gallery, slider, menu, contact form, buttons, Google map, or new subpage. In the top right corner of the screen you can switch between your pages, add a new language or go to the page preview. However, the most important option seems to be the RWD edition, where we can see how the whole site looks on computers, tablets and smartphones.

We save the changes using the Save icon at the top of the wizard. When we are ready to show our project to the whole world, we just click the Publish button. We can later modify our project at any time.

What are the costs?

We can publish our page for free in the subdomain of webwave.me under random ID. If you want a site to appear under a particular domain, you should buy a hosting that costs from $3.5 per month. In addition, for each such package WebWave offers registration of a .pl domain for free. The wizard itself, regardless of the number of pages created and the time spent, is completely free.

You can also earn money with a WebWave because this way the company encourages users to recommend the wizard to others. If we get people to pay for hosting, we will receive 30% of their deposit. The money we receive can either be spent on local services or simply paid out. Therefore, if you are a marketer, you may also find WebWave interesting! The company also makes it possible to create a special account for agencies, webmasters, freelancers or anyone else who will create pages for clients in the WebWave wizard.

It is worth to mention that WebWave is not just the editor. In addition to it, we have a simple content management system (CMS) and the already mentioned webmaster panel. If someone else adds content to our site, we can give that person access to the CMS panel so that he or she can edit existing posts, change images in the gallery or add a new article but can’t move or delete any items on the page. The webmaster panel allows you to easily switch between our pages without having to memorize another passwords and addresses.

• Try webwave.me/ – a simple and intuitive website creator – via @supermonitoring

  Tweet this

Summary

Considering all the elements and functions, WebWave is a really great and cheap tool. On its site there is an online chat where we can ask for help with the editor or other things related to it or the company. Answer during working hours? Immediate and detailed. There is also a Facebook group for WebWave users, where people exchange experiences and knowledge. So if you need to create a new website, redesign your existing site, or just want to experiment with something new, use the WebWave Wizard. Or recommend it to others and benefit yourself!

Many artists today are taking the e-commerce road to market their talent. And that’s actually a great idea. Amazon, eBay and other popular online selling platforms play a pivotal role in making art reach the right customers. But what do you think attracts users most when monitoring art online. It’s true a low price is a crowd-puller, but to truly appeal the senses, an art-work needs to look absolutely stunning. The same logic applies to clothes, accessories, home décor, and pretty much everything that’s available for sale online. Something that’s low priced will never sell if its depiction or image on an e-commerce website isn’t attractive. However, an item that looks ravishing tends to sell despite a slightly steep price.

Bottom line – to sell something online, its depiction / image / photograph should be perfect. We know where you’re going – Photoshop? Nah, here’s something simpler and more reasonable – ClippingMagic.

ClippingMagic – give photos a makeover!

ClippingMagic is an online tool that lets you accomplish all the editing tasks you need to publish great images. With a few clicks, it lets you remove image background, make them transparent, adjust colors, add / drop shadows, as well as crop the images to create an eye-popping result. Of course it doesn’t have all the features of Photoshop but if editing photos to highlight your work / product online is what you’re looking for, ClippingMagic is the perfect choice.

The tool’s intuitive algorithms make complex tasks like removing image background seem like child’s play. All you have to do is mark the foreground with a green line and the background with a red line and a click later, you’ll have a great transparent image that you can post on Amazon and eBay to sell. And all that for a fraction of the hassle and cost – neat!

Here are some exciting features of ClippingMagic at a glance:

• Allows you to pan and zoom images to deep levels for inspecting details and making changes accordingly
• Auto-save and Undo-Redo options to help revert changes and save automatically
• Configurable brush size to adapt to your zoom level dynamically
• Scalpel to cut off uneven faint edges
• Tools like refine edges, dedicated hair tool, color control, color cast removal, etc give you the kind of control you want to have while editing images and making them look perfect
• Enables you to select preferred file format, DPI, color space, and JPEG quality
• Facilitates advanced lossless or lossy web optimization to minimize image file sizes
• Support for images up to 8 megapixels

With ClippingMagic you can quickly create a catalog of neat results by conveniently clipping a number if images simultaneously. The above mentioned features are just the tip of the iceberg. To find out about the complete spectrum of the tool’s features, visit its homepage (https://clippingmagic.com/).

This is how it works

To say that ClippingMagic doesn’t have a learning curve attached with it wouldn’t be wrong. Depending upon how you wish to enhance your images, you can select which feature of the tool to use and view its dedicated tutorial on the website. Each tutorial includes a series of easy to understand steps and following them really isn’t difficult.

To test how simple the tool actually is, we scrolled down the homepage to reach the link for Basics Tutorial. On clicking the link, we landed on a page where a sample image was edited to remove background. There was also an option to “Try Your Own Image”. We clicked on the button to experiment with the tool first-hand.

Here are steps we followed to remove the background from our sample photo:

1. Dragged the image into the box outline on the web-page (there are also options to browse-upload, copy-paste, or fetch from URL)
2. Once the image loaded in the tool, a number of editing options appeared in the file menu
3. We only needed to remove the background, so as mentioned on the homepage, we highlighted the foreground with green color and the background with red

The results were updated in the adjacent panel in real-time. We could see the affect of each mouse click and movement which was quite interesting. A convenient ‘undo’ button helped revert any changes we didn’t like in the result.

There was a variety of other editing options available including color changes (saturation, temperature, brightness, etc.), adding shadows, cropping, fine-tuning the edges, etc. Once all changes were done and we were satisfied, we tried downloading the image. That’s when we were required to sign-up. To download even a single edited image you’ll need to subscribe to one of the affordable plans.

Pros VS Cons

We actually found the tool to be quite useful. You can upload and edit any number of images in any way you like. But to save edited images to your system, you’ll need to subscribe. Fair enough!

As far as cons are concerned, we found only a single one. While marking image foreground and background you’ll have to be really careful. The wrong kind of marking can cut off too much or too little of the image border or background or edge. The real-time preview window will help you out with this. Come to think of it, this isn’t a con, just a precaution you’ll have to follow while using the tool.

• Make any image background transparent with a few clicks with clippingmagic.com/ via @supermonitoring

  Tweet this

Final Verdict

We loved the tool – less hassle, less investment and a number of great photo editing features. Thumbs-up to the creators!

The world around us is changing. Internet has made it possible for people from all walks of life to access information about any and everything. Today, it is possible for a housewife to create a fully-functional dynamic website using just her laptop, and all she would need is a set of the right tools and a few manuals. That’s the kind of power automation has brought to our doorsteps.

Speaking of which, today there are a number of web toolkits or editors that allow non-technical people to do stuff that only professionals could do up until a few years ago. Take Twitter BootStrap for example. Everything one would need to create a good-looking working website is in there. Now imagine you’re a fashion designer with zero information on the way websites are made. You want to advertise yourself on the Internet but don’t know anyone who can build a nice website for you, or maybe you don’t have the money for it. What you would need is something exactly like BootStrap that’ll let you create your custom website with everything you have in mind, with no prior knowledge of the subject, and with practically no investment.

Sounds wonderful, doesn’t it? Well, we’re not going to elaborate on BootStrap any more but a similar tool that lets you customize the way images and icons look on your web-apps, websites, and mobile-apps, without the need to code or have any prior tech-knowledge. The tool we’re talking about is called Fontello, and we’re sure by the end of this review, you’ll fall in love with it.

Fontello – the wonder Icon Font generator!

Okay before you get confused about what Icon Fonts are, here’s a little intro. When we create documents on computers, laptops, or handheld devices, the way numbers and text are displayed is controlled by what is called the Font Family. Numerous fonts are included in a Font Family (for example, Arial, Verdana, Times New Roman) and there are ways to customize those using different styles like Bold, Italics, Underline, etc. Most people who’ve created Word documents would be familiar with fonts.

Now, Icon Fonts are also fonts, but instead of containing letters or numbers, they contain symbols and glyphs. Consider Emoticons used in popular social media platforms and messaging apps for example. Smiley faces, cartoon faces, animal pictures, direction signs, and basically anything apart from text and numbers that can be used to depict some information can be categorized as icon fonts. Icon Fonts are a smarter choice over regular images since they don’t take as much time to load, scale better, and can be customized using CSS in a lot more ways.

Now that we’ve cleared the pleasantries, let’s get to business. Fontello is an online tool that lets you create your own custom icon fonts by packing vector images into web-fonts. It provides you with everything that’s necessary to include graphics into your web pages without the need to actually code. Also, the tool has a huge built-in collection of open source icon fonts and art-works that you can scan, download, customize, and use for free. /they keep updating their databases so you can keep monitoring it for new fonts every now and then.

Essentially, the tool transforms you into an icon font wizard who can generate personalized icons to match your website and work style, look, and feel. And all of that with no need to code, and absolutely no cost.

God Bless the creators of Fontello!

How Fontello Works

Open Fontello.com and you’ll see a wide range of icon fonts displayed on the home page. Select any font by clicking on it and proceed with the customizations. Or, you could search for an icon font through a search box on the upper left corner.

For our test runs we searched for the keyword “smiley”. The results showed us all icons that had names containing the word “smiley”. Next we selected one of the smiley icons and that activated many options on the interface. We could resize the icon using a convenient slider on the top, change the name of the font through the Customize Names tab, customize the code for the font through the Customize Codes tab, and then we could download the web-font. Apart from these options, we could import our own icon font files into Fontello, customize them using their tools and save them. However, we came to discover this feature was suitable only for professional icon font developers. There was an API we could use in our website too. You can also get in touch with the creators of specific icon fonts to know more about their creations and how you can customize them further.

There are literally hundreds of icon fonts on Fontello that you can download and use in your projects. And that really is the beauty of the tool. Just go to it, take what you like, donate if you wish to, or contribute a font or two, access GIT code for the icons, create new icon fonts, and that’s it. No need to sign-up or pay anything or even mention your name / email.

It’s a beautiful, open source, free world!

Pros VS Cons

We’re going to change the way we list down pros and cons for Fontello because there isn’t a clear distinction between the two in this tool’s case. Actually, the points we’re going to mentione aren’t really pluses or minuses; they’re just features of the tool.

• Fontello as an online tool isn’t beautiful, but then it isn’t meant to be. Instead, it is convenient and lets you get straight to the point.
• Fontello lets you search for icon fonts, customize them, and quickly preview results.
• It gives you a lot of control over iconic fonts through CSS. But the icons are single-colored. There are ways you can make them multi-color but they’re a bit complex for everyday users. Plus, human-interface guidelines suggest using single colored fonts.
• There is a slight learning curve involved. But then, a very small percentage of people actually need iconic fonts and if you’re among them, you’ll focus on the end results.

• Create custom icon fonts for mobile apps and websites with fontello.com/ by @puzrin via @supermonitoring

  Tweet this

Verdict

Double thumbs-up for Fontello.

Modern products and services are all about excelling in the field of customer satisfaction. The organizations that have user experience, popularly known as UX, as their primary objective are the ones that have the highest chances of success as compared to others. That’s the reason modern day UX designers are some of the highest paid professionals in the technology field. But when the costs go high, the road gets steep for small organizations. What they need is killer UX design skills at a price they can afford. Enter – UXPin.

UXPin – Collaborative UX design tool

UXPin is an online tool that lets you and your team work collectively on wire-framing, prototyping, user testing and more without the need of writing code. It lets you create user flows, static / interactive designs, prototypes with advanced states, and interactive wire-frames within minutes and share them with your team in different formats (PDF, PNG, HTML, etc). Other team-mates can monitor the designs shared with them, leave their feedback in the form of comments and notify the people the comments are meant for. You can even get manager approvals for your UX designs directly through the tool. With its state-of-the-art features and easy working interface, UXPin is one tool that helps save teams hundreds of hours by simplifying product development and collaboration through elimination of coding.

Some of the most interesting features of UXPin include:

• Thousands of built-in elements for UX designing on mobile, web, and desktop
• Editor for building static / interactive designs and advanced prototypes with interactions
• Facility to import designs from Sketch and Photoshop
• Custom libraries to help you standardize your designs
• Auto-update that reflects changes you make to one element in all other elements of your design
• Lets you assign roles and permissions to team members
• Enables tracking project status in the dashboard
• Eliminates lengthy redlining of mockups with spec mode

UXPin can play a pivotal role in bringing distributed UX design teams together through its platform. With this one tool, people sitting across different continents can work together in real-time. It lets teams quickly test their UX designs across platforms and allows people to actually go into a design and cut and paste components where needed. It is a tool that lets you go beyond the traditional limits of designing.

Here’s how you can use UXPin

You can jump right into the action by starting with UXPin’s free trial. It is simple to register. All you have to do is enter your company email address where required and hit on the big blue button that says “Start using it now!” on the tool’s homepage. You could also let the experts at UXPin give you and your team a helpful demo. For now, let’s stick to the free trial.

Once you’ve entered your email id, the tool will ask you for a few more details before proceeding. It’s the usual process most tools follow to customize themselves to suit your needs better. Typically, the details you’d need to provide would include the size of your design team, information as to how you got to know about UXPin, and what role you play in your project. A short and sweet tour later, you will arrive at your dashboard.

In the dashboard you’ll see a dummy project, options to add new members or manage your team, options to upgrade, and most importantly, the option to create a new project. We suggest to start with new project creation as that will give you the most exposure to UXPin’s features. Click on “Create new project” and give it a name. Save and proceed.

The next screen will ask you to choose between using the UXPin editor to create designs from scratch or import them from Photoshop or Sketch. We chose to start from scratch and arrived at the handsome UXPin editor. The UXPin editor has a gray colored work area in the center of the screen with drag-and-droppable elements on the left. By default, the “Basic Elements” library is selected but you can change that through a convenient drop-down. You can create pages and layers in your design and name it whatever you wish to. The top margin of the work area is lined with more editing options, a play button that says “Preview”, and a button that lets you “Share” your prototype or wire-frame with your team.

When you’re done, click on the “More” button at the top right of the screen and then click on “Log out”.

Pluses VS Minuses

The pluses are many and can be easily gathered from the features section. The tool isn’t very costly either.

As far as the minuses are concerned, we think there are a few minor ones:

• The tool does have a slight learning curve associated with it. It might take some time for getting used to.
• A good catch suggested by one of the designers is the lack of an “Offline” mode in the tool. You’d always need to be connected to the Internet to work on UXPin.
• The tool could benefit from more design options like fonts and customizations.

• The tool #UX designers across the world are loving: @uxpin uxpin.com/ via @supermonitoring

  Tweet this

Verdict

Overall, UXPin is one tool no UX designer should miss. Despite the tiny drawbacks, it is awesomely useful owing to the advanced editor and integrated collaboration features.

When working in an organization, brainstorming and coming up with innovative ideas is considered quite a big deal. That’s how the wizards of technology develop cool stuff for users. But as a designer or developer, thinking of something great and explaining that idea to teammates are two different tasks. It is essential that the purpose you’re trying to achieve doesn’t get lost in describing the functionality to others. And that’s precisely why so often, practical examples, or more correctly, mockups are used to demonstrate ideas.

Interested yet? If you are, we’ve got a brilliant tool for you this time that will not only help you present your ideas in an awesome way, but will also act as an online collaboration and project monitoring tool where you can share your ideas with teammates through links, accept their feedback, and apply changes accordingly. Plus, you could do a lot more. Get ready to checkout Symu!

Symu – Present Practically & Professionally

Symu is an online tool that enables you to present your projects in a browser. Projects here mean website designing projects with actual working button clicks, links, animations and targets. The tool lets you prepare dynamic presentations for your websites with features such as fixed headers, clickable hotspots, etc. Moreover, you can create dedicated folders for each of your projects in the Symu portal where you can add teammates and give them permissions and accesses to upload work collectively. It even lets you upload video files and accept feedback on them as comments.

It lets you work through a 6 step process:

• Upload your project (as an image file or a design file)
• Create clickable mockups (buttons, links, targets)
• Save the changes
• Share the project with your team via email
• Get feedback on the project in the form of comments (each comment is made into a task automatically so that it can be tracked easily)
• Work on the feedback, share again

It’s as simple as that. Additionally, the tool also lets you manage your workflow by arranging your tasks in progress, ready for review, on hold, approved through a convenient drag-and-drop feature.

Enough with the talk, let’s get some hands-on experience.

Tool Usage

To get in the action, sign up for free with the “Sign up free” button on the homepage. The tool requests for your name and email address, or you can sign up with your Facebook or Google credentials. Thereafter, you’ll be asked to activate your account by confirming that you received an email from Symu.

When your account has been activated, you’ll be directed to your Symu dashboard. You’ll see the option to upload your project. You can upload files of JPG, PNG, or PSD formats. Once the picture has been uploaded, you can begin working with it. You’ll find a “More” option on the upper right corner of the uploaded picture. Click on it to see various options like Copy URL, Share Project, Assets, Versions, Duplicate, etc. By default the image you upload will be kept in the outer-most directory level, but you can move it to any folder that you create. Check the box on the upper left corner of the image and a file menu of sorts will appear on the top of the screen with the options to Share, set project Status, Move, Duplicate, or Delete.

To edit the image, hover over the image. A button that says “View Screen” will appear in the center of the image. Click on it to open your uploaded image in full screen mode with a ton of editing options in the left hand panel. The options include:

• Versions: A look at all the different versions of the uploaded image
• Comments: Options to allow comments on the image or not. To add comments on the image, click on it anywhere. That should open up a comment dialog.
• Build mode: Click and drag over the image to select an area. As you release the mouse, a pop-up will open with options to set the destination that will open when you click on the image next. This functionality lets you set target on clicks (beneficial for button clicks).
• Desktop mode: Option to view the image as it would appear on desktop, mobile or tablet
• Upload option
• Settings: Image editing options
• Share
• Status: Option to put the image on hold, for review, mark as approved, archive

When you’re done with editing and wish to return to your dashboard, click on the Symu logo on the upper left corner of the screen. Another set of options you’ll find on your dashboard screen will be in the main menu on the top. Here you’ll find:

• Projects
• Workflow
• Tasks
• Activity
• Shared
• Teams

Pretty self-explanatory we guess!

Additional features include free templates, UI kits, etc. that you can access through the “Freebies” button on the upper right corner. To access many more of the awesome features of this tool, start your free trial and upgrade to one of the pricing plans later.

• Present your projects dynamically within your browser with @SymuCo symu.co/ via @supermonitoring

  Tweet this

Concluding Lines

Symu is quite a promising tool that budding designers should definitely try out. It is gradually capturing the interest of field enthusiasts and hopefully will soon rise as one of the dynamic presentation tools having the most potential.

An integral part of any designer’s job is choosing the correct font for his blueprints, not just for texts, but also where shapes are concerned. The height, width, and weight of a font family can make or break a great design and that’s the reason even huge organizations like Adobe Systems develop dedicated tools to deal with fonts (read Typekit).

If fonts interest you professionally or personally, you’ll find this post especially intriguing. That’s because herein we’re monitoring online tool that’s more than just a tool, it’s a library, a library of fonts.

Identifont – The largest online font library

Identifont is the world largest independent library of digital fonts and font families over the Internet. You can easily find information about thousands of fonts within this tool along with the websites that offer them for sale or for free download. In addition to a simple index of all fonts, the library is equipped with almost a dozen inbuilt tools to help you search for particular fonts based on different criteria or perform various operations on fonts such as comparisons and blends.
Here are a few of the features of Identifont:

• Lets you search for Fonts by appearance, name, similarity, picture, or by designer / publisher
• Allows you to save the Fonts you like to your ‘Fontset’
• Enables users to compare Fonts by their height, width, optical look, differences, etc
• Regularly updates Font database to include latest developed fonts

Identifont not only lets you look up the latest Fonts over the Internet, it imparts you knowledge about them including the year of their development, the name of their developer and publisher and also the websites from where you can download them for free or for a price. In that sense, Identifont can be regarded as the ultimate Encyclopedia of Fonts.

How to use Identifont?

There’s nothing to learn here really. As mentioned above, Identifont is just an encyclopedia wherein you type a keyword and search related information.

Just visit Identifont’s homepage and search for any font based on any of the following criteria:

• Name: Type in all or parts of the name of any font you wish to look up
• Similarity: Type in the name of any font and find all fonts that are similar in appearance to it
• Picture: Type in the name of a picture or symbol and find all fonts that contain it
• Designer / Publisher: Type in the name of a publisher or designer and find all fonts developed by him

In addition to the above simple search, you can click on the ‘Tools’ button from the file menu to perform additional operations such as:

• Unusual Features: If the font you’re trying to identify has a character with an unusual or feature, select that character from a list on the left, then click the feature to show a list of fonts with that feature.
• Differences: Enter the names of two fonts to compare and see a list of their differences
• Tall Fonts: Lists extremely tall fonts for narrow spaces
• Wide Fonts: Lists extremely wide fonts for tight vertical spaces
• Companions: Identify different styles of typefaces designed to work well together in creative applications
• Optical Sizes: Find families of typefaces with versions optimized for use at different sizes
• Equal Width Fonts: Identify families of fonts in which the different weights or styles have identical character widths, allowing you to change weight or style without reformatting the text
• Font Blender: Enter the names of two fonts and see a list of fonts that blend in appearance between them

What Identifont basically helps you achieve is, select a font that best suits your design’s purpose and description by helping you compare and evaluate all the different available fonts.

Pros VS Cons

To be honest, there aren’t many pros in favor of Identifont, primarily because the tool has a very limited purpose for a very limited audience.

• It is focused on designers
• Helps them select the most appropriate font for their purpose by letting them compare and evaluate different fonts
• Provides detailed information on various latest and old fonts

The cons are obvious too:

• There isn’t much to the tool
• Very limited purpose for a very limited audience

• Looking for information on a font? Try @identifont! identifont.com/ via @supermonitoring

  Tweet this

Verdict

Overall, an okay tool for most users; however, field experts and designer might find it useful. There isn’t much to the tool as far as offering a significant larger advantage is concerned.

A blog post, a social media share, or an article gains a lot of weight if accompanied with an appropriate picture. But more often than not, the problem with including a picture in an online post lies in the picture’s size. Let’s look at this problem from another viewpoint. Many software applications need to work with photos – picture editing & enhancing tools, photo monitoring websites, databases, etc. Large sized photos could mean bulkier applications that take more time to complete operations. Another take to the issue – email attachment limitations; you can only attach pictures within a specific size limit.

Where there’s a problem, modern day technology presents a solution. And in this article we’re describing an awesome tool that solves the problem described above in a few clicks. Introducing, TinyPng, online image compression tool that reduces your image file size without decrementing its quality. Let’s check it out.

TinyPng

Have you ever faced image size issues while trying to upload self-taken photos online? If you want to upload a photo taken with a good quality camera like a digital SLR, high resolution Smartphone or any other point and shoot camera, the typical file size of images ranges in a couple of MBs. The higher a camera’s resolution, the bulkier the resulting images are with respect to disk size. And bulky images can not only be difficult to upload to social media, they are tough directly attach to emails, to share easily via collaboration tools, and can even cause performance problems in tools that work with them.

Ideally, the solution to these problems is an image compression tool that can reduce photo size. But most image compression tools end up reducing image quality (clarity, resolution, sharpness, etc) during the compression process.

TinyPng is a great online tool that lets you optimize your PNG images by reducing only their file size, not their quality. The tool uses smart ‘lossy’ compression techniques to reduce image size by selectively decreasing the number of colors in it. The resulting images require fewer bytes to store the data. The effect is nearly invisible but it makes quite a large difference in file size. And the coolest thing about the tool is that it’s 100% free. What more can you ask for!

Here are the best features of TinyPng at a glance:

• TinyPng plays around with color indexes in image files and strips off unnecessary metadata to dramatically reduce file size.
• PNG files compressed using TinyPng do not lose their transparency factor. They still support 100% transparency.
• The files produced by the tool are displayed perfectly on all browsers and mobile devices.
• The tool allows you to use its Developer APIs to connect your server to it and automatically compress all your images on the fly.
• Sister tool TinyJPG.com performs the same operation on JPEG images.
• Thumbs up on the convenience factor since you can upload images directly or specify image URL.
• You can choose to preserve image details such as copyright information, GPS location and creation date in the compressed JPEG images. For PNG images the copyright information can be preserved.
• Facilitates image resizing along with optimization. Upload the original photo once and then generate the sizes you need.
• You can even use the tool to create image thumbnails with various aspect ratios through ‘smart cropping’ technique.

Interested yet? We bet you are!

Here’s how you can use TinyPng

Visit the tool’s homepage and you’ll see a large picturebox-like rectangle in the top half of the screen that says “drop your .png or .jpg files here!” So navigate to the files you wish to compress, drag and drop them into the box and wait for the tool to upload them to its online compressor. Depending upon your Internet connection speed and original image size, the image will be uploaded, compressed, and prepared for download within a few seconds. A green colored progress bar will help you track the whole process.

Once the image is ready for download, you’ll see a textbox-like rectangle below the picturebox that lists image details such as original filename, original file size, procedure status, file size post compression, a download link for the converted image, and what percentage of file size you saved. With our test image, we were able to save about 82% of the file size. So an image that was about 1.5MB is size originally was compressed to a mere 265.8KB in about 3 seconds. Neat! You’ll also be given a link to either save the compressed image to Dropbox or Download it to your computer.

In addition to providing image compression, the tool also offers a Photoshop plugin with which you can save compressed JPEG and PNG images directly from Photoshop. Once you install the plugin, a new menu option will appear in Photoshop from where you can resize, preview, select a folder and save your images. The plugin is available for Windows as well as Mac machines and it is compatible with Adobe Photoshop CS5, Photoshop CS6, Photoshop CC, CC 2014 and CC 2015. This plugin however, is not free of cost; you’ll have to shell out about $50 to get it.

Benefits VS Drawbacks

To be fair, TinyPng does have some decent benefits to it:

• Free image compression for up to 500 images a month, maximum 20 images a day.
• The tool is super easy to work with
• Developer APIs for the tool are available for Ruby, PHP, Node.js, Python and Java.
• Tool plugins are available for WordPress, Photoshop, Magento 1, and Magento 2.
• In addition to resizing and optimizing, the tool performs additional operations on image automatically such as correcting gamma scaling, bicubic transparency edge correction and natural image sharpening.
• Smart cropping resizes images by cropping away image parts that are visually the least interesting.

On the other hand, although it isn’t very pricey, it does have some drawbacks which include:

• The free version of the tool is able to compress images that are a maximum of 5MB in size
• The tool can be used only for PNG and JPEG format images at present

• Optimize your images with a perfect balance in quality and file size – @tinypng tinypng.com/ via @supermonitoring

  Tweet this

Final Words

Great compression tool for PNG and JPG file. Just wish it could work with other file formats and larger photos.