Freebie PSD: iOS 8 To-Do List iPhone App UI

Monday, December 29, 2014


Advertise here with BSA




To-do list apps are very popular because of their pragmatic application to everyday life. They’re also fun to build and design offering plenty of room for ingenuity. So for my love of task management I created this free iOS 8 mobile app UI PSD exclusive to DesignM.ag readers. It focuses on a clean user experience with simple iOS 8 line icons. The design utilizes a dark color scheme to deviate from other common task management applications.


featured preview - ios8 iphone todo tasks app ui psd


The freebie was created giving prominence to the simple flat design style of iOS 8. It uses a tab bar along with some basic icons in the header section. I chose a dark interface because it seems easier on the eyes with a more comfortable level of contrast. All of the elements are editable and free to manipulate at your whim.




fullsize preview ios 8 psd freebie todo list app


Be sure to grab a free copy for yourself and let us know what you think in the comments area.





Advertise here with BSA







Source: http://designm.ag/freebies/freebie-psd-ios8-task-list-iphone-app-ui/

20 Great Freebie Sets You Should Definitely Download

20 Sleek PSD Button Freebies You Must Have!

Friday, December 26, 2014

20 Free and New PSD UI Kits

Wednesday, December 24, 2014

Modern Interface Patterns for Mobile Application Design

Sunday, December 21, 2014


Advertise here with BSA




There are now more app developers than we have ever seen in the short history of smartphone devices. Google’s newest Android OS coupled with Apple’s advancing technology makes for a force to be reckoned with. Although mobile interfaces can borrow traits from the web, they can’t be perfectly emulated because mobile apps rely on touch-based interactions.


I want to share a few mobile interface patterns to help designers craft purposeful applications that run smooth and behave as expected. This is no easy task and it requires a lot of practice to figure out the best methods for any individual application. But I suggest looking for these interfaces in other applications to determine how they feel and behave on a typical device.



Tabbed Content Areas


Among the many traits of modern app design is a growing need to squeeze content into infinitesimally small locations. Although recent versions of smartphones comes with enlarged screen sizes, the content still fits into a very small area. Include the fact that mobile apps are touch-based and you’ll see why extra screen space is a tremendous benefit.


A common design pattern is to use tabbed content switching between feeds, lists, thumbnail views, and other pertinent information. This trend started with older versions of iOS using the same grouped button concept. However it has since evolved onto Android and is used prominently for interface design.


spring tabbled switch content ios ui


The mobile app Spring features an example on their profile page. This is a slightly customized example where the button group is colored to match the content. Many designers prefer to keep these buttons on related pages that switch between alternative options. User profiles are the most common examples because there’s often a lot of stuff to display.


instagram tabbed icons content switch


Almost everyone knows about Instagram and certainly recognizes the iconic application interface. Their user profiles implement a similar tabbed group of links that switch between display styles for photographs. Viewers can see photos as thumbnails, details, or a couple other alternatives. So it’s important to note that button groups are useful for displaying different content on the same page, but they’re also useful for different styles of the same content too.


Guided Tooltips


To assist new users testing out an interface you might try adding some guided tooltips. These could appear as popup bubbles or as full modal windows on top of a mobile application. Naturally the purpose would be to explain any confusing or complex areas of the interface.


But it’s important to avoid excess mollycoddling. Most applications work the same and if you design a clean interface the buttons and navigation should be intuitive. Using too many of these tooltips can be annoying and degrading to experienced users. But that doesn’t mean they’re completely worthless – just use enough to expand on potentially complicated icons or buttons.


rent the runway ios app ui popup modal


In a simple iOS app Rent the Runway you’ll notice there’s a brief tooltip explaining the interface. For applications which require detailed user interaction there’s good reason for these guided tips. Especially if the application is mobile-only without a companion website. Just be sure to focus on the most important features and only show each tip one time – any more than that is excessive.


facebook guided tooltip ui modal info


Aside from interface-specific tips you can also explain features that relate to gesture. For example one of the Facebook screens uses a guide to explain how to swipe and hide chat conversations. This is not an integral part of the application but it can improve the browsing experience. Gestural tips are especially useful because they can’t always be understood intuitively – sometimes users need to know that swiping across or tapping & holding an item will perform an action.


Customized Navigation


Most UI designers recognize a mobile application when they see one. Kinda hard to miss those three lines so eloquently labeled as “hamburger icons”. While the name might conjure up the image of a 1950s malt shoppe, the user experience is still fantastic and heavily supported.


rdio gradient background hamburger sliding menu


Take for example the sliding menu found in the Rdio app. It uses very clear and distinct colors between the foreground text and background gradient. This forces the menu to stand apart from the main application and still provide an easygoing user experience. To allow greater functionality the menu also includes a search bar and lets the user to swipe down for more links.


gmail sliding hidden drawer navigation menu ios


Looking at a similar interface for Gmail we can see a lot of the same repeated patterns. Contrast between text links, lots of space, plus a small bit of extra information. Some links include badges which showcase the total number of new messages in any given category.


Login & Signup Pages


When someone first opens an application they want it to be a warm and inviting experience. This is especially true of social networks where a user might not have an existing account. This can make the login/signup page a stressful or exciting experience based on how the UI design is handled.


runkeeper ios app login signup design


After the splash screen finishes loading users should be thrust right into the action. A good example is RunKeeper which uses a customized login and registration page design. Users can switch back and forth easily and the fields are big enough to read from a distance. There’s also an option to log in directly using Facebook which has become a popular choice recently.


In this case the best design is the most streamlined design. Put together an organized list of features that must be included for the login/register page. These should be central to the interface without any major distractions. To spruce up the page you could include a logo, background photo, or branded vector art. Just be sure the artwork is secondary complimenting the primary login or registration form.


Closing


Although this is not an exhaustive list I hope these patterns can offer a solid point of reference for mobile designers. Once you begin to recognize common patterns you’ll be able to think critically about how they work. Then you can test out these patterns within your own application design process.





Advertise here with BSA







Source: http://ift.tt/1sZ1Fb3

Treat for Designers: 10 Free Design Resources

Tuesday, December 16, 2014


Advertise here with BSA




As a profession, the designers are provided with the task of imbibing a website with creative designs and patterns. They have to strictly adhere to the specification laid down by their client while instilling uniqueness and innovation wherever possible. So your task as a designer is to excel the expectations of your client while making sure that the user interface of the website looks appealing.


So to fulfill all the assigned tasks you have to go through the Photoshop document of the website and also inculcate some cool designs that will set you ahead of the curve. And you would be able to just that if you would create and design each and every web element from scratch. But frankly speaking it is not at all a feasible solution and such initiative is most likely to increase the project cost leaps & bounds. So to evade such scenario, you can take help of pre-existing design templates.


There are a number of design resources available at DealFuel , that can ease your designing task and also decrease the time required. These resources can be downloaded and utilized for free and you can even tweak it accordingly. Thus provided the flexibility and are the perfect solution that can be availed by you to save cost and time. So lets dig in and find out what resources we have in store for you.


1. Christmas Graphic Design Pack


1


Christmas is the duration when everyone around the globe submerge themselves in fun & frolic. Why should your website be any different. Using this design pack you can inject some cool Christmas designs in your website. The pack comes with different Christmas buttons, character & mascots, which portrays the holiday spirit to the fullest.


Free Download.


2. Premium Design Resources


2


This goodie comes with a pack of 5 premium design resources which are based on IO7 style. It incorporates flat style application icons and adopts minimalistic approach which keeps the overall look of the website neat and clean. The design elements are fully responsive and has parallax scrolling effect. It can be best utilized for designing fitness websites, blogs or personal portfolios.


Free Download.


3. Seamless Icons & Wood Patterns


3


This design pack has some amazing design patterns and icons which increases the overall appeal of your website. They can also be used as background image for the website or as a poster. The wood pattern available provides a classy look to your website and can be downloaded as .pat files or .jpg images.


Free Download.


4. Smart Device Icons


4


Picture says a thousand words and also helps improve the visual appeal of a website. Using these cool device icons you can reduce the content in your webpage substantially while easing the communication with your audience. This freebie comes with 100 smart device icons which are responsive and can be utilized for commercial or personal purposes.


Free Download.


5. Responsive WordPress Template


5


This responsive template flaunts a fluid design and is compatible with a spectrum of devices having different resolutions. This template is fully customizable and comes with sliders, different color themes and integrated social media accounts. It is compatible with various WordPress plugins and is best suited for professional websites.


Free Download.


6. Vector Badges


6


This set of high quality vector badges can be used to denote the authenticity, originality & quality of your products. These badges have a vintage look & feel to it and can be downloaded in .eps format.


Free Download.


7. Pricing Table Banners


7


Pricing table banners are a concise way of representing the price & discounts in your website. They are fully customizable and are the best ways of showing comparisons between two deals or products. These banners can be downloaded and used for commercial or personal projects.


Free Download.


8. Hand Drawn Vector Icons


8


When it comes to icons, hand drawn icons are as unique as they could get. This freebie consists of 25 hand drawn vector icons encompassing chatting, sharing & various social media icons.


Free Download.


9. Social Media Icons


9


Social media icons are a vital marketing ingredient and can enhance the popularity & reach of your website. With this pack, you can evade from using the monotonous social media icons and add some charisma to your website.


Free Download.


10. Vector Stars pack


10


The vector star pack can be used as an agent to provide ratings and feedback and to highlight important rules & regulations. These vector stars are very handy design elements and can be used for personal or commercial projects.


Free Download.





Advertise here with BSA







Source: http://ift.tt/1BRJPqc

Design your way

Monday, December 15, 2014

Line icons are some sort of a trend at the moment and it seems that everyone is using them in web design as well as in app design because of their sleek style.


Given the fact that I consider my subscribers a group of designers who want to be up-to-date with the latest trends, I thought that an article like this one with a lot of useful line icons would be the thing that was missing from this site.


If you happen to be working on a website or an app for a client or you just want to gather resources for future projects, this article will be quite a treat. It contains several icon packs created by designers who wanted to share their resources with the rest of the design community.


If you are a designer who is aware of the fact that icons are a vital part of any interface design, then you should download these icon sets.


440 Free Icons


440 Free Icons


Buddha Line Icons Complete


Buddha Line Icons Complete


54 Free e-commerce icons


54 Free e-commerce icons


50 FREE Icons


50 FREE Icons


Line icon set


line icon set


Simple Line Icons 2 – 100+ free icons


Simple Line Icons 2 - 100+ free icons


Linea


Linea


45 Blue Drops


45 Blue Drops


112 Outline PSD Icons


112 Outline PSD Icons


Free Lined Icons


Free Lined Icons


300 simple line icons


300 simple line icons


Simple Line Icons


Simple Line Icons


Budicon – 48 free line icon


Budicon - 48 free line icon


Compacticons – 180 PSD tiny icons


Compacticons – 180 PSD tiny icons


Sunday Icons


Sunday Icons


Iconset


Iconset


Icon Set (144)


Icon Set (144)


70 free PSD icons by iconsmind


70 free PSD icons by iconsmind


Ladies icons


Ladies icons


25 health icons – AI + Sketch


25 health icons – AI + Sketch








Source: http://ift.tt/1AcDy7j
 

The Cash Box Blueprint

Most Reading