Tags Posts tagged with "Apps"

Apps

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…

2
UI UX Web Designer Jakub Antalik

If you’re a UI/UX designer then you’ve more than likely heard of Jakub Antalik or have at least come across some of his work. Jakub is a UI, UX, and Web Designer from Slovakia and founder of Scrape apps and Tasky. We have featured some of his work on Enfuzed as well in the 25 stunning mobile UI examples. Myself being a fan of Jakub’s work, decided to set up an interview with him to get to know him and his background a little better.

You can follow Jakub Antalik on:

Where are you from?

Slovakia. Banská Bystrica, a little city near High Tatras.

Where do you currently reside?

Bratislava, capital of Slovakia.

How old are you?

23

How many years have you been doing UI/UX design?

For about 3 years.

What made you want to become a UI/UX designer?

In the past I worked as a webdesigner in the internet agency. But I love new technologies and applications so I started spending more time with UI/UX works, and it is funier for me.

What University did you attend and what is your degree in?

I was studying economics at University in Prague, but I didn’t finish it, I chose a graphic designer career.

Where did you land your first UI/UX related job?

It was in Prague, accidentally I got some UI job and I was lucky for a really good client, so it was great experience for me.

What are your 3 favorite projects you have worked on/created?

For sure it is Taasky, because it is my own project :) Email client and calendar app.

Tasky

Tasky App by Jakub Antalik

Tasky App by Jakub Antalik

Email Client

Email Client by Jakub Antalik

Email Client by Jakub Antalik

Calender App

Calender App by Jakub Antalik

Calender App by Jakub Antalik

How much time do you spend per project on average?

It really depends from project but it is around 50-100 hours.

What is your favorite non-design related hobby?

I love taking photos, doing some sports like basketball, volleyball or table tennis. Also I like reading books.

Who/Where do you draw your inspiration from?

Lots of beautiful and inspirational stuff you can find on Dribbble, Behance and sometimes I find inspiration in everyday life.

What design tools/software do you use?

Photoshop and Wacom tablet.

Xbox or Playstation?

Playstation

Mac or PC?

Mac

Chrome, Firefox, or Safari?

Chrome

What would your last meal ever be?

Bryndzové halušky – it is a traditional slovak meal.

What is your favorite book?

Catch 22

What is your favorite movie?

Matrix

What is your favorite social media network?

Dribbble

What are some of your future goals?

My goal is to be the best UI and UX designer. I want to improve myself in UX skills and interaction design in the future. I want to work for the best and coolest apps. Also I want to finish some of my own projects. And of course to be happy. :)

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

2
How to add an app icon to your website

Having app icons for your website is a good thing to include these days with the amount of iPhone’s and iPad’s in the world. If you’re wondering what having an app icon for your website means then let me explain. Apple iPhone’s, iPad’s, and iPod touch devices give users the ability to add websites to their home screen (bookmarking) as if it were an app (see image below).

Enfuzed App Icon

This is great if your website does not have an app in the app store as it can be made to look like an app and acts as a quick access point for users to your website. The problem is, if you have not made app icons for your website then it will just take a shitty screen shot of your website and shrink it down to fit the app icon size.

This is not good for a number of reasons; one being, it looks like junk; two being, when a user is sliding through their apps, yours will be easily overlooked. I used Creative Bloq as an example of a site not having app icons since it’s one of the blogs I frequent.

Bookmark without an app icon

Assuming you don’t want that crummy screenshot as your icon if a user bookmarks your website, let’s get to the “how to” on adding an app icon to your website.

Creating an App Icon

The first thing you will need to do is create an app icon that is to be used for your website. We need to take into account the various apple touch resolutions and sizes when making an icon. Here are the icon sizes for the icon (in pixels) you will need to make:

*Note that these need to be in PNG format*

  • iPhone/iPod: 57×57
  • iPhone/iPod with Retina: 114×114
  • iPhone 5/iPod Touch 5th Gen: 114×114
  • iPad: 72×72
  • iPad with Retina: 144×144

You don’t need to worry about rounding the corners, Apple will do this for you, so just make square icons. You also don’t have to worry about adding the “glare” to your icon, as Apple will do this for you as well, but we will get to this later.

Now that you have all of your icons created, you’ll need to add them to your website’s directory naming them as follows so apple will recognize them:

  • iPhone/iPod: touch-icon-iphone.png
  • iPhone/iPod with Retina/iPhone 5: touch-icon-iphone-retina.png
  • iPad: touch-icon-ipad.png
  • iPad with Retina: touch-icon-ipad-retina.png

The Code

We have our app icons made in all device sizes, we’ve named them accordingly so Apple will recognize them, and we’ve added them into our website’s directory. Now we have to add the code to the head of our website. There are two ways to present your app icon to viewers:

  • The regular way – which includes the “glare” over top of the icon
  • The precomposed way – which shows the app icon as is

If you wish to show the icon “as is” (meaning just as you made it) then just add the words -precomposed after “apple-touch-icon” in your code. If you want the famous apple “glare” over your icon, then just leave the rel=”apple-touch-icon”.

Now to the easy part, just copy and paste the following code making sure the file paths are correct. We have chosen to leave our app icon “as is” which is a flat look, so we added “-precomposed” to the end of our rel:

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-ipad-retina.png" />

That’s it! Now you can navigate to your website on your Apple touch device, click the add bookmark button and see your new app icon on your home screen. Please make sure all of your files are named properly, your images are in the right format, and your file paths are correct.

Test It

Here is how you can add a bookmark to see if it worked. Navigate to your website and click the middle button (pictured below) to bring up a menu.

Apple Safari Bookmark Icon

In the middle of the menu you will see your icon and under it it says “Add to Home Screen”. Click this.

Add to Homecreen Bookmark button

Next it gives you the option to name your bookmark, this will be the name that appears under your icon on your home screen.

Adding name to bookmark icon

Useful Resources:

Safari Web Content Guide – Configuring Web Apps

iOS Human Interface Guidelines – Custom Icon and Image Creation Guidelines

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