Tags Posts tagged with "Mobile"

Mobile

0

Free for download is this iPhone 5C PSD vector mockup created by Pixeden. This free PSD mockup of the iPhone 5C at a three quarter view comes in the 5C colors which include in green, blue, yellow, pink, and white. This is a colorful and fun vector phone mockup to showcase your app or mobile website designs. Click the heading or image below to direct to the download page.

iPhone 5C PSD Mockup by Pixeden

Free iPhone 5C PSD Mockup by Pixeden

7
2014 Web Design Trends Predictions

One of the main jobs of designers is keeping pace with the current design trends, this includes knowing what’s cool and what’s not. There are many reasons for this, most of which you should already understand, but in short it’s money. If you are able to know what’s hot and current more people will look to you for designs and it increases your ability to get hired (assuming you’re looking for a job) and get noticed by others in the design community.

1. Content First

A trend that has grown large recently, and will continue to grow, is the content first trend. Rather than building a website and throwing the content in later, more and more designers/developers are working around the content. Creating content first for a website and then designing around it should be what every designer/developer does. It makes for less headaches down the road and it looks a lot better and more consistent throughout the website. It’s not always that simple though because clients aren’t almost always late in terms of content for a website.

Websites that focus more on content rather than the visuals usually turn out better (not always though) because they have a more minimal layout and design (which is another big trend prediction for 2014). Below I’ve gathered some examples of websites that focus solely on content.

A List Apart is a great example of a website that is built around content.

A List Apart Website

Another great example is zerosixthree.se, built, created and written by Sebastian Ekström. This site uses minimalism and content to create a beautiful design that makes you want to read everything on the website.

Zero Six Three

2. Hexagon

I predicted this trend for 2013 but it didn’t quite take on as I had originally thought. Anyways, hexagon shapes will begin to replace the traditional square and circle shapes that you are used to seeing. Below are a few examples of what I mean by hexagon design.

Melborp’s website does a great job of illustrating this trend. The hexagons work beautifully with the website and give users something different and new to look at.

Melborp's website

Built by Buffalo is another great example of hexagons in web design, take a look below.

Built by Buffalo website

3. Lightweight

With mobile taking over the internet browsing world, it’s important to make sure your website loads fast. Why? Because cell phones don’t have the high speed internet that you have at home/work. One thing many designers/developers are doing to insure lightweight websites is cutting out all the unnecessary stuff like massive images, logos, “cool” animations, videos, etc.

Focus on things that your website NEEDS not things you think are cool. This lightweight trend goes hand in hand with content first and minimal design, cutting the fat allows you to speed up your website, focus on content, and give it that minimal look.

4. Faster Loading/Fewer HTTP Requests

Faster loading websites goes in hand with lightweight, but I wanted to elaborate a little on other ways websites can load faster. For those of you that are unfamiliar, an HTTP request happens when a user visits your website. The users computer requests styles, scripts, images, web fonts etc. from the server and that in turn loads the website in their browser window for them to view. The more HTTP requests required the longer the website will take to load, for example, if you have 4 different Google web fonts in your header, an HTTP request is sent for each of those fonts.

This will cause a website to load slower because of all the extra work from requests happening behind the scenes. Limiting these requests can help speed up your website. An easy way to cut back on HTTP requests is by creating sprites for images, this way you aren’t loading multiple images individually, instead you’re loading one large image file that includes multiple images on it. Other ways including combining CSS into one file, combining scripts into one file, and limiting the amount of fonts being used on the website.

5. User Experience

The days of flash and crazy animations on web pages are gone. Web designers and developers are focusing more and more on the user rather than trying to get an Awwwards ribbon on their web page (or they should be at least).

The goal of any website is to communicate information easily to the user in a way they can figure out and understand. Websites that are nothing but a ginormous image do nothing but get in the way of what a web page visitor is truly there for. Using an informative paragraph of text or video is a better alternative in my opinion.

CSS3 and HTML5 are helping us out a lot with this. We are now able to provide minimal animations for the user experience without bloating the site to the weight of 2MB+.  That’s why 2014 will be the year of the user, more and more developers and designers will create websites that are simple and easy to use; but also be an enjoyable user experience that doesn’t take minutes to load.

6. Mobile First

We’ve been over it many times, mobile is still going to be in this year and you can be sure its use will continue to grow throughout 2014. Websites will begin to be built with mobile in mind; icons that you are familiar with on mobile devices will start to be used in place of text (the menu icon for instance) on websites.

The user experience of websites will also begin to shift towards that of a mobile device where navigating through it will be similar to how you navigate through a website on your mobile phone.

7. Serif Typeface

This may be a towards the end of 2014 web design trend. The use of Sans Serif typefaces are going to slowly fade away, as regards for regular paragraph type, and plain serif type will start to replace it. I am already beginning to see more blogs (that focus on content) switch to a Serif typefaces. I have an article in the works that will dive more in depth regarding this so stay tuned.

8. Minimal

Are you noticing the similarities between all these trends yet? I’ll give you a hint, they all have to do with minimalism. Defined, Minimalism is the art of stripping down an element to only the necessary essentials it needs in order to function. When done correctly in web design, it leaves the user with a sophisticated impression and ease of use.

Minimalism really took off last year among the big players and that means this will be the year that it will be fully adopted by others. The basic idea behind a minimalist design is to remove the clutter and use only what you need. Apple has been doing a great job of this for years in both product design and interface design. Below is a great example of a minimal website, for more check out our article 19 Minimalist Website Examples

The Kitchen Website

Conclusion

There you have it, the 2014 web design trends. 2014 will be the year of simplicity which will greatly benefit all designers, developers, and even end users.

1
Types of Mobile Apps Infographic by FreeMan Marketing

In today’s world of mobile devices, having a mobile app is all the craze right now. There are some things you need to know before plunging into the mobile app world; The different types of mobile apps. Yes, there is more than one type of mobile application and knowing the difference is crucial if you are in the market for having a mobile app built.

As this infographic by FreeMan Marketing explains, there are 3 different types of mobile apps. The first type of mobile app is Native, the second is Hybrid, and the third is Web.

1.) Native apps are housed on the device and have access to various phone features. Some examples of native apps include most games and utilities that you can use without internet access.

2.) Hybrid apps use both the native phone features and web features. Some examples of hybrid apps are Facebook, Twitter, Yelp, and The Weather Channel.

3.) Web apps require internet access, as they are on actually just websites, but they look and feel similar to a regular app. An example of a web app is if you visit Twitter or Facebook on your phone using the phones web browser, both websites look like apps but they are actually just mobile versions of the website.

Below you can see in the infographic various examples of each type of app.

View a larger version here.

Created by FreeMan Marketing

Types of mobile apps infographic created by FreeMan Marketing

0
Taasky Task Management App

As designers and developers, task management is a crucial process in our everyday lives. Without order and management, getting things done on time would be near impossible. Having a way of keeping your tasks in order and all in one place is something we all need, and not necessarily just for work purposes, but for our home life as well.

Lucky for us, Taasky is here to save the day. Taasky is a beautiful, simple, and easy to use task management app, designed by Scrape apps and powered by CLEEVIO, that features a minimalist design and stunning UI. Taasky offers up categories so you can sort your tasks and filter through them easily, each category is color coded, so keeping your tasks organized is easy and effortless.

There are many task management apps out there but the problem with most of them is all the unnecessary clutter and features we don’t need or use half the time. Taasky has done a great job at eliminating all of this and focusing soley on the tasks at hand. The app also makes creating and completing tasks fun with its swipe animations and cool sounds (you can optionally turn off the sounds).

Right after downloading the app and opening it, Taasky has a nice welcome screen and it quickly walks you through how to use the app. Once you are at the main app screen you will notice the preset tasks that Taasky created for you. These tasks are for information purposes and they show you more on how to get started creating, editing, and changing the priority of tasks. I will be honest though, this app is easy enough to use so you may not need the intro tutorial.

Taasky App Welcome Menu

Taasky App Default Home

To add a task you simply pull down on the screen or push the “+” icon at the top right. A small area will appear and you will be able to name the task (where it says “add new task”) set the date for the task, set the alert time for the task and select a category for it.

Add task Taasky App

Set Date Taasky Task App

As I mentioned before, you can organize your tasks by category or “list”. It gives you four different default lists, but by visiting the settings section, you can edit them as you please and create your own categories or “lists” as you can see in the image below.

Taasky Lists

If you have tasks in place and you wish to edit them, prioritize them, or delete them you simply swipe over the task to the left and a menu is displayed as you’ll see below.

Menu for Taasjy app editing task

Swiping to the right brings up the main menu that displays the various categories you have set up and also the settings. This way you can display tasks from a certain list, say your tasks you have set for work so that you don’t get them confused with other tasks. Below you can see a screen capture of the main menu.

Taasky Side Bar menu

Taasky features push notifications in case you were wondering and they do work with a very distinctive sound to help you distinguish them from texts or emails.

Here are some more images of the Taasky app and if you wish to download it here is the link.

Taasky Task Management App

Taasky Task Management App in Hand

Features I wish it included

This is version 1.0 of the app that I reviewed so hopefully we will get some other additions to the app in later versions. Something that I thought would be useful is the ability to add more categories or “lists”. Right now you can only have 4 categories ( no less no more) and it would be useful to be able to add more or subtract some if needed.

*UPDATE*: Version 1.1 allows you to add more categories now!

It would be cool to have the notification badge on the icon for tasks yet to be completed, that way users know how many tasks they have left without having to open the app.

4
Waffle App Icon

Seeing app icons has essentially become part of our daily lives. With this comes the struggle for designers to create icons that will stand out from all other app icons. There are a lot of designers who have managed to make this task look incredibly easy, designing some stunning and creative app icons (see our past article: 25 Clever Mobile App Icons).

After following some of the designers that create these amazing app icons, I began to notice a trend, a lot of these icons are food related. I began stumbling across more and more icons that looked so tasty that I wanted to take a bite out of my computer screen. So I decided to create an article showcasing some of these food related app icons that are sure to get your mouth watering.

1. Waffle by Eddie Lobanovskiy

Waffle App Icon by Eddie Lobanovskiy

2. Steak by Eddie Lobanovskiy

Steak App Icon by Eddie Lobanovskiy

3. Bacon by Eddie Lobanovskiy

Bacon App Icon by Eddie Lobanovskiy

4. Cinnamon Roll by CreativeDash

Cinnamon Roll App Icon by CreativeDash

5. Donut by CreativeDash

Donut App Icon by CreativeDash

6. Pancakes by CreativeDash

Pancakes App Icon by CreativeDash

7. Burger Bun by CreativeDash

Burger Bun App Icon by CreativeDash

8. Sushi by CreativeDash

Sushi App Icon by CreativeDash

9. Fried Egg by CreativeDash

Fried Egg App Icon by CreativeDash

10. Chuck by Marc Clancy

Beef Chuck App Icon by Marc Clancy

11. Sandwich by Ryan Ford

Sandwich App Icon by Ryan Ford

12. Fries by Ryan Ford

Fries App Icon by Ryan Ford

13. Oreo by Julian Burford

Oreo App Icon by Julian Burford

14. Burger by Julian Burford

Burger App Icon by Julian Burford

15. Donut by Konstantin Datz

Donut App Icon by Konstantin Datz

16. Jelly Cake by Erfan Nuriyev

Jelly Cake App Icon by Erfan Nuriyev

17. Hamburger by Erfan Nuriyev

Hamburger App Icon by Erfan Nuriyev

18. Candy by Ramotion

Candy App Icon by Ramotion

6
iOS 8 Infinity by Emilien Durand

There is a lot of speculation on what Apple’s iPhone 6 will look like and you will see various design concepts across the web. Perhaps one of the most popular and creative concepts is one that debuted on the popular designer portfolio website dribbble.

This concept, dubbed at first “iPhone 6 Wrap Around Screen”, was created by art director Claudio Guglieri and features a larger screen that wraps around the sides of the phone. Claudio’s concept was inspired by an Apple patent wrap-around AMOLED display. You can see Claudio’s first shot of it below for the Adventurous RSS Reader app:

iPhone 6 Infinity Adventurous RSS Reader app by Claudio Guglieri

This concept caught on in popularity quickly and was latter dubbed “iPhone 6 Infinity” by London based art director Fabio Basile who created his own template showcasing the iPhone 6 infinity concept which you can see below.

iPhone 6 Infinity by Fabio Basile

You can download the template created by Claudio Guglieri or the template by Fabio Basile. As you can see this is a very cool concept for the iPhone 6 and below we will showcase some of the other UI designs people have created using the iPhone 6 Infinity template.

iPhone 6 PSD Template by Claudio Guglieri

iPhone 6 PSD Template by Claudio Guglieri

Side Indicators by Michael Shanks

Side Indicators iPhone 6 Concept by Michael Shanks

Side Screen by Michael Shanks

Side Screen iPhone 6 Concept by Michael Shanks

Translucent Infinity Screen by Sebastiaan Scheer

Translucent Infinity Screen by Sebastiaan Scheer

Square Register by Chris Cacioppe

Square Register iPhone 6 Infinity by Chris Cacioppe

Phone Concept by Regy Perlera

iPhone 6 Infinity Concept by Regy Perlera

Twitter Prototype by Fabbio Murru

Twitter iPhone 6 Infinty Prototype by Fabbio Murru

Concept Hockey App by Serge Jouqier

iPhone 6 Infinity Concept Hockey App by Serge Jouqier

Poll App by Aaron Humphreys

iPhone 6 Infinity Poll App by Aaron Humphreys

Your Trip App by Jan von Beckerath of NIMIUS

iPhone 6 Infinity Your Trip App by Jan von Beckerath of Nimius

Wide iPhone Mockup PSD by Alex Sekachov

Wide iPhone 6 Infinity Mockup PSD by Alex Sekachov

Infinity Shot by Maarib

iPhone 6 Infinity Shot by Maarib

Weibo App Design by Jiangping Hsu

iPhone 6 Infinity Weibo App Design by Jiangping Hsu

iOS 8 Infinity by Emilien Durand

iOS 8 Infinity by Emilien Durand

Hotel Management App by Ashish Thakkar

iPhone 6 Infinity Hotel Management App by Ashish Thakkar

Cinemark Movie Ticket App by Edwin Diaz

iPhone 6 Infinity Cinemark Movie Ticket App by Edwin Diaz

iPhone 6 Infinity Side Status Bar by Charles Treece

iPhone 6 Infinity Side Status Bar by Charles Treece

So I’m curious to know what everyone’s thoughts are on this iPhone 6 Infinity Concept, do you like it? Hate it? Comment below…

0
MD Feed Mobile UI by Fluxwerk

A continuance of our older post, 30 beautiful mobile UI examples, here we will showcase 25 stunning mobile UI examples that come from various designers. As the world keeps transitioning towards a complete mobile take over, designers are challenged to keep creating simpler and more stunning user interfaces for mobile devices. As I’ve said before, in order to capture the users attention and keep them intrigued, a visually appealing mobile interface is extremely important.

1. Profile Settings by Anke Mackenthun

Profile Settings Mobile App UI by Anke Mackenthun

2. Hotel App by Ryan Pittman

Hotel App UI by Ryan Pittman

3. iPhone 5 Reduced by Jesse Pocisk

iPhone 5 Reduced Mobile UI by Jesse Pocisk

4. Music Player Interaction by Ramy Majouji

Music Player Interaction UI by Ramy Majouji

5. Fold Effect by Jelio Dimitrov

Fold Effect Mobile UI by Jelio Dimitrov

6. Discovr App by Florian Peninon

Discovr App UI by Florian Peninon

7. Mobile Contacts Concept by Justin Nurse

Mobile Contacts Concept UI by Justin Nurse

8. Responsive Bank by Mitchell Hillman

Responsive Bank Mobile UI by Mitchell Hillman

9. Kelvin Weather App by Eric Hoffman

Kelvin Weather App by Eric Hoffman

10. Trainer by Drew Wilson

Trainer App UI by Drew Wilson

11. WIP Sport App by Beasty Design

WIP Sport App by Beasty Design

12. Hotskoop by Beasty Design

Hotskoop Mobile Ui by Beasty Design

13. Mobile Portfolio by CreativeDash

Mobile Portfolio UI by CreativeDash

14. Fav Player by Buatoom

Fav Player Mobile UI by Buatoom

15. iOS 7 by Dámaso Benítez

iOS 7 Mobile UI by Dámaso Benítez

16. Timeline by Daniel Klopper

Timeline Mobile UI by Daniel Klopper

17. MD Feed by Lucia Kubinska

MD Feed Mobile UI by Lucia Kubinska

18. Platefound App by David Dulak

Platefound App by David Dulak

19. City Guides by Rally Interactive

City Guides Mobile UI by Rally Interactive

20. To Do App by Jakub Antalik

To Do App by Jakub Antalik

21. Social Tracker App by Ilja Miskov

Social Tracker App by Ilja Miskov

22. Menu by Brian Waddington

Menu Mobile UI by Brian Waddington

23. Assistant App by CreativeDash

Assistant App by CreativeDash

24. Message App by Jamie Heuze

Message App by Jamie Heuze

25. Instagram iOS 7 by Andrew Korytsev

Instagram iOS 7 by Andrew Korytsev

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods