Welcome to the third day of freebies on Designrfix. Today we have assembled another amazing collection of some of the most impressive and well-designed UI Kits from around the web.
If you are in search of some really high quality free PSD files for your latest project, this post is not to be missed.
Feel free to download and use them in your next design. This article is a two part series on free UI Kits. Enjoy this post, and come back soon to check out the second and last installment.
Want more articles on free PSD files? Check out some of my previous posts:
Flat Design UI Components
Free flat UI kit
Minimal UI Kit
Combination UI Pack
Flat Style & iOS 7 Line Style UI Kit PSD
Modern Touch UI Kit
Free Download of Metro Vibes UI Kit
White Stripes UI Kit – Free PSD
PINK UI KIT
Flat Rounded Square UI Kit
Flat UI kit
iOS 7 Weather App Design(PSD)
Flat UI Kit
ReactiveDash – An Admin Dashboard Theme
Blog/Magazine Flat UI Kit
Freebie – Flat Design User Interface Elements
Free UI Kit PSD
RED UI – User Interface Design Kit PSD
Free iOS7 style UI/UX Kit for Designers
Complete Web UI Components – “Web W3rk”
Flat UI Kit
Blog / Magazine UI Kit #2
Freebie: The Ero Widget UI Kit
Free PSD: Time Graph UI
Beautiful Free Web User Interface Design Kit PSD
Clean UI Kit
Viro Media Players UI
Responsive UI Kit
iOS 7 App Screens PSD
Freebee App: Free PSD
Flatastic Mobile UI Kit
Flat UI Kit
The Good, The Bad And The Ugly Of Web UI Design
We’ve all been to them, those websites where you land on it and within seconds wish you hadn’t. They are the sites we never want to design, the sites that if we had anything to do with it we would sacrifice them to the gods for their own good.
I’m going to look at the good, the bad and the downright ugly of web design, the various aspects you should keep in mind, from the earliest storyboarding stages through to hi-fi screen development.
Web design, just like any other type of design is about fashion as much as anything else. Yes, it could be argued that there are different types of constraints compared to clothing fashion for example, but even clothing has constraints like social expectations. Before we start on the elements of good design, let’s have a wander through the annals of time, using the WayBack Machine to look at web design through the ages.
The mid 90’s: Apple Website 1996
What’s interesting about this version of Apple’s site is the need to choose your geographic area. This was commonly used in websites of this era to tailor the message. It shows a highly structured grid layout. Of course bandwidth restrictions meant that images had to be kept to a minimum.
2000: Apple’s Website from 2000
Big change in the layout of the website 4 years on. Tabbed structure of menu items and the layout has the content centre stage on the screen (Apple were an early adopter of this design trend of placing the content in the middle of the page)
2015: Apple bang up to Date
Apple has a fluid graphic heavy site, using high res images and video throughout the site. General menu buttons take you to a targeted page with clickable sub-menu items. Scrolling on some pages
What is Good Web Design About?
If you break it down into the really basic reason you create a website, then you have your first clue about what good web design is about. We create websites for the simple reason of communication with human beings (I’m not including in these web services, or specialist websites for cats, of course). This basic reason must be at the forefront of our minds when designing a website. Fashion and trends will play a part in that design, we all tend to herd, but great innovation comes out of breaking away from that herd, whilst retaining the core reason of web design – communication of a message.
With this in mind, we can look at some of the elements of design that are done well will make the difference between a site done badly and one done well.
Design Elements That Can Go Horribly Wrong
Too Much Info!
There’s a general rule in desktop publishing, which encourages the use of ‘white space’ to allow the eye to ‘breath’. By white space, we simply mean the absence of text and images. By having white space, you actually emphasize any content on the page. If you cram content into a page it has the opposite effect of communicating that content because it confuses the reader and makes them have screen fatigue. Modern web design encourages this – see Apple’s current web design as a great example of the use of white space – the text and images are given focus and emphasis by the lack of clutter around them.
The layout is central to handling your white space, whilst ensuring the content is accessible and easy to read. The layout is part science and part art. You need to be able to stand back from your design and look at it with an artist’s eye and ‘feel’ that it looks right, as much as know from following a formula. Experimenting with the layout at the early mood board design phase will not only allow you to bring stakeholders in agreement, saving time and resources later on but also give you an opportunity to make your mistakes early – it’s also a lot easier to move elements around on a piece of paper than once you’ve started coding, or even creating lo-fi mock-ups.
Choosing a good layout comes down to a number of things:
- What type of content does your site need to display (is it heavy on images, or text, or a mix of both – what are the proportional sizes of images and content)
- Remembering that it is highly likely your readership will come into the site from varying browser sizes and screen resolutions, the latest statistics from Stat Counter show that a laptop screen with resolution of 1366×768 is the most popular
- Preferred relative position on the screen – this is definitely down to taste and trends, but can have impact on responsiveness
- If you’ll use static or dynamic design
Laying out your website can be done using a grid layout or in a more organic way. The Grid layout method is the most prevalent and long standing. Whilst organic is more of an ‘outside the box’ creative approach. This doesn’t mean to say you shouldn’t experiment with innovation around design, after all, even an organic approach can show elements of organic layout within it. Take inspiration from the art world; the masters of layout, the poster artists of the 20s and 30s for example and check out the Russian artist Rodchenko from the same era, you can see how they used a basic grid based design with some organic aspects, for full effect.
Your site flow will be guided by your layout choices. I like the current trend that uses scrolling to build up a story about a product or service. Como.com is a good example. Sites like these make it easy for a reader to be guided through your most important sound bites about your product or service. You can build in call to action items within the structure of the page, making it interactive and helping to build a sticky experience. Scrolling pages allows you present videos and graphics in a way that makes them stand out but not dominate the space, something decent bandwidth in at least the developed world, has allowed us to capitalize on in web design.
Como.com’s scrolling web pages
Menus and use of them
This ties on with site navigation, which I’ve not covered here, but I want to concentrate on the type of menu, rather than the underlying navigational structure they represent. Menu type is one of those contentious areas that really get people frothing at the mouth. We all get irritated to the point of screaming by hover-based, drop down menu items that disappear as soon as you go to click on them. There was a particularly bad era (about 5 -10 years ago) in web design, where this seemed to be almost a design principle of many sites, it made them almost unusable. Hover menus are a particular dislike of mine, so I am being biased in writing this, you may love them. One aspect of hover menus that I really dislike is the aforementioned ‘hover tunnel’ where you are forced down a menu route and if you waver at all from that path, even by a tiny mouse movement, the whole thing disappears and you have to start again – as I write this, I am silently screaming in my head. I have left a number of websites purely because of this issue.
As an antidote to hover menus and if you can’t use the main menu heading alone, then offer links within a page as shown below, your user clicks the general menu item, then the sub menu item and these can’t just disappear like hover menus. The user will be placed in the right spot and you can focus messages around that part of your site to encourage interaction.
Example of a clickable menu that takes you to sub-menu items
Compared to Apple’s general menu item with page based sub-menus
Error messages are the sad, lonely, and oft-forgotten parts of UI design. They are often left till last; those unhappy paths that you will get to eventually after you’ve done the nice stuff. But error messages are a very important part of web design because a bad one will lose you a customer, but a good one will create forgiveness, making an unhappy path, not so bad after all. Error messages are finally coming out of the staid old techie back room and being updated and made more human. The Etsy (an online shopping marketplace) ‘Uh Oh!’ error message, the Elance (online freelancer site) extended coffee break message, all give a user information about what has happened, with a little bit of humanity and humor and relevance to that site’s audience.
Don’t make color an afterthought. Great sites often have one thing in common, they use color wisely. Colour choice is a whole area in it’s won right in terms of web design, which I don’t have the word count to talk though, however, suffice to say that you should try to spend some time thinking about this. You may already have a remit to work with your client’s company house colors however look at which colors work well together and use these to empathize areas of our site or to color-code sections. A great online tool for helping with color aspects of design is Paletton which allows you to check out various color combinations to see how they work together.
Cross browser support/Cross Device Support
Good UI design takes many things into account. Ultimately it should be a mix of a creative process with some understanding and acknowledgment of certain technical constraints. However, technical constraints should not dictate how you work, you should always work towards a site that offers content that is easy to navigate, flows well, read easily, and gets your message across, whilst at the same time looking gorgeous.
7 UI Trends That Would Shape Web and App
While the world of web design and app UI is transforming fast, it is often challenging for designers to keep pace with these trends. As we are heading for 2017, we can predict a few UI trends that are going to rule the web and mobile UI in 2017 and beyond.
1. Failure Mapping??
More than knowing the parameters of success it is important to know the elements that make a failure. This is the design and development world is referred to as failure mapping.
Mapping the journey of user flows makes the quintessential elements of UX design and it offers the essential understanding of the touchpoints and loopholes in the user interaction cycle. Well, while these UX elements are considered keeping the ideal users in mind, often we forget about the non-ideal users. When you start failure mapping, you come to know the glitches that many users stumble upon.
The erroneous usage of interfaces will only provide you a clue to many user habits that remained outside of your regular focus. But how can you know about these glitches and erroneous usage? Well, it is through failure mapping that you get to know them.
2. Immersive, Full-screen Video
A dynamic full-screen video suddenly took over many websites and web apps simply because they make a stronger brand message and grabs user attention quicker than other types of content. Let us understand the science behind this emerging design trend. First of all, vision is the strongest sensory perception and it influences the onlooker quicker than other perceptions.
Video and large full-screen images besides engaging users quickly also sets the tone and make the message clear instantly. Moreover, coupled up with beautiful typeface they create the sophisticated feel of the brand on the web and native mobile interface.
3. Rapid Prototyping Tool will Proliferate
Some design trends grow and become big silently. Rapid prototyping is one of them. Rapid prototyping tools almost made a breakthrough presence in the web-design world and have become a must-have for UI and UX designers.
What do rapid prototyping tools do? Well, they allow designers to quickly create reliable prototypes of the app to assess the aesthetic elements and usability aspects. They are allowed to assess the look and feel of their app without writing a single line of code. Already many such tools enjoy great popularity like UXpin, Webflow, InVision, Marvel, etc. As look and feel in the web apps are playing a key role in engaging users, a number of rapid prototyping tools will proliferate. They are extremely easy to use and offer a like-for-like prototype of the final product.
What so-called images just fail to do illustration does and in a more effective way. Unlike photographic images, they force a visual message just in the way the app wants to communicate. You have robust scopes of customization with illustration while photographs are limited to their portrayed reality. With illustration, you can incorporate your colors, theme, and infuse your brand character to the visual effects. Most important of all, while full-screen visuals have now become a donning trend, illustration helps your web presence to stand out from the rest.
The major impact of illustration in web design is easily recognizable when brands tell their stories through illustration. Coupled up with parallax scrolling and similar visual effects illustrations can more effectively create immersive stories corresponding to a brand message. Images are irreplaceable and videos make the design more dynamic but illustration gives UI the subtlety of storytelling.
5. Lively Colors and Gradients
In 2013 we had the biggest trend in web and app design. No one has to do any guesswork to understand that it is none other than flat design. After encompassing design trends and literally donning the design world for four successive years, it reached a maturity that slowly began to infuse other design elements into it. The use of bold and vivid colors within flat design allowed designers to create visually optimized interfaces. Now stepping further ahead designers are using gradients and shadows to offer a real-life feel around certain on-page elements.
This new fusion of flat design leaped up as a great opportunity to bring together the best of both worlds, namely, the simplicity and straightforwardness of flat UI and attention-grabbing design aspects of Skeuomorphism. The effect is lethal and has already created too many crisp web apps and websites designed with these elements. Actually, the flat interface does not hold much water in respect of creating a brand personality anymore and so designers, while keeping the simplicity and ease of this design principle, had to move on to incorporate other life-like elements. Lively and vivid colors easily infuse energy in design and gradients and shadows allow a dynamic feel while the overall flat interface maintains simplicity and ease of access. So, flat design is no longer just flat but a lot more.
Parallax is a scrolling effect that makes the background move at a slower rate than the foreground while scrolling the page. Why have so many brands embraced parallax so caringly in their websites? Well, we have the answer. They found it smart to incorporate storytelling in their UI. A great many websites have become successful in telling their brand stories through parallax effects. Parallax is not just a stylish fad in design but is thoroughly apt to offer fast-paced engaging user experience. If you can create a parallax design without creating too much visual overload on the users and if you can maintain faster-loading speed, it can effectively allow you to tell your stories.
In 2017 we can see micro interactions emerge as a crucial and must-have design element across the web and mobile apps. While these subtle interactive elements for providing feedback will continue to remain important, on-screen animations will be used more as interactive elements. Animation incorporates fun and easier user engagements through feedback corresponding to user actions. Animation can easily forge a stronger connection with users.
Using the Grid Method for Brilliant UI Design
Website grid designs are sleek and navigation-friendly. Every web designer should have an understanding of grid design to create balance on a page and digital spaces they can easily manage and replicate as needed. The finished product doesn’t have to mimic the consistency of New York blocks or a Lego city. In fact, as a design tool, grid layouts enhance a designer’s ability to create a user-friendly interface.
Gridding and the World of Design
Grid layouts aren’t exclusive digital design territory. In fact, print medium artists and designers have used the layout style for hundreds of years. Artists in the Renaissance used grid-related concepts to create a sense of depth and give perspective to works. Newspapers, magazines, and other print media use grids to create clean spaces and inform subject proportions. In a way, grid-related concepts serve as the science behind an artfully designed website layout.
The Basics of Grid Layouts
Whether you create a vertical- or landscape-oriented layout, the first step in creating a grid is to determine the number of columns you need. Gridding works for one column designs as well as several column designs. Rather than slapping content within the confines of a pre-determined grid, designers refer to some fundamental art principles:
- The rule of thirds. In graphic design, photography, and other art forms, the rule of thirds can create a sense of visual flow. The idea is that you should create a 3×3 grid across any subject matter and align visual focal points with the lines of the grid to create balance and an aesthetically pleasing outcome. In web design, this often means creating navigational cues and columns that align with the rule.
- Dynamic symmetry. Along with the rule of thirds, many use the concept of dynamic symmetry to create balance—a practice that flourished in ancient Green designs. The system is mathematically complex, but it uses the golden ratio and root rectangles to create a grid used for aligning a composition.
- Golden ratio. An object follows the golden ratio if it’s length is 1.6180 time the width. In art, students often study works by Da Vinci and Michelangelo containing the golden ratio. The human body is one of the most well-known examples of this concept. You probably recognize Da Vinci’s “Vitruvian Man” which exemplifies the connection between the human body and the golden ratio.
- The Fibonacci sequence. 0, 1, 1, 2, 3, 5, etc.… The Fibonacci sequence is similar to the golden ratio and also appears in the natural world in plant growth patterns, shell patterns, and in the human inner ear. Designers may use this pattern, which creates a spiral, to create a slightly different type of flow pattern.
In concepts like these, you can really see the mathematical and precise nature of famous works of art and web design. An untrained eye may not readily see the patterns without a grid overlay. In fact, the grid isn’t designed to box in subject matter, but to make it appear visually engaging.
With These Tips for Applying Grid-Related Concepts
Whether you’re a self-taught web designer or you’ve taken classes, learning about and incorporating some of these artistic grid-friendly concepts can help you keep your design feeling fresh. Here are some tips for incorporating grid layout ideas into designs for a better UI:
- Always use a grid. Even if you feel completely confident in your ability to create a well-balanced webpage, use a grid. Creating that measured outline will not only help you pay attention to the overall composition; it will help you recreate the design as needed later.
- Play with dynamic site attributes and grid concepts. Think about the placement of navigational menus and sidebars as a user clicks on them. Do they match the overall composition or feel like a lost layer? From interactive forms to a pop-up chat screen, each element affects the visual experience.
- Recognize the role of the grid in responsive design. Google’s Material Design guidelines highlight the use of a 12-column, flexible grid layout. In today’s age, a site design needs to appear seamless and balanced on a PC, smartphone, tablet, and other connected devices.
- Break the rules. If something doesn’t quite match up with the composition you try to follow but it works because of the other elements in the piece, go for it! Grid layouts are designed to provide a starting point that users are comfortable viewing and designers are comfortable creating. If you need to break away from an artistic concept, try it with one caveat: Make sure that the finished product translates well across viewing mediums.
- Study art. The reality is that many of these concepts take time to master. Supplement your research and trial and error work with an art or design class that focuses on composition. Seeing the practice in another art form may give you some refreshing insight into how to make the most out of a digital medium.
- Study psychology. Art isn’t the only place to go for grid design help. UI is largely about creating a positive experience with an interface, which means evoking a psychological reaction. The study of color, reading habits, and attention spans can have profound implications on the way designers choose to lay out their content. Learn about what people are looking for from a digital interaction to narrow down grid layout choices.
- Consider negative space. As you toy around with creating a flexible grid, remember that negative space plays an active role in the design. Don’t be afraid of using empty spaces to make the content on a page really pops. To follow many of these aesthetically pleasing design concepts, you may not always need text or a graphic image.
Some designers find grid systems difficult to use and creatively stifling. Grid layouts aren’t for everyone, but they are worth trying a few times. Improve your responsive UI skills, spatial reasoning skills, and your ability to deliver alluring design works with a layout concept that is as constricting or as liberating as you choose.
In addition to the trends mentioned above, in 2022 we can expect a few other design trends to have a stronger presence like the card and grid layout, horizontal scrolling, and more dynamic micro-interactions.