LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

What Are the Essential UI Design Principles that You Should Stick To? Top 7
User interface, also known simply as UI is one of the most important considerations when designing any product. Graphic designers as well as industrial designers use and implement UI design principles but user interface design is becoming more and more important in the digital world.     By following user interface design principles, web developers can make their websites or apps easier and more pleasurable to use. Nowadays the internet is flooded with engaging websites and apps – competition is very high so if you want to make the best out of your user interface and create satisfying user experience.   For user interface design companies and web developers good UI design means starting with basic elements such as fonts and colours, and ultimately to every component present on the web page or in the app. Here is a list of UI design principles which will help you along the way to create attractive and most of all effective UI design for your projects.   Following UI Design Principles The idea behind UI design is simple: it should be centred around the future user. Every UI designer’s number one priority is to understand the intended user and his or her expectations. That being said, it’s a good idea to begin with an analysis of potential users and their expectation. You can begin with either informal or formal research plus a lot of brainstorming. Defining your goals for the user interface itself is paramount to your project’s success in the long run. Here is a list of questions you should take into consideration before beginning to work on the user interface design: What does the user want from it? Is your user comfortable with technology? How does the user engage with the user interface? Once the research part of the task is done, the UI designer can begin building it – afterwards real user testing is needed in order to measure results and make alterations.   UI Design Principles Prioritize Clarity Very clear and specific features are the backbone of creating good UI design. Humans and users tend to ignore things they don’t understand – this allowed us to prioritize on things we consider important instead of wasting time on things we don’t understand. When it comes to user interface design, the principles are the same – most users will simply ignore certain elements such as icons which they don’t immediately understand. Features without a clear purpose are also ignored. UI designers and user interface design companies need to focus on what the user wants or what the user needs from a website. One great example of UI design clarity is Google’s decision to collapse the Gmail menu under a general grid icon. Visually speaking, it looks clean and quite appealing but this small change created many problems for certain users – they couldn’t find the features they needed and some of them didn’t even notice the new icon. When clarity is lost, user experience takes a dive!   UI Design Principles Imply Intuitive Layouts Users need to be able to find the information they need without looking or thinking too hard. Every UI designer needs to create layouts that tells the user how to use the site’s features and how to navigate through it – by doing this you’re creating a better user experience and it also enables users to focus on getting what they need from the web page or app. UI design companies need to consider the real life end users when building websites or apps. Sidebars, menus and other navigation tools should be easy to use and clear. User interface design consistency is also important when building intuitive layouts – all elements and features need to be consistent in terms of use, colour, shape, font, etc. This way, users will be able to use them properly time and time again.   Instant Feedback is Important for UI design Instant-feedback messages can boost your user experience. These messages are essential to keeping your users informed about their actions or what the website is doing – error messages, loading messages or icons, instant updates are essential to providing your users with feedback. Good UI design includes instant feedback for any of the user’s actions.   UI Design Defaults Should be Productive A lot of users don’t even bother to change default features or settings on their interfaces. The iPhone default ringtone is a great example of this – the default setting is neutral. Auto-fill forms can save your users plenty of time by filling in information on their behalf.   Guided Actions Instead of simply leaving users to guess on how they should use a feature why not remove all the guesswork by showing them how to complete certain actions? Good UI design always leads users towards a satisfying and productive experience. Features can be emphasized through size, colour, text or even extra buttons.   UI Design & Basic Design Elements Many user interface designers think basic design elements can’t be innovative or fresh. This is false – good UI design implies using as many basic design elements as possible – these elements have a huge impact on your user experience. Here is a list of basic design elements which you need to keep in perspective: Text size – Text weight has a great impact on shaping your user interface. For example, static text may require your users to zoom in, which can lead to a frustrating user experience. Screen resolution – Good UI design works with varying resolutions. Poor resolution choices can have a negative impact on usability and readability. Distortion – User interface designers need to avoid any disruption or distortion of visuals as it can impede your user from engaging with the user interface properly. Contrast – Contrast makes all elements easy to engage and read. UI design should be accessible for users suffering for colour blindness for example. Keep in mind that low-contrast visuals can cause people with minor vision loss to struggle before finally leaving your website.   Conclusions on UI Design Principles We are all becoming more and more engaged in the online experience so UI design is becoming more important for our daily activities. By following these simple UI design principles, UI designers can make a positive impact on most aspects of our lives. ... Read more
Adrian Ababei / Apr 06'2016
How to Create Your Own Icon Font: 6 Free Tools that Allow You to Generate Custom Fonts
Although many icon font sets are readily available for UI design use, sometimes you might want to get a bit creative and design your own custom icon font. Here’s how you can do it for free. If you already have some icons designed and you want to turn them into an icon font set or you want to combine icons from different icon font sets just check out our list of 6 free icon font generators: 1. Fontello Fontello is a really easy to use platform which you can use to generate icon font sets. To create an icon font, all you need to do is drag your SVG files onto the „Custom Icons” area. The best thing about Fontello is that you can also incorporate other icons from free sets with the click of a button. 2. IcoMoon App The IcoMoon App offers thousands of already designed icons which you can edit, incorporate or build sets with. You’re also able to import your own icons into the app before generating a new set. 3. Icon Vault In order to generate an icon font with Icon Vault you need to download their template package. Afterwards you can just follow the template’s instructions and when you’re done you can upload your work back to Icon Vault – Simple, easy and fun! 4. Pictonic Fontbuilder Pictonic Fontbuilder allows you to generate your icon font set from over 2700 free and paid icons available. Around 300 of these icons are free for use but the rest are not very expensive. If you want to try Pictonic Fontbuilder you need to know that an account is required before using the platform. 5. Glypher Glypher is one of our favourite icon font builders. The UI features an “icon shelf” on the right side of the screen where you can search for free icons to use. This platform also features a drag and drop system which makes building your set a whole lot easier. You can also upload your own SVG icons by simply clicking an empty icon box. Each icon font on Glypher can have up to 88 icons – if you premium accounts allow more than 88 icons in one font. 6. Fontastic Generating an icon font with Fontastic is easy – simply select your desired icons from the available free icons sets or upload your own SVG icons. Once you’re done, click on the “Publish” tab and you’ll be able to either download your icon font or host it on Fontastic’s Icon Cloud. You’ll first need to sign up for an account with Fontastic before you can use their platform.     ... Read more
Adrian Ababei / Apr 05'2016
When it is okey to use TypeScript?
Last summer we had to convert a huge code base from Javascript to Typescript. During this transition I learned a lot about the differences and similarities of the two. I developed an idea about what makes a good use case for Typescript and when it doesn’t make sense to use it. Use cases for Typescript 1. Code size: When the source code is huge and more than one person works on the project, a type system can help avoid the obvious errors. This is specially true for SPAs. When someone can change code that potentially breaks another one’s code, it’s generally good to have some sort of safety mechanism. The TS transpiler reveals the obvious mistakes and is kinda smart (but can’t eliminate the need for debugging of course). If the source code is not huge, it probably doesn’t make sense to make it longer by adding type annotations. I have converted 180+ files from JS to TS and in most cases it added roughly 30% to the code size. 2. Previous baggage: if you or the majority of the team come from a strongly typed language like C# and does’t really want to go JS all the way, TS is a good alternative. Even though I recommend learning Javascript for good, there’s nothing preventing you from using Typescript without knowing Javascript. In fact Typescript is made by the same guy who made C# so the syntaxes are similar. In my company we had a team of C# developers who were coding a sophisticated desktop application in C#/WPF (which is front end in the desktop world) and then they were tasked to join my web project as full stack. So it was relatively a shorter path for them to learn Typescript for front end and leverage their C# knowledge for the backend. 3. As a replacement for Babel: The old Microsoft used to take something that is standard (for example Java) and add proprietary non-standard stuff to it (for example J++) and try to force developers pick one. Typescript is exactly the same thing to Javascript (after another try in 1996 divertingJScript from Javascript). Anyway, since ES6 is basically a subset of Typescript and the Typescript transpiler generates ES5 code, it’s practically possible to transpile ES6 code to ES5 (just as Babel) using the typescript transpiler. Though it’s not a strong use case IMHO. Typescript’s transpiler generates pretty readable ES5 code as output and that was one of the reasons Angular 2 team chose TS over Google’s own Dart language. 4. Promoted by lib/Framework: If you are using Angular 2 or another library that makes it particularly interesting to use Typescript, go for it. Just know that even though Typescript can use all Javascript libraries out of the box, if you want good syntax errors, you need to add the type definitions for those libraries externally. Fortunately the nice guys atDefinitelyTyped have made a community driven repo and tooling for that. But that is one extra step when you’re setting up your project (side note: for the JSX fans I should mention TSX). When you’re better off without Typescript? 1. Extra transpilation tax: There are no plans to support Typescript natively in the browsers (Chrome did some experiment but cancelled later). This means you will always have to transpile your TS code before running it on the browser. For the standard ES6 it’s a whole different story. When ES6 is supported by most browsers, the current ES6 to ES5 transpilation would be unnecessary. ES6 is the biggest change in the language and I suspect most people would settle there, but those who want to try the experimental features of the next version of the language will transpile anyway. You just modify the file and refresh the browser. That’s all — no “watching” or “transpiling on demand” or build system is necessary. If you choose TS, you probably end up doing some extra book keeping for the keeping the type definitions for Javascript library/frameworks up to date (using Definitely typed or writing your own type annotations). That’s something you wouldn’t do for pure JS projects. 2. Weird debugging edge cases: Sourcemaps make it easier to debug Typescript, but the status quo is not perfect and there are really annoying/confusing edge cases that the browser thinks you are running a certain line of code but you are not. Also there are some problems debugging the `this` keyword and properties attached to it (hint: `_this`works in most cases). That is because Sourcemaps currently don’t have a good support for variables (but that might change in the future). 3. Performance penalty: in our project we had 9000+ lines of ES5 Javascript that delivered pure horse power for a WebGL component but we kept it that way. Typescript transpiler (just like Babel), has features and generates code that no matter how good the transpiler is, can’t surpass the optimisations of a good programmer. So we decided to keep it in plain ES5 for ease of debug and deployment (no transpilation whatsoever). That being said, the performance penalty probably is negligible compared to benefits of a type system and more modern syntax for most projects, but there are cases that milliseconds and microseconds matter and in those cases transpilation of any kind is not recommended (even Babel, CoffeeScript, Dart, etc.). That being said, Typescript doesn’t add any extra code for runtime type checking. All the type checking happens at transpile time and the type annotations are removed in the generated Javascript code. 4. Agility: it’s quicker to set up something in Javascript. The lack of type system makes it super agile and easy to change stuff. Sure you can break things easily but if you know what you’re doing, Javascript is more flexible. Remember one of the main use cases for using a type system is to make it hard to break stuff. If Typescript is Windows, Javascript is Linux. In JS land you don’t get the “helper wheels” of a type system and you’re assumed to know what you’re doing but you can ride faster and maneuver easier. Particularly if you’re in the prototyping phase, don’t waste your time with Typescript because JS is simply more agile and flexible. That being said, if you use a typed language, it might be quicker to write/modify code in an IDE because the type system makes it easier to determine syntax. Source: https://medium.com... Read more
Adrian Ababei / Mar 28'2016
How Do You Create a Landing Page Web Design that... Converts? 5 Easy Tips to Try
When it comes to landing page web design, people tend to make mistakes – a lot of mistakes. Some web designers go for a minimalistic approach and strip the landing page to its bare minimum – just a call to action button without any other distractions. Others opt for a more traditional landing page design with navigation menus, plenty of text and images. Good landing page web design implies removing anything that can lead your potential users from the page’s goal.   Try a landing page design with no navigation menu Just 16% of landing pages are without a navigation menu – that’s quite alarming simply when you think about all the lost conversion opportunities. Numerous studies show that landing pages without any navigation menus fare much better than pages cluttered with links, videos and text. Although you may be tempted to keep certain links on your landing page try to keep in mind your landing page’s ultimate goal: having a high conversion rate.   Avoid stock images in your landing page design Generic images and stock images in general can have a negative effect on your conversion rate simply because they look insincere or for the use of a better word fake-ish. Stock images fail to inspire any trust from your potential customers and your conversion rate will take a dive for it as credibility is one of the main engines that can drive conversion rates up.   Another great landing page design trick is placing images on top of your catchy page headline. Research shows that headlines placed under images are read by 10% more users – this can lead to a snowball effect as when users actually read a headline, they are inclined to continue reading down the page.   If done properly, your call to action is worth its weight in gold One of the most important things on your page is the call to action – ironically, this is also the hardest thing to get right on a page. Think about your call to action’s colour – good colour contrast can help your users find and click your call to action. Another thing you should consider is size – yes, size does matter in landing page web design. Your call to action should be big enough to be easily readable by users but not gigantic. The button’s text should be persuasive, a mix of excitement and urgency all bottled up into one simple red or orange life-changing button.   Remove any other links or make them invisible We already removed the navigation menu but you might still have a footer menu or a company logo. The ultimate goal here is to create a single-action environment that boosts your conversion rate. If you can’t remove links directly, make them invisible to the user – lower contrast, make the link text smaller, tone down anything that’s competing with the call to action for your user’s attention. Fewer distractions equal more conversions.   Too many choices spoil the broth Consumers can get overwhelmed fairly quickly when faced with too many choices. Studies have shown that consumers tend to buy less when faced with a myriad of choices and that’s understandable. If you have 10 products on a page and you want to get the best one you should check all of them right? Who has time to compare 10 different products? Nobody – your visitors will leave your page thinking they will return some days later.   Landing page web design in a nutshell When it comes to landing page web design, think of the one goal of your page – converting users. Everything else is redundant and should be removed swiftly and without regret. ... Read more
Adrian Ababei / Mar 15'2016
How to Personalize Your Website so That It Serves Every Customer... Individually
Website personalization takes into account that users have different motivations, devices, locations and time constraints. With current technology, marketers can now gather specific information about what a website visitor is searching for and translate their visit into a higher conversion. Itai Sadan, co-founder and CEO of DudaMobile, a mobile website creation platform states: “Organizations spend tens or hundreds of thousands of dollars, and sometimes even millions of dollars, to create robust dynamic web experiences” DudaMobile recently released inSite, a service that adds dynamic web content to pages based on the customer’s behaviour in a bid to create personalized viewing experiences.   Here is a list of five ways companies can start to increase their conversion rate through website personalization: Visitor frequency can change your conversion rate Visitor frequency often determines different user experiences. A first time visitor will most likely look for different information than someone who has visited the site repeatedly. LegalAdvice’s marketing officer David Reischer suggests that tracking each user individually can offer visitors different user experiences: “We utilize a cookie to track a returning visitor so that we can direct them to the most appropriate and relevant page. This makes site navigation easier for repeat users.” First time visitors should have access to a contact form to capture leads, a phone number or business address or a video tutorial that explains a service or product. DudaMobile’s CEO explains the system for frequent visitors: “For frequent visitors, add a spot to sign up for a mailing list or add information about new products or services”   Geo-location is also important Geo-location blends offline and online marketing. Knowing where your user is located when visiting your website is a game changer for marketers – “Online we can follow our customer’s individual buying journey, optimizing it every step of the way” explains Bart Heilbron from BlueConic. He continues: “However, we were never able to use these insights in our offline interaction. With geo-location, we are now able to.”   If a potential customer is visiting your website from a very close distance there’s a high chance they will become a customer if they see an address and a coupon that says “Come in today and get 20% off”. Restaurants can use an open table button to make reservations quickly or a Google Map that provides directions to the businesses location.   Always adjust your content Adjusting your content to certain seasons, weeks or to your particular business hours can increase your conversion rate as well. You can replace your phone number with a contact form during the time your business is closed – this can help you avoid missing out on potential customers who want to reach you outside business hours. “The ability to offer different products over the course of a day based on targeted trends, habits or culture will increase conversions,” said CEO WebiMax, Ken Wisnefski. “For example, a restaurant offers a different menu throughout the day as they switch from lunch to dinner.”   Recognize special events and holidays Recognizing special events or holidays is a great way to connect with your customer and personalize your website. You can change your website’s theme during Valentine’s Day or during the 4th of July. “This could have a positive effect on customer engagement, and in turn conversion,” said Sadan from DudaMobile.   Adapt your content to your visitor source Knowing your visitor source and adapting accordingly can have a great impact on your conversion rate simply because you can create dedicated landing pages for your potential customers. According to Sadan, “Visitors that come to your site from an email marketing campaign or as a referral from another site should receive dedicated messaging that is aligned with the messaging they saw in the email or the referring site. Offering a coupon at this point could also be a good idea.” ... Read more
Adrian Ababei / Mar 07'2016