Author Archive

iPhone 6 Sketch Templates

Posted on: 5 Comments

Hooray! I finally finished something on my to do list. Since the announcement of the new iPhone 6 and iPhone 6 Plus, I knew that I needed to make new sketch templates to add to the collection. They are something that I use everyday and I know a lot of others use them too. Here they are, please download and share with others.

You’ll notice that there are more options with these ones than in the past. You’ll get a 1up, 2up, and 3up option. It was too tight for a 4up option with the bigger sized phones. I want these to be actual size (which I haven’t even tested because I don’t have the new phone yet) so I didn’t want to shrink them to make a 4up work. You’ll also see a new white lines option.

I hope you enjoy and thanks for downloading!

Download

iPhone 5 wireframe template 2.0

Posted on: 7 Comments

**Update**

Check out the new iPhone 6 sketch templates!!

While using my own iPhone wireframe template, I was getting frustrated that I wasn’t able to draw 3 or 4 equal boxes across the screen without having to count out the grid lines. So I thought it was time to update this and make it better. So whats new you ask?

 

  • New and improved grid
  • New space grey color
  • 2 pages. First page includes the top bar (signal strength, time and battery life)
  • Second page has the top bar omitted

Download

RSL 8-bit

Posted on: 1 Comment

The project

Real Salt Lake is the club I cheer for. I have been working on this project off and on over the course of this 2013 MLS soccer season. Now that RSL has only 2 games left until they lift the trophy once again, I thought I better finish it off.

I have been converting each player into an 8-bit style and will slowly start to release each one as we get closer to this conference final game vs Portland Timbers.

The Club

Kyle Beckerman #5

Kyle Beckerman #5

Nick Rimando #18

Nick Rimando #18

Nat Borchers #6

Nat Borchers #6

Alvaro Saborio #15

Alvaro Saborio #15

Joao Plata #8

Joao Plata #8

Sebastian Velasquez #26

Sebastian Velasquez #26

Devon Sandoval #49

Devon Sandoval #49

Chris Schuler #28

Chris Schuler #28

Jason Kreis

Jason Kreis

Leonardo the Lion

Leo-the-lion

iOS7—Some Screens That Apple Didn’t Show You

Posted on: 1 Comment

I love how the title makes it sound like there is some kind of agenda here. That is not the case—I downloaded the beta and as I was exploring around I took some screenshots of different screens that I thought looked interesting. I thought I would just share them on the interwebs in case anyone finds them interesting too.

Lock Screen

If you are familiar with iOS6—you know that you can double tap the home button while on the lock screen and you can access your music controls and then after a moment it reverts back to the time. I have noticed with iOS7, when you toggle to the music controls, they stick around until you double tap the home button one more time. Even after you put the phone to sleep and come back, it is still on the music controls. Personally, I like this because I use my phone for music and podcasts a lot.

ios7-iphone-lock-1

Alarm and Snooze

This morning while waking up I saw this screen and thought that it looked nice. However I did have some troubles with stopping the alarm. Whenever I tried, it would put the alarm into snooze mode.

ios7-iphone-snooze-1

Siri Help

When on the Siri screen—if you tap on the question mark icon, you will get a bunch of examples of some things you can ask Siri. When you tap on an example you get the second screen. You can see that it is a little buggy and needs some help with rendering the text.

ios7-iphone-siri-1

Contacts and Making Calls

When making a call from the keypad, you can see the numbers are nice and round. The green button now bleeds off the screen. The contacts screen is nice and windows-esque.

ios7-iphone-calling-1

Outgoing and Incoming Calls

Here are the screens for outgoing (on the left) and incoming calls. The actions for an incoming call are clearer with the new copy.

ios7-iphone-calling-2

iPhone 5 Wireframe Sketch Template

Posted on: 11 Comments

**Update 2**

Check out the new iPhone 6 sketch templates!!

** Update **

There is a new and improved version of this template out. Check it out now!

I have been using an iPhone 4 sketch template that I found on the internet to draw all of my app wireframes. Since the iPhone 5 is 176px taller, I made this sketch template at the iPhone 5 size and thought I would share it. The screen is 1136px tall and 640px wide (at the retina resolution). The iPhone 4 was 960px tall which was a nice number. If you are at all familiar with the 960 grid system, you would know that 960 can be divisible evenly by many numbers—2, 3, 4, 5, 6, 8, 10, 12, 14, 15, 16, 20, 30, 40, 60 and more. Well, 1136 isn’t so nice. You will see in the template that all the squares are 40×40 except for the top row which have to be a fraction of a full square.

Feel free to download and share it. Let me know in the comments if you like it.

Download

Keeping Your Screenshots Organized With Deeper For Mac

Posted on: No Comments

As part of my daily workflow, it seems like I take hundreds of screenshots a day on my Mac. Whether it is to hurry and paste something into my design or save some inspirational web page. All those screenshots were filling up my desktop pretty quickly with image files.

This is what I did to help keep all those file at bay. I downloaded the application Deeper which is available for Mac. Deeper essentially enables the hidden preferences for your Apple computer.

deeper preferences

Deeper – General Tab

Once downloaded and installed—in the general tab there is a place to change the path for the computers screenshots. I just created a folder called Screenshots and directed the path to this new folder. I put the folder in the side bar of the finder window so its easily accessible.

Finder Sidebar

Finder Sidebar

That’s it. It is pretty simple. There are a bunch more hidden preferences you can change if you so desire. The only other one that I changed was for my dock position. If you there is something you do to keep your screenshots and other files organized, I would like to hear about them in the comments.

Download Deeper

Easily Copy and Paste Between Your Mac and iPhone

Posted on: 1 Comment

Have you ever wanted to copy a link or text from your Mac and send it to your iPhone? Or from your iPhone to your Mac? Probably. It is something that I want to do about once a week. Since downloading the Messages app (beta version) for my MacBook Pro—I have mostly been using it to do exactly that.

Messages app

Messages app

Just open the Messages app on your computer and send a message to your phone. You’ll get a text on your phone and if it is a link—just click on it to open the website. Its not exactly copy + paste but better than typing a really long URL.

Message iPhone app

Message iPhone app

My Subtle Patterns

Posted on: 2 Comments

One of my favorite resources for web design has to be Subtle Patterns. If you are in need of a well designed tilable pattern or texture then look no further.

The following is taken from the Subtle Pattern website:

“Subtle Patterns is created and curated by me, Atle Mo. My goal is to be a high quality resource for anyone in need of tilable textured patterns, free to use.

There has always been great resources available online for designers and developers, and I’ve been using these myself since I started making websites some twelve years ago – that’s the fantastic thing about the web community. Now I’m using Subtle Patterns as my way of giving back to the next (and current) generation of web designers and developers or anyone else who needs some high quality patterns.”

Go check out Subtle Patterns for some great patterns for your next project. Also check out the patterns that I have created and submitted.

Apple iOS 6 First Impressions

Posted on: 1 Comment

Updated (July 13, 2012)

Spending some time on Apple’s iOS preview page, you can read about the details of it’s new featured updates. There are updates to the maps app, Siri and Facebook integration. Of course you will find more than that on Apple’s website.

I wanted to write just a quick review of some subtle updates and things that I have noticed while using my phone this past week since I updated to the developer version of iOS 6. I am using my phone like I normally would—I’m not forcing myself to try out these new big ticket updates. This is what I have found.

Turn By Turn Navigation

I have used the turn by turn navigation a few times now and I have been very impressed. I am really excited about this feature. The few times that I have had to use it, it turned out to be very reliable. I was impressed how well it updated the route that I was driving on. I ended up missing a turn (my fault, not the phone’s) and it quickly updated the route and sent me to my destination.

iOS6-Maps-App

iOS6 Maps App turn-by-turn navigation

UI Updates

First off, the music app has had a make over. You will notice very quickly that Apple has gone with a light UI in place of the previous dark one. However, you will find a dark UI once you drill down to the song view.

iOS6 Music App

iOS6 Music App

I haven’t decided whether I like the light UI or not. I’m not used to it and so every time I open the app, I am surprised.

The negative that I have noticed with the music app is that it is extremely slow. From the locked screen, I often double tap the home button to quickly access the music controls. I will push play and sometimes it will take up to 10 seconds to play the song. Then when I skip a song, at times it will delay a few seconds. I really hope this is fixed before the real deal is released.

The App Store

The next thing that I have noticed in iOS6 is the experience in the App Store. I have always been annoyed when I am looking at the featured Free Apps, find one that I like, download it and it closes the App Store app and shows me the new app being installed on the home screen. Then I open the App Store back up and certainly will have to scroll down and push the load 50 more apps a few times to get back to where I was.

Well with iOS 6, when you click Install, it doesn’t kick you out of the app. You see that the app installing and you can go back and be in the same spot as you were before. I did experience some bugs with this, where the screen would go blank and I had to start over from the top of the list.

If you already have an app installed on your device and you come across it in the App Store, you now have the option to open the app. I don’t see this as being all too helpful, except for some nice feedback to the user to let them know that the app is already installed on your device.

iOS 6 App Store App

iOS 6 App Store App

The other good thing is when you are browsing the Featured Free Apps, the apps auto load once you start scrolling. You don’t have to push a button to load more. It works pretty well too. You have to scroll pretty fast to even see the pre-loader (which I only saw for about a second) before the next group of apps load.

A Hidden Gem In Safari

The last thing that I want to highlight is something I noticed in Safari while just browsing a website in landscape mode. In the bottom right hand corner, I noticed a new icon only when in landscape mode. It is definitely the full screen icon that you see in other apps like the Video app.

iOS 6 Full Screen Safari Mode

iOS 6 Full Screen Safari Mode

When you click it, the status bar and the bottom chrome of Safari hide off screen giving you more screen real estate for your browsing pleasure. You still have access to the back button which is fixed in the bottom left-hand corner. Also, you can always exit full screen by pushing the icon again which stays fixed in the bottom right-hand corner. If you pull the browser down all the way, the URL bar will still be available. But if you scroll all the way to the bottom, the chrome does not appear until you exit full screen mode.

iOS 6 Full Screen Safari Mode

iOS 6 Full Screen Safari Mode

This is a pleasant update to Safari. I can see this being very useful—I just wish it was available for portrait mode as well. The thing that you would need to be aware of is you could potentially cover up buttons on your page if you have a fixed button down in the bottom left-hand or bottom right-hand corner of your screen.

As I keep using the developer version of Apple’s newest iOS I hope to find more hidden jewels that make the experience much better for the user. So far the Maps have been hit or miss.

Staying in full screen mode on the iPhone from page to page

Posted on: 32 Comments

It is incredibly easy to make any website capable of being saved as a full screen web app on the iPhone, iPad or iPod Touch. You may have come across a tutorial teaching you how to add a couple of meta tags in the head of your html and now you can save your website to your phone’s desktop and have it launch in full screen mode without the browser chrome.

The Problem

At this point, you are probably really excited to have added about 100 pixels of screen real-estate to your website. As you start to play around, you click on a link and what’s this? It switches from your full screen mode to Safari. You hurry and switch back to the full screen app and try it again. Once more, it opens the new page in Safari.

This is one thing that I had a hard time finding a solution to on the internet. How to keep your experience of the web app in the full screen mode without it trying to open every link in Safari.

Good news, I found some javascript that will fix this problem. Include this script below on every page of your site and it basically will grab all the anchor tags on the page and it handles the window location, which will load the new page and keep you in the full screen mode.

The Code

function fullscreen() {
	$('a').click(function() {
		if(!$(this).hasClass('noeffect')) {
			window.location = $(this).attr('href');
			return false;
		}
	});
}

fullscreen();

Notes

One thing to note about this method, is if you have a link that points to a file that you want the user to download, like a PDF, you should add the class ‘noeffect’ to the anchor tag to avoid problems.

If you visit the demo link on an iPhone or iPad and save it your homescreen. Launch it and click on the navigation links. You will see that it keeps you in the fullscreen mode.

Demo

Printable Valentine’s Day Card

Posted on: 8 Comments

With Valentine’s Day just days away, there a many things your loved one might be expecting. Flowers, chocolates, stuffed animals and absolutely a nice card. Well look no further for the nice card. From one of my favorite episodes of The Simpsons—I have recreated the Valentine’s card given to Ralph from Lisa.

Even though Lisa eventually flips out on Ralph, in the end, they do manage to make peace and stay friends. Download this card and give it to that special someone. Just be careful with the chocolates, for we know that “Nothing gets chocolate out”.

Download

Mario Bros iPhone Wallpaper

Posted on: 1 Comment

For all you fans of the classic Nintendo game Super Mario Bros., here is the perfect wallpaper for your phone. This is what you get: 1 Mario, 1 Gumba 8 brick boxes and 8 coin boxes. Enjoy!

Download

The Easiest Way To Get More Sound From Your Phone

Posted on: 2 Comments

Often when I am in the kitchen cooking or cleaning, I like to listen to music. I keep a fair amount of music on my iPhone so I can always pull it out and turn it on. Well this works fine, but sometimes its hard to hear the music from the little speaker, even when it is turned up all the way.

An easy trick to get more sound from that little speaker is to just put your phone into a bowl or cup. Different materials and various sizes will produce different effects. So experiment and find something that you like.

This works well outside of the kitchen as well. The stereo in my car is broken, so I placed a cup in the cup holder and I use that for my car radio. I know, it sounds ghetto but for me it is good enough.

Obviously you can always buy a little speaker for your phone or iPod which aren’t very expensive and put it in the kitchen. For me, the bowl works fine.