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 Top Web Development Tools for Mac OS X that Shouldn’t Miss From Your Toolkit?
Every expert from every field has his or her own tools of the trade and web development is no different – web development tools are one of the most important factors to every project and these tools could mean the difference between finishing your project on time or passing multiple deadlines. Luckily enough, plenty of top web development tools are available for just about every platform. Here is our list of OS X apps which you should include in your web development tools box:   Browsers for web development One of the most important tools for web development is a browser – you’ll need to view your website after you created it right? But it’s not so simple – you will need to test your website for many browser versions, including beta and nightly builds. With that taken into consideration, you’ll most likely need Opera Next, Chromium, Chrome Canary, Firefox Aurora, and Firefox Nightly.   Koala Koala, apart from its cute name, is another nifty web development tool which is used to compile CoffeeScript, Compass, Sass, and LESS into a browser-compliant format. If you’re using any of these techs, Koala is definitely a must.   Anvil for web development Anvil is an interesting free app which allows web developers to create .dev domains. You’ll see it as a new icon in the OS X menu bar and you can turn it on or off, create domains or add your projects to it. If you’re looking for a tiny web development tool to manage or work on your local websites with, Anvil is perfect.   Keka When handling multiple files, you need a reliable compression service to help you along. Most web developers may use ortar, rar or zip but Mac has its own built-in feature to extract and manage these formats – this service is rather limited so you’re better off with Keka. Keka is a free open source OS X app for file compression and extraction. Keka supports zip, rar, ortar, ISO, DMG, Tar, Gzip, 7z and it can extract to PAX, CAB, EXE and RAR formats. Keka allows you to split compressed files into different parts of specified sizes, apply password restrictions or automatically delete source files after extraction or compression.   Web development & Web Sharing Since Apple removed the Web Sharing option from the OS X system preference, you might want to install the Web Sharing plugin. This little plugin will allow you to host local websites under the local host address. Once you install it you’ll be able to see a new panel in System Preferences – here you’ll be able to switch web sharing off or on.   File compression, One of The Very Top Web Development Tools for Mac OS X We talked about Keka before but there are two ways you can use it to compress files. You can either download this small web development tool and install the services contextual menu or you can drag and drop your files directly into the Keka app window.   Sequel Pro MySQL is one of the most popular databases in the world – plenty of websites rely on MySQL for storing and managing databases. If you are using OS X, Sequel Pro is a must-have for web development. It’s a native OS X app built in Cocoa and it also features a nice and friendly GUI. With Sequel Pro you can create, filter databases, import, export, remove, create users and execute MySQL queries.   The iPhone Emulator All web developers need to take mobile users into account when building their websites, hence the need for a web development tool that can be used to test websites for specific platforms. Devs can use physical tablets or phones or they can go for the easier option – a simulator like iPhone Simulator. All you need to do is just install Xcode from the AppStore and you’re done – you have another web development tool in your little toolbox.   Icons8 If you’re looking to use icons, Icons8 is one of the top web development tools that you can use. Just install Icons8 and you’ll be able to search through its over 2800 collections of icons. Once you find something you like, you’ll be able to copy it to Finder, Xcode or Photoshop.   Github and SourceTree Even if you’re building a small website or a presentation website, you’ll need a control version system to track your revisions and changes to the project’s code. Github is the most popular service for version control and you can install it on OS X as well. SourceTree is another mentionable service – both of these services are the backbone of any respectable web development agency.   Poedit Poedit is the best web development tool you can use for translating websites into multiple languages. Not only that but you can translate plugins and Wordpress Themes as well with this little app.   Automator Automator is a web development tool that’s pre-installed with OS X. This little app allows users to automate tasks such as cropping multiple images at once, creating thumbnail images, changing file extensions and renaming files in batch.   Dash Dash collects documentation for a lot of the popular programming languages, including LESS, Sass, jQUery, CSS3 and HTML5. Users can search through code snippets, functions, syntax, and other valuable information. ... Read more
Adrian Ababei / Apr 28'2016
How to Improve the Collaboration Between Designers and Developers: Simple Tips on Preparing Design for Coders
As we all know, programmers and designers don’t have a lot in common in terms of workflow or the software used to complete their tasks. Communication and synergy between programmers and designers can either make or break a project. How can you improve your work with a programmer? Implementing a clear workflow and respecting it is crucial – both parties need to provide feedback as work continues and a clear plan of action needs to be set in place for the current project. Start planning your project Simply shipping your design work over to the programmer may work on very small tasks or smaller projects but for larger, more complex projects it could turn into a disaster. The workflow needs to be accompanied by careful planning. Your average plan should include a schedule estimate and an approximate cost. If you’re building the project for a client, cost estimates are mandatory. Project planning needs to also account for how an optimal collaboration can be reached – the small details count in this phase. Prepare your design for coding Instead of simply handing over your design work along with a few requirements to the programmer and waiting for the results to appear, designers need to also focus on things which will enable the programmers to help them in the long run. Here are a few aspects and tips you need to take into consideration when producing your design: Your key objective is Pixel Perfect – If you want your programmer to implement your design work properly, you need to provide him with exact details – elements such as colours, style, fonts, margins and padding need to be specified exactly before the programmer can begin his portion of work. Keep in mind that by doing this you eliminate the need for future changes or revisions – as a result the overall cost of your project will be reduced. Follow Photoshop Etiquette – Designers should properly name layers and structure their files accordingly. Images need to be aligned and the programmer needs to be provided with plenty of information – it goes a long way in building your project and speeding up your workflow. Keep in touch with the coder – It’s a good idea to maintain contact with the coder on a regular basis and ensure he has all the information he needs to properly do his portion of the project. Developers really appreciate it when you provide your support. Designs for interactions are important – These designs can be a great help to your coder as well. Examples can include the intended use of sliders, button hover states, dropdown menus and others. Research on the technology used – You’ll get a better understanding of what’s feasible from a programming point by keeping up to speed with the latest tech trends. Sometimes designers may ask for features which are simply impossible to implement. Don’t rush, time is plenty Planning ahead, coordinating your work and providing clients with meaningful estimates will save you a lot of time in the long run. Transparency will help all people involved to get a better understanding of the overall project and speed up the workflow. ... Read more
Adrian Ababei / Apr 25'2016
Best Photoshop Plugin for Web Design
Get a Photoshop plugin that will help you perfect your work as a web designer! Here is the list of 10 amazing Photoshop addons: Codly Codly can automatically code your Photoshop mobile-design work, saving you lots of time and effort in development. With Codly you’ll have plenty of room for experimentation and new ideas. Codly’s interface is very intuitive, featuring a simple drag and drop system. This platform can generate code for BlackBerry, Windows 10, Android XML and of course iOS. Random User Generator Random User Generator is a free open source API which generates placeholder user data for forms and other similar structures. Random User Generator’s tagline is „Like Lorem Ipsum, but for people”. Data can include passwords, phone numbers, addresses, birthdays, emails and names. Suitcase Fusion 6 Suitcase Fusion 6 is the perfect Photoshop plugin for Google font lovers. This little add-on will keep your fonts perfectly organized in Photoshop. You can compare fonts and preview them before implementing, which can save you a lot of time. Retinize It Retinize It allows designers to slice and export from certain groups or layers directly as assets. Not only that but this plugin offers designers the option to magnify smart objects or shapes by 200-300%, making it easier to prepare the image for iOS displays and retina. PSD Cleaner PSD Cleaner will organize your PSD files in an instant. Browsing for empty layers or missing names is no longer a drag with this neat little add-on. PSD Cleaner will set you back $19.99 but you can work without any distractions. LayerCraft LayerCraft can help you export individual assets to Photoshop layers. You can export directly to Android or iOS, with options such as trimming, duplicating, removing empty pixels and scaling up to 200% or down to 50%. Photoshop Plugin for Prototyping Usually, after you create a mockup in Adobe Photoshop you need to build it again from scratch for prototyping purposes. The UXPin app solves this issue by allowing complete integration. Just export your PSDs straight into the platform and then simply add interactions to your mockup for feedback purposes. This platform also preserves all your layers for prototyping. Oven Oven is a neat little Photoshop plugin that helps with other plugins – When you want to generate image assets from layers through the use of other plugins for web designers, you’ll need to name them appropriately before export images. Oven speeds up the process by baking your multiple layers properly. You can export in either .png or .jpg for Android or iOS. Oven also features a duplicate option which keeps your original label names intact. Perspective Mockups We all know that Photoshop CS6 offers some stunning presentation documents and deliverables. Perspective Mockups can make your PS files even better – this plugin allows you to stack, tilt, rotate or layer the perspective of the file according to your needs and preferences. GuideGuide This plugin allows designers to create highly customizable guides extremely fast. GuideGuide is a very popular Adobe Photoshop plugin – you can create guides with multiple options based on the selected layers, artboards and canvases. You can create instant guides for already designed selections – secondary options such as duplicating or sharing are also available. ... Read more
Adrian Ababei / Apr 22'2016
App Development – Which language to pick? Ruby’s your best bet!
Picking a programming language for app development can be a real challenge nowadays since there’s an endless choice of software to choose from. Different programming languages have different advantages and disadvantages, especially when it comes to app development, which requires certain specific features. App development specialists can pick from one of the 3-4 more popular programing languages but all these have different approaches to solving problems. As a general rule, you should go with a language that provides good tools for scalability, optimisation and maintainability.   Ruby for App development Ruby is a favourite programming language for app development and web development – It can be used in many different areas such as writing scripts, apps, games, research, prototyping and administration. HP, NASA, Cisco and many other companies use Ruby for their tech needs. Apart from that, Ruby also works on Apache, nginx and there are even web servers written in Ruby. Ruby was first created in 1995 by combining different languages such as Smalltalk, Lisp and Perl into one well balanced highly reliable programming language. One interesting aspect is that the program code is stored in plain text, which can be an asset.   Ruby’s a clean app development programming language Ruby’s praised for its cleanliness and the following of certain principles which make app development easier: There’s no need to repeat code – by simply writing it and putting it in the right place, Ruby spares developers from unnecessary work. Conventions over configuration – with Ruby, there are plenty of methods already written and available for use but in certain cases they can be rewritten to fit a different purpose. This makes writing code much easier and clearer.   Objects With Ruby, everything is focused on the object. This is called object-oriented programming meaning that each piece of code can have its own actions and properties. Here is an example of code in which an action is applied to a number: 10.256.round # we will get a round number 10 In most languages primitive data types such as numbers are not objects – Ruby allows developers to define object variables and methods for all data types which in turn simplifies Ruby’s use since the rules applied to objects can be applied to the entire Ruby.   Ruby is flexible Ruby’s owes much of its popularity due to its flexibility – it allows users to modify, override or delete basic parts as needed. Ruby’s main focus is freedom for the programmer – this is one of the reasons why it’s such a great app development language. Ruby supports only single inheritance and offers the concept of modules where modules are collections of methods. Classes can mix in a module and receive all its methods. Eg: Any class may mix in enumerable module which in turn adds a number of methods that are used to create cycles: class Collection include Enumerable end   Portability Although it was developed on Linux/GNU, Ruby offers high portability – you can work on Windows XP/7, Mac OS X, UNIX and others. Another benefit is that you can work with the jQuery JavaScript framework, MVC, TDD, design demplates and ORM (ActiveRecord).   Community support Community support is one of the most important strengths of Ruby. You can publish your own modules in the open access section of Ruby’s website or ask for help with your project. Thanks to Ruby’s community, thousands of solutions and code bits are available for users just one click away. This is a treasure trove for programmers building app development projects. Other useful things include authentication and authorization systems, test data, share buttons for social networks, e-mail sending systems and many others are waiting to be implemented. If you need to modify it, you can do it with ease and share it with the community.   Conclusions All programming languages have strengths and weaknesses but Ruby is our top favourite due to its ease of use and versatility, especially when app development projects are involved. ... Read more
Adrian Ababei / Apr 18'2016
Choosing the Right Web Hosting Service: 5 Most Important Factors to Consider
Nowadays there are plenty of web hosting companies to choose from, all with different perks and different services available and more importantly, for different budgets. But which one best fits your need? How can you really know? You need to pick a hosting company that fully supports your business needs and doesn’t hinder your way to success. There are many different factors involved such as bandwidth, your overall site speed, customer support and of course price. Here is a breakdown of the major types of hosting and some basic criteria to help you pick the perfect plan for your enterprise. Most hosting plans fall into the following categories:   Individual plans These are the most affordable hosting plans available these days. Most of these plans provide hosting support for only one single domain and limits on data storage, bandwidth and features apply. Individual plans are usually the best choice for webmasters who don’t expect a lot of traffic in their first year of business. Dedicated servers Individual plans are often called „shared hosting plans” because they share space on their hosting servers with different clients. Sometimes your business might outgrow the features and services offered by a limited individual plan – then you’ll need to upgrade to a web hosting plan that offers your very own server. Dedicated server plans obviously cost a little bit more – Hostgator’s dedicated server plans will set you back $139 a month. If you expect you’ll need a dedicated server it’s best to pick a web hosting provider which offers both of these plans and allows transitions between them. Reseller accounts Reseller account plans are somewhere between individual plans and dedicated servers – these plans allow clients to set up multiple individual account plans within a single account. Most reseller account plans will set you back between $10 and $20 a month – these are best suited for companies with multiple smaller sites.   If you already decided on a hosting plan type, you need to consider certain aspects before signing up with a certain hosting provider:   If you already decided on a hosting plan type, you need to consider certain aspects before signing up with a certain hosting provider: Your budget While looking for more reasonable monthly rates you might come across free hosting services – you should avoid using these services as there considerable drawbacks such as unreliability and on site ads. Customer reviews Customer reviews are a great way to evaluate web hosting providers. These days it’s very easy to build a professional looking website full of bold promises so it’s a good idea to search for multiple customer reviews before signing up for a plan. Customer support Your host provider’s customer support team is crucial to building an online enterprise. Things often go wrong and you need to know they’re there for you 24/7. Not having a reliable customer support service can mean loss of income for you and your business so it’s a good idea to look for hosting companies that offer 24/7 email support, chat support and phone support before actually committing to a hosting plan. Bandwidth and storage Most decent hosting plans offer unlimited bandwidth and disk space, so it shouldn’t really be a concern. Although this is standard, you should be wary of any potential limitations your desired account might have. Script support One final thing you need to keep in mind is your hosting company’s support for web scripts. Let’s say you want to build a Word Press website – some web hosts offer built-in script packages that make the installation process a whole lot easier. Also check the number of MySQL databases your host supports – you’ll need more than one if you want to run Word Press and other programs on the same host.   ... Read more
Adrian Ababei / Apr 13'2016
What Are the Best Free FTP Clients? Our Top 5
A FTP Client is the software program you use to transfer files to and from your server or web host. Other more secure alternatives can include FTPS and SFTP. What to look for in a FTP Client: Having a GUI: This is a big plus when it comes to FTP clients. Some FTP clients offer a regular command-line interface but a graphical user interface is the norm nowadays – it’s also much easier to use and faster. Supporting secure file transfer protocols: Plain FTP isn’t really secure – it doesn’t encrypt the data you’re transferring. As such, your data can become compromised en route to the server or web host. If that happens, just about anyone can read your username and password. SFTP or SHH File Transfer Protocol is a more secure alternative to plain old FTP. 1. FileZilla FileZilla is a free open source FTP client. FileZilla is fast and able to handle multi-threaded transfers or simultaneous transmissions. If security is your thing, FileZilla also supports FTPS and SFTP. This free FTP client is also available on all operating systems – Linux, Mac OS and Windows. 2. Cyberduck Cyberduck can handle tons of simultaneous file transferring: Amazon S3, WebDav, SFTP and more. This FTP client features a minimalist UI, making it very easy to use. It’s available on Mac OS and Windows. 3. FireFTP FireFTP is a Mozilla Firefox add-on with a strong SFTP/FTP client right in your browser. FireFTP is available on all platforms which run FireFox, including Linux, Mac OS and Windows. 4. Classic FTP Classic FTP is free for non-commercial use. It features a very simple and intuitive interface, making it easy to use even for beginners. This file transfer client also features a “Compare Directories” feature which is quite useful – this feature helps you see any differences between your remote files and your local files. Classic FTP is available on Mac OS and Windows. 5. WinSCP WinSCP is a very popular FTP client simply due to its long list of features. WinSCP can handle multiple file transfer protocols such as WebDav, FTP, SCP and SFTP. You can also make quick text edits with WinSCP’s built in text editor. Scripting support is available for power users on this Windows-only FTP client. 6. Transmit Transmit is a very popular FTP client used by most developers on Mac OS. Although all of the FTP clients included in this list are free, Transit will set you back around $35 – it might not be the best choice for everyone but it does offer quite a few innovative features along with its user friendliness.         ... Read more
Adrian Ababei / Apr 12'2016
Color Guide
I’m not a fan of color theory. But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use color in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using color, the better I become in the theory behind it. Of course, that doesn’t really help when you’re just starting out, does it? That’s why, in this article, you won’t see a single color wheel. Instead I’m going to show you a simple color workflow that you can use in your next web project. You will, of course, subconsciously be learning the theory along the way. So, I recommend coming back in a few months time and giving the theory another go. Choosing A Base Color We can see something like 10 million colors at any given time, that’s a huge amount of colors. And out of those, we need to choose one — just one color — to be the base of our website, for our brand. Everything will stem from this one color, so it’s kind of important. How to choose a starting color Now, picking a color out of the blue (pun intentional) would be quite easy, but we’re not going to do that. For any project in which you’re having contact with clients, you should try to justify as many of your choices as you can. If you don’t, it’ll be a case of your favorite color versus their favorite color. They’re the client. They’re paying you. They will win. Don’t think too much about it. Just make sure you have some kind of reasoning behind your color choice (and every choice, for that matter). It’ll make you look good. Tips on choosing a starting color • Use what you have. If the client has a logo with an established color, that will usually be your starting color. • Eliminate your competitors’ colors. If one of your main competitors has a strong brand color, don’t copy it if you can help it. Find your competitors’ colors to eliminate them from your own color schemes. • Think about your target audience. The colors of a website for a pizza shop would sure be very different from the colors for a kids club. Think about who will be using the website and how you want them to feel (excited, serious, taken care of, etc.). • But don’t default to stereotypes. If you’re designing a website for young girls, you don’t have to use pink. Avoid clichés to gain credibility. • Play a word game. If you’re struggling, write down any words that you associate with the client’s business. This list should give you some ideas for colors. If you’re really struggling, hop on any website about color meanings and see which fits best. You should now have a base color in mind for the design. It should be something simple like red, green, blue, yellow or pink. We’ll get to the exact shade next. Let’s say you choose blue. Choosing A (Nice) Base Color Instead of messing about with Photoshop’s color-picker to find a nice shade of blue, we’re going to steal like an artist and use other people’s design choices to help us out. First, go to Dribbble.com and Designspiration.com and click on the “Colors” link in both. You can use this as the next step to find the right shade of blue. For a fresh and energetic brand, go for one of the lighter, brighter blues (one of the top five options). For something a bit more corporate and serious, the bottom five should be a better fit. Choose a shade from each website to see actual designs that use that color. You can then use any of CSS-Tricks’ color-picking techniques to grab the exact colors right in the browser. Not only will you see different versions of your base color, but you will easily see colors that match. Creating A Strong Color Palette All right, you should now have a HEX value for your color. Now we’re going to make a palette out of that color. And it’s easier than you think. The problem with this kind of color palette is that applying it to a real design isn’t very practical. Most palettes have way more colors than you’d ever need, especially considering that we need to add an average of three neutral colors to every scheme: • white, • dark gray, • light gray (optional). If you tried to add five or six colors to the neutrals, it would be a mess. All you really need are two colors: • a base color, • an accent color (we’ll get to this in a jiffy). If you can create a website using only these five colors, you’ll get a much better result than if you were to go overboard with complementaries, split-complementaries, triads and the rest. Finding your accent Your accent color will be used in very small amounts on your website, usually as a call to action. So, it needs to stand out. Your next step is to go to Paletton.com and type your HEX code into the color box. From here, you can find your accent in two ways. First, you could click the “Add Complementary”! That yellow there? That’s your accent. Alternatively, if you don’t like the color it has generated, you can click around the icons at the top to find something more suitable. Personally, I quite like the red that comes up under the triad icon, so I’m going to use that for our scheme. There is, of course, science and stuff behind what Paletton is doing; but, for now, let’s put a pin on it. You’ll learn the theory a bit later, and all will become clear. So, below is our color scheme as it is now. We’ve got a nice base color and a shot of an accent. Let’s add white to the mix, because white is always good. All that’s missing now are some grays. Adding the gray For most of my web projects, I find having two shades of gray to be infinitely useful — one dark, one light. You’ll use them a lot. The dark is usually used for text, and the light for when you need subtle differentiation against all that white (usually for backgrounds). You can choose your grays in one of two ways: • You could use Dribbble.com and Designspiration.com again to find a nice gray from your previous results that matches your base color. But usually it’s easier to type blue website in the search bar, which will show more grays in the results. • If you have Photoshop or the like, you could use Erica Schoonmaker’s technique to harmonize your grays with the base color. Creating harmonious grays To get our shiny new harmonious grays using Erica’s method, we’ll start by picking two default grays out of a hat. Then, follow these steps: 1. Create two shapes and fill them with #4b4b4b and #f5f5f5. 2. Insert a color fill layer above your two shapes. 3. Change that fill to your base color. 4. Set the blending mode to overlay, and bring the opacity right down to between 5 and 40% (in the example below, it’s set at 40%). 5. Use the color picker and copy your new values. I should point out that this method works exceptionally well when your overlay color is blue. For any other color, you will want to either bring the opacity right down to 5 to 10% or stick with your original grays. Our color scheme is complete. Applying Your Color Scheme Now that we’ve got our color scheme, it’s time to apply it. This is a whole other article unto itself. Tip: If you struggle with color, a good trick is to create your website layout in grayscale first. Figure out the hierarchy, and then experiment with the color later. Our accent, red, stands out beautifully against the base color. This is used in very small areas, for buttons and in the icons. The less you use this color, the more it will stand out. The dark gray is used for the text, logo and icon outlines. (Don’t skip putting the colors in your icons. It’s a small detail but makes a big difference.) The white and light gray form the background. The light gray doesn’t have to be here at all, but I find it is another small detail that really makes a website look polished. Conclusion As you can see, we really don’t need much more than the palette we’ve created today. But that doesn’t mean you are limited to these colors! As you’re designing, you might decide it’s appropriate to introduce some more colors to your palette. That’s totally fine! As long as you’re attentive, you can use the steps above to find more colors that work with your scheme. The beauty of this is that the more you do it, the better you’ll become at choosing colors. You’ll get to know what works together and what doesn’t. Sometimes, the method above will yield results that are less than desirable, so feel free to tweak things. Play around and have fun learning color theory, without the theory! Source: https://www.smashingmagazine.com ... Read more
Adrian Ababei / Apr 07'2016
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