Don't you just feel the sweet taste of new possibilities right now?
And still, any new Drupal 8 project comes with its own set of challenges, as well, and choosing a theme, from the very start, is probably one of the greatest ones.
What should it be then?
Should you go for a classic base theme (AdaptiveTheme or Zen, maybe), for a contributed theme instead or maybe you prefer implementing the framework yourself or build your very own theme, from scratch, relying on Drupal core?
Before you make the decision that will have a huge impact on your whole project's structure, take some time to go through this quick “quizz” here and try to give yourself some clear answers:
are you dealing with a multi-site project (meaning that your theme, once chosen and implemented, will be used across all the other websites, too)?
is the person maintaining the theme a HTML guru or a CSS expert?
will this theme be used just on the website itself or for internal apps as well?
what level of front-end performance optimization does it imply?
Classy vs Stable: Which Base Theme Works Best for You?
This might just be the most important choice to take during your Drupal project's life-cycle!
It's your theme that dictates/overrides your CSS, JS and Drupal's markup, you know. Where do you add that your chosen theme can feature a parent-child relationship, where the sub-theme inherits the base theme's templates, JS and CSS.
In short: think through your theme choice for the sake of your project's success and your whole workflow!
“And still, which one to choose: Classy or Stable?”, you might ask yourself.
Here's how you can tell which one suits you (as a Drupal developer, with certain goals in mind and with a certain theming experience) and your particular web project (which comes with its own set of particularities):
are you planning to add classes only where the context demands them? Then Stable's The base theme for you!
do you want lean markup, with very little classes (e.g toolbar and contextual links), giving you the freedom to customize your own markup patterns in your theme, to create only those classes that are required by your project? Stable again, is the “lucky” word, in this case!
do you want to have a set of classes at your disposal, to tweak and use as styling hooks, right from the starting point? Then it "write" Classy all over your Drupal project!
This being said, let's see which are the 5 factors that you should consider before you choose your Drupal 8 base theme:
1. How Much CSS and Markup Updating Does it Require?
How much CSS out-of-the-box does your chosen theme come “equipped” with?
It makes a great difference, you know. Take these two examples for instance:
You decide to build your website on Classy theme, which in Drupal 8 comes with very little core CSS, so you will have to write your own classes and occasionally even to override the templates, depending on what you want your classes to style.
You're building your theme on Zurb Foundation or Boostrap, which come with their own of out-of-the-box classes that all you need to do is apply to your markup. What's important for you to keep in mind, if you incline for this particular work scenario, is that once you have your Drupal site built, there's going to be a lot of template customization to do for adding all those out-of-the-box classes to your site's new components!
2. Has Your Client Expressed Any Preference?
Your client may or may not come with his/ her own preferences when it comes to the theme that you and your team should to build his website on.
Be sure to have one aspect settled with your client, during your before-the-project meetings: are you supposed to maintain the theme that you two will decide upon on the starting point or is there a chance that this should be replaced with a new one, as the project unfolds? It's essential that you discuss this aspect with your client, for it's important for both of you to consider the learning curve (and implicitly the extra time) of each new theme.
In case your client has no specific preferences regarding the theme to be used for his site, your own theming experience and your development process preferences will be the only factors that will influence your theme choice!
3. Consider the Design
It's no news for any developer, no matter his/her level of experience, that Drupal is tremendously flexible! When it comes to theming, it allows you to build practically anything you want: ranging from a large web app, to great customer-facing websites in the latest design and functionality trends!
Depending on what exactly you need to design in Drupal, you get to choose among several platforms:
Ember or Adminimal make some great administrative themes, that will do their job superbly helping you build your back-end app
Zurb Foundation or Bootstrap make great choices if your web project includes components such as tables and forms
4. Will You Be Using a Pattern Library?
A base theme always makes the perfect choice if you're planning to create your own patterns.
In other words: keep it simple, at the theme level, especially if you'll be applying your own classes, which will then get themed by your own pattern library styles!
5. Consider Performance
Less is always better! You keep that in mind and let this common-sense motto guide you through your theme selection!
The more functions, JS libraries and settings your website needs to load, the heavier its “burden” will be (and the longer its load time will be, as well).
Go for a light theme based on Drupal core, which won't come equipped with its own heavy load of out-of-the-box JS libraries and CSS and remember that if less is always more, so does “testing makes it perfect”!
Remember to test all the theme settings on your website, thus keeping its front-end performance closely monitored!
These is our list of factors that any Drupal developer should take into account and think through before choosing the base theme for his/her project. Do you have any other aspects that you usually consider and which determine you to go for a specific base theme or another once you start your Drupal web projects?
Adrian Ababei / Dec 12'2016
If you are a developer or a web development agency and you’ve just built a web development prototype, you might often find yourself in a bit of a pickle – your users might find it ugly or your web development demo might look very bad. Here are a few "golden" design tips for web development, guidelines on how to make your web development demos look as good as they deserve.
Keep your cool, By Far One of The Most Valuable Design Tips for Web Development
One way of putting it is like this: “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”. Jared Spool’s quote is spot on for all design work but it’s especially true when it comes to web development and demos. If you are building a web development demo users shouldn’t really pay attention to the design aspects of it, but its functionality and purpose.
If you’re trying to make your demo more stylistic, you’re actually moving away from your ultimate goal – keep it simple and focus on its functionality. If it doesn’t look as good as you’d want it to be, try removing some web development design elements such as effects, borders or shadows.
Try to avoid complex color palettes
Poor color choices can make or break a design – your color picks should be made during the UI design process, even if it can be tempting to make bold color choices early in the project.
When making the UI wireframe, you’ll begin using monochrome rudimentary lines and shapes. Once you finished that part, you can start adding more details until you reach the color aspects of your project. Here are a few tips when picking your colors:
It’s a good idea to keep your demos monochrome with plenty of greys until you’re ready to color it up properly.
Another tip is to avoid fully saturated colors, especially when your demo will be viewed on an illuminated screen as this can lead to discomfort for your users.
In the same time, you should avoid black and white due to the same reasons as previously stated – sticking to shades of color will make your users less tired and improve UX.
Add color to your monochrome design but do it just one at a time – each color can be a distraction to your users. Pro tip: you can use a range of saturations of just one color – this will offer plenty of variety and you basically can’t go wrong.
Simple typography works best
If you’re building a web development prototype or a demo there’s no need to for fancy fonts but here are a few pointers on typography:
If you don’t know what to pick, sans-serif works best in all situations. Serif fonts usually have details where strokes terminate. These fonts can help you bring a little bit of personality to your design and at the same time make your text easier to read. While serif fonts have some advantages, they’re not usually used for UI design since at smaller sizes they display varied stroke weights.
Other fonts you should take a look at are humanist droid sans, used by Google in their Android interface, noto, and roboto. If you’re an Apple fan you can go for San Francisco or Neue Helvetica. Firefox OS uses Fira Sans. All these are sans-serif fonts which you can use for your project.
Sometimes characters can be difficult to distinguish – combinations such as 9g, 6b, 2Z, 5S, I11 or 8B can be very confusing for users, depending on the font chosen. It’s best to first test them out in order to see readability and if that’s fine keep using it, if not, do some changes.
White space works wonders
Functional space or white space helps web development designers in many different ways – this space reduces your visitor eye strain, can help draw attention to particular areas of your page and creates a general sense of balance. Cramped UI will make users tired and uncomfortable but keep in mind that “less is more” works perfectly at this stage.
More breathing space will offer your users a breather as well – boosting line heights, margins and plenty of padding works great. And this is one of those priceless design tips for web development to put on top of your "must-do" list.Spread everything out on your design and it will look much better.
Spacing needs to be consistent throughout your design – consistency is the key to harmony and rhythm.
Improve your web development workflow
Foundation and Bootstrap can be a great help to developers even though they receive criticism for making websites look too generic – these tools are perfect for prototypes. Foundation and Bootstrap actually make the right choices on your behalf, leaving you with ample time to focus on other aspects of your project.
Spare yourself the extra work and just grab templates from Foundation or Bootstrap which you can customize to fit your style. Most of these templates are very comprehensive, so you’ll definitely have all the pieces you need to get going.
Conclusions
By following these design tips for web development you’ll smooth any problems you may encounter when building a prototype or demo.
Adrian Ababei / May 31'2016
Working as a developer you might sometimes find yourself in a situation where you’re dissatisfied with your work but you simply can’t figure out why. Even if you research and read design theory books, it’s very though to create seamless design work at the snap of a finger. Luckily enough, there are ways to improve your work with very little effort. Here are 8 tips on creating great design.
Font weight
Thin fonts are all the rage in 2016 but they are risky to use simply because they can cause eye strain. Eye strain occurs when users have a hard time reading text or they must focus more in order to be able to read it. This can quickly exhaust anyone and force them to exit your website. Thin fonts are usually quite hard to read, especially on certain backgrounds, so it’s a good idea to make changes whenever necessary. The optimal font weight is around 400 as this will create the least amount of eye strain – try to be more receptive when you get feedback regarding the readability of your text and fonts, it will pay off in the long run.
Colour contrast
When entering a website, the first thing a user does is to quickly scan all the content and search for information regarding their problem. If they can’t find a solution to their problem, they’ll most likely bounce. When designing a page, any page…you need to keep the user’s needs in mind. Let’s say you are designing a services page – your visitors need to be able to find the “next” button or a contact button fairly quickly or else they will just leave. Contrast is an excellent way to help your visitors discover all nooks and crannies of your website. Using rich and vibrant colours for links and buttons is highly recommended.
Icons will give you some personality
Let’s start off by saying Font Awesome really is awesome. Make use of icons whenever and wherever appropriate – your visitors will thank you for it. We live in a world ruled by signs – red is danger, green is safe and blue is comforting. Use it to your advantage! Spare your visitors the effort of reading every little bit of text on your website by simply adding an icon next to it – it will help clarify your text and make it a bit more user friendly.
Clarity is the key to good content
When writing content for your website or pages, it can get pretty confusing. Your average user will spend less than 10 seconds on a website to try and find the information they need before they search for another one. It’s a good idea to always have simple ~5 word headers over any block of text. This will help your user know if the information is of any value to him or her – time’s expensive!
Clickable elements need to be obvious
If you want someone to click on a link or button, you’d better make it obvious that it’s clickable! Menu items, buttons and links are common clickable items on a website. That being said, make sure that your buttons have a high colour contrast compared to the rest of the page and that your menu items have an icon next to them. You can also play around in CSS to change their colour when the user hovers over them. Links should always be in blue – having some call to action text next to the link can also help.
Colour your website properly
Colours should bring order and clarity to your website. You should never use too many similar colours as this can cause eye strain for your user. Colours can also clash with each other, making the user’s brain work harder to figure out what is what. Colour balance needs to be attained through careful and patient testing!
Keep information consistent
Every piece of content on your website should have the same layout and approximately the same size. Your information’s colour, format and proximity to other links or related pieces of information should be consistent throughout the whole website. Different portions of content that are different but fill the same role should also be consistent. For example, if you offer a basic, medium and premium offer all information regarding these offers should have the same size and the same font. You can get creative, but keep it consistent!
Text alignment
If you want your user to feast on all the information provided on your website, you should make each and every piece of information as digestible as possible. Alignment can help you do that easily. Alignment should be where the user’s eye begins – either left or centre-aligned.
Conclusions
When coding, you can make mistakes and you’ll get error messages. But with design, mistakes or errors can be difficult to spot. Think about these tips when building up your project or go through them when you’re in a pickle and soon enough these principles will be imbedded in your workflow!
Adrian Ababei / May 23'2016
Bootstrap is a giant framework with almost everything you could need for building a site or web app interface. Bootstrap is changing, version four is in alpha release. Naturally, we’re just as curious to know what’s different, so I dived into the documentation to find out. Keep in mind, though, that this is an alpha release. It cannot be considered feature-complete. It could radically change.
From Less to Sass
This is obviously the biggest and most important change. Heck, you’ve probably already heard of it. People have gone so far as to procliam the “death of Less” due to this switchover. Well, I don’t know if anything’s gone and died because the Bootstrap team decided to do things differently. It is, however, a monumental undertaking, and it will drastically change how people use and customize the framework. Sass is just generally more developer-friendly, with wider support, a bigger community, and yes, more features. It can do some things that, right now, Less just can’t. I say this with sadness. I’ve never made any secret of my love for Less; but it seems that the community at large has spoken, and declared that Sass is just, well, better.
New features
Figures
Figures are for showcasing single media objects (usually images), with an optional caption. Support for Bootstrap’s various helper classes is factored in, so you can align and style the image (and its caption) however you like. Images placed in a figure element, given the right classes, become responsive automatically.
Flexbox
Now, due to lack of support, Flexbox has not replaced the regular grid system. However, it is available to anyone who wants it. Change a variable, recompile the Sass, and boom! You now have a new, modern layout system.
Cards
Okay, we’ve been seeing the proliferation of card-based design for some time now. Bootstrap now has a specific component for them, with myriad layout options. You can group them up, keep them separate, add headers, footers, buttons, images, and overlay text on those images. Wells, thumbnails, and panels all get replaced by the new card component, so in that way, Bootstrap is a bit more streamlined.
Reboot: new customization variables
Bootstrap has historically been a bit of a pain to customize, aesthetically speaking: There were a lot of styles to over-write, and individual variables to customize if you wanted to make your Bootstrap-based site look like anything other than a Bootstrap-based site. Heck, remember all of those customization apps made just for changing Boostrap’s look? Well the developers have heard your prayers and Github issues. Change all of the transition animations at once, disable rounded corners, change all the colors, or anything else you like with one big bunch of Sass variables. It’s all there in the Reboot module, and it’s about time. We can expect some more original-looking designs now, with any luck.
Rem and em units
That’s right, we’re moving away from pixels, to these relational units of measurement. This ties into the whole customization thing, too. Want a tighter design with thinner margins? Change the main text size, maybe a couple of variables, and boom. Everything looks “thinner”.
Stuff that’s basically the same
As you might expect, everything got re-written and upgraded (because of the Sass move). But still, the basic usage for most of these components will be the same. Do double-check the documentation, though. Certain things will have changed. Take the grid, for example: they added an “extra-large” tier to the grid system, presumably for those ridiculously huge retina screens that we’re seeing these days. · Alerts · Breadcrumb · Button dropdown · Button group · Buttons · Card · Carousel · Code · Collapse · Dropdowns · Forms · Images · Input group · Jumbotron · Label · List group · Modal · Navbar · Navs · Pagination · Popovers · Progress · Reboot · Scrollspy · Tables · The Grid · Tooltips · Typography
Other updates
No more IE8 support
It’s about time. There’s not a whole lot more to say about that. Not much will change for most of us. Anybody who really, really needs to support legacy browsers will have to use an older version of Bootstrap.
All JavaScript plugins have been re-written
The proliferation of ES6 means that a lot of people are re-writing their JavaScript. This means performance improvements for all, the exodus of older browsers, and programmers having fun with new toys. It’s a win-win.
Overall impressions
Where Foundation is going “smaller” and more streamlined with specialized frameworks, Bootstrap seems to want it all. They have done a lot of work to improve performance, and streamline what they could, but Bootstrap still aims to do just about everything you can think of. Mind you, anyone can configure their version of the framework however they like by dropping unnecessary modules, or adding new ones. It’s not a big deal. Still, there’s definitely a one-size-fits-all mindset in play. And that can be a good thing. There are large, wide-scope projects out there that need the room to expand. In any case, Bootstrap will continue to satisfy its users’ needs. It’s going to be mostly the same, but better.
Source: http://www.developerdrive.com
Adrian Ababei / May 11'2016
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
Adrian Ababei / Apr 07'2016
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.
Adrian Ababei / Apr 06'2016
When it comes to mobile development, it’s much easier to create a brand new responsive website than to upgrade an existing website from unresponsive to responsive. That being said, the task is definitely doable if you follow these mobile development tips:
This is a list of different mobile development methods which you can use to roll out a responsive redesign.
Responsive retrofit
If retrofit works on your current project or website, it’s a great option for quick mobile development. It’s definitely not a magic wand but you can definitely retrofit an existing desktop website to a mobile one in a relatively short period of time – some projects can last under two months while some can last just a few weeks.
Parallel beta
You should definitely use a beta and have your users test it out in order to make sure you get the right results. Mobile development companies use this method to get a lot of user feedback and implement different solutions to fix potential problems.
Mobile-only responsive
Similar to the parallel beta method, using an existing m-dot site to experiment and gain user feedback is a great idea. The existing m-dot website can be used as a sandbox for rolling out responsive design in stages. This method was used by BBC and the Guardian to upgrade their websites, so you know you’re in good company.
Conclusions
With the number of mobile users surpassing desktop users, it’s essential for any organisation or company to have a fully functional responsive website to handle this new trend.
Adrian Ababei / Mar 05'2016