Apple etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Apple etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

29 Ekim 2013 Salı

Awesome Apple Pie Appeal: How Simple, Classic Design Works

Dough. Apples. Sugar. Spices. These are all the ingredients you need to make a classic apple pie. Some recipes will call for extra ingredients to make things extra fancy, but none of those ingredients are necessary to create the delicious, simple, comforting dessert we all know and love.


Why am I talking about pie on a design website? Well, because I think that designers, of any kind, can learn a lot from bakers who skip over the fancy trimmings to give people what they want most – an uncomplicated plate of minimalist goodness. Apple pie has endured through the years because it’s something people easily understand. In the same way, a simple, classic design that doesn’t require your audience to think too hard to understand the message will still be relevant after years of fancy fluff and bad trends have come and gone.



Apple pie is something you can’t really mess up – unless you start adding things that don’t really need to be there. It might not be *easy* to create the perfect design, but simplifying your “recipe” of features and information is one of the most important steps toward creating the best user experience possible.


“Pare” Necessities



The best recipes for apple pie, in my opinion, are the ones that keep things basic. In culinary terms, this allows the flavor of the main ingredient – apples, in this case – to shine. The apples are the “selling point,” so to speak. When you sit down to design a website, flyer, or brochure, make sure your audience knows *exactly* what they’re looking at. In America and most of Europe (with a few exceptions), apple pies are covered with a crust. This crust is traditionally either flat or plaited into a lattice, and it sends a signal to hungry folks that the fruit they’ll find inside is probably going to be apples.


Make sure your selling point in a design is as clear as the apples in a pie. Determine exactly what your users are looking for and what they want. Ask them, if you can. The more testing you can conduct before publication, the higher your probability of creating a design that speaks to your users’ specific needs. If, for example, you’re designing a clothing website, do your users want to search based on the types of clothing (shirts, dresses, shoes, etc.) or the types of materials (silk, cotton, leather, vinyl)? The only way you’ll know the answer for sure is if you ask.


Getting feedback from friends and acquaintances is a time-honored way of gathering “market” research in the initial stages of a design. Ask them specific questions about their experience – is something missing that they’d like to see? Can they digest the information they need clearly and without any assistance? If you’re bound by confidentiality agreements (or you have no friends), it’s perfectly acceptable to ask your client to produce this research for you or enable you to do it yourself.


This will probably be a terrible pun/cliche combo for both this article and this topic (forgive me), but Apple is the leader in the area of simple design and streamlined user experience. The Apple website and store are specifically designed to lead you, the user, through the buying experience with as little hassle and stress as possible. The product images are big; the text is short and obvious. Additional information is available at the click of a mouse, but if you don’t click the links, you never need to worry about it. You’d better believe that the web design department at Apple spent hundreds of hours figuring out the things their users wanted – and needed – to see in order to complete the sale. And well, cliches just mean that something is extra-extra true!


Sweet Reduction



There are plenty of things you can put on top of a pie: ice cream, sugar, whipped cream, syrup, cookies, cherries – the list goes on and on. Some people might think this makes the pie taste better, but in my opinion, if you have to add that many extra things to your pie to improve the taste, you’re starting from the wrong end of the plate. Similarly, extra bells and whistles usually only serve to clutter up a design and obscure the fact that it wasn’t very good to begin with.


I’m not saying you should never add, say, an extra column, widget, or typographic treatment if you really need to, or even just really want to. But it’s important to start with a good “base.” Make sure the fundamental message of your design gets through loud and clear. Don’t give your users extra options they don’t need or aren’t looking for. Don’t make it harder for them to get to where they need to go. Make your users’ main goal your top priority, and add in the “toppings” only once you’re sure the main event is a treat. And hey, toppings can be delicious. My favorite is apple pie à-la mode!


Ask Grandma



You know what they say: if your grandma can’t figure out how to navigate through your design, it’s too complicated. Elderly people tend to have less patience, ability, or desire to sift through tons of unnecessary information. That makes them perfect starting points for determining exactly what’s needed for your design and what’s simply taking up space. Let’s say, for example, that you’re testing a design for an mp3 store. Is your objective clear (instant download of mp3 files)? Will it be easy for your customers to find exactly what they’re looking for? Is the font size large enough for most people to read? Is there too much text? Too many ads? Is the shopping cart/payment method simple to find and navigate through? Simply put: is there anything standing in the way of your user getting exactly what he or she wants? If so, grandma might just get up and head down to the record store. (Assuming there still is one in her neighborhood!)


Remember to run your design past your grandmother (or your uncle, your great aunt Matilda, or anyone who’s not so “tech savvy”) and see if she gets it. If so, perhaps she’ll bake you a nice apple pie!


Your Thoughts?


So, what are your thoughts? Do you have an approach to simple design that has worked for you and your users in the past? Or perhaps you’re just hungry for some pie?

Awesome Creating Pixel-Perfect UI for iPhone Applications

Developing apps for the iPhone or iPad can be a tricky process. You need to understand not just the programming libraries, but also design standards and common themes in user interfaces. This entire skillset would require months of study just to build your first live app.


I realize this may seem intimidating, but we all have to start somewhere! And in this guide I would like to introduce the most important nuggets of information to designing 100% perfect layouts. The Apple developers guide is a good place to start, but the content can be very disparaging to those just getting started in the field.


Standard App Icon Specs


What a better place to start off than discussing the iOS icon sizes. You probably already realize that each published application has a small square icon, almost like a unique logo. Apple has setup a strict guide regarding which sizes you need and which devices they pertain to.



In the older iPhone 3g/3gs the screen resolution was limited at 320x480px. Which seems fairly large for a 3.5 inch display, however the iPhone 4/4S doubled this ratio to 640×960 which means each 1 pixel area represents 1 point on screen (2px regular). This is an important concept to understand when designing graphics for iOS devices.


Originally you only needed to create 3 different icon sizes – 512px for the App Store, 57px for home screen display and 29px for search results. But this number has nearly quadrupled to eleven different icons if you design for iPhone, iPhone 4 retina, and iPad. This gets confusing very quickly so I’ve drafted the small chart below.


App Store



  • • 512×512 universal


Home Screen Icon



  • • 114×114 on iPhone 4/4S

  • • 57×57 last-gen iPhone/iPod Touch

  • •72×72 iPad


Search Results and Settings



  • • 58×58 iPhone 4/4S

  • • 50×50 for iPad

  • • 29×29 iPhone/iPod Touch and Settings on iPad



Now you could stop here, but there is a newer type of document icon added in during iOS 4 and continued into iOS 5. If your application creates a custom document type this icon is applied on all devices, whereas iPad requires 2 separate versions. But of course if you don’t use this feature feel free to skip the additional stress!


Document Icons



  • • 320×320 iPad Large

  • • 64×64 iPad Small

  • • 44×58 iPhone 4

  • • 22×29 iPhone/iPod Touch


Building the Navigation Bars


Both the bars found at the top and bottom of each application contain nav links useful for traversing through the many different views. Depending on the type of interface these button sizes will change accordingly.


It’s important to note that although the iPhone 4 screen resolution is 640×960 the coordinate system for pixel placement runs at 320×480. Check out this online chart of standard sizes for iPhone UI elements. Everything is organized neatly, but I have copied over the important bits of info.



  • • Top Status bar – height 20pts

  • • Top Navigation bar – 44pts

  • • Bottom Tab bar – 49pts

  • • Tab Bar icons – 30×30 pts


The points over pixels unit sizing is helpful to conform with apps from older legacy devices. Sometimes icons from the classic iPhone will blow up to appear blurry on the iPad or iPhone 4, but generally the 326ppi resolution doesn’t distort graphics all that bad.



If you have the patience I recommend creating icon sizes at both resolutions. 326ppi and 163ppi are standard, and when you go to code the application there are markers you can apply to rule out which icons to use. Just append the prefix @2x onto your retina display icons to distinguish between these sets.


Important UI Elements to Consider


Aside from static interface elements the individual page views will update and change dramatically. These different views go by many names and generally include alternative smaller elements.


For example, in your settings page you may include a few toggle on/off switches based on user feedback. Additionally to design a login or registration form you’ll need input fields, as well as notification messages and most likely a submit button. These little tidbits add up over time and it can be messy during your initial mockup phases. Just remember that Photoshop is only a tool, and while you can meticulously perfect each page eventually you have to port these designs into Xcode.


I recommend playing around in your favorite apps and taking screenshots to go through later. These photos can be immensely helpful as you have perfectly-sized replicas to compare with your own work. Some different screens you may consider include UI controls, alerts and modal windows, keyboards, loading animations, and similar ideas.


Metrics and Units


Ultimately these guidelines are just helpful for designers just starting out. Apple does not restrict you in any way to follow these guides, and in fact plenty of iOS apps have been published with entirely different layouts. Think about the many games and side-scrolling apps which have no use for such defined interfaces.



But of the many unique apps out there I’ve found plenty of typical layouts inspirational as well. I really enjoy going through the Apple developer’s guide as they offer much greater insight towards standards in the industry. Don’t get discouraged if you are struggling to understand the exact pixel sizes, fonts, element names, and guidelines to follow.


iPhone apps are very confusing at first and seem to follow their own set of rules. Keep checking out any helpful UI layouts you find and build up inspiration through example in other popular apps. Additionally check out some of the handy resources I’ve shared below to keep you chugging along down the path towards radiant iOS application design.


Helpful Links



Design Gallery


To conclude I would be pleased in providing a few particularly unique examples of iOS design in the modern era. The social network Dribbble features some of the best designers all around the globe, and much of their work is inspired for Apple-based iOS devices. Check out the showcase below and let us know your comments or questions in the post discussion area.


Volunteering App



Custom Tab Bar



Calendar & Prayer Time App



De Lijn



iPhone UI – Users View



Stratus App for iPhone



Possible iOS Tab Bar



Add a Drink



Get a Pinch



FaceHole App Demo



iOS Messaging App



Tab Bar – Mail Inbox



Chat Window



Jokespace Log In



Neomelufen



iOS Time Line



iPhone App Login



Photoshop iPhone UI



Tab Bar Retina Display



Libra iPhone App



Stapp for iPhone



CSS Daily iPhone App



Social Wine App – Tab Bar



Social Wine App – Feed Display



Lime Green Application



iPhone App Leather



Home School on iOS


Awesome Getting Started Building iPhone Apps in Xcode 4.2

The newest version of Xcode comes packaged with a few noticeable interface changes. For beginners and intermediate users it can be difficult figuring out even the most basic functionality. And although Apple’s online documentation is well-written, it’s certainly not friendly for the average user.


So in this guide I’d like to put together some basic steps for building any iOS app. I’ll be focusing exclusively on iPhone & iPod Touch devices since iPad opens up a whole new chapter of research. You aren’t required to understand Objective-C or MVC programming to get started with this Xcode guide. But any dedicated iOS app developer will study at least some basic syntax guidelines.


I should point out that Xcode can only be installed on a Mac laptop or desktop running OS X. Unfortunately Windows and Linux users are unable to install the software, and the app source code will not compile properly. Otherwise you can download Xcode for free on Apple’s website or from the Mac App Store.


Creating a New Project


When first running Xcode you’ll be given a startup window with the text “Welcome to Xcode”. From here you can open recent projects or even create a new one. The first link Create a new Xcode project is what we want.


Xcode startup menu window


Click this and we’re presented with an options view. Each new project has a couple of setup screens to go through starting with the template. An “Empty Application” is the quickest way to start customizing from a bare-bones template. But for this tutorial let’s choose “Tabbed Application” so we have something to play with.


iOS tabbed application template design


On the next menu we need to give the application a name. Standards dictate you should not use any spaces and follow the guidelines of capitalizing each letter of a new word. I’ll use the product name newSpeckyApp and additionally change the company identifier to com.speckyboy.


New Speckyboy application product name


This identifier will not necessarily affect how your application runs. It only applies extra profile data so you can organize apps based on a company domain. Keep Device Family set to iPhone and make sure Storyboard and Automatic Reference Counting are checked. Hit next and select a directory to save the application source code.


Examining the Storyboard


Developers familiar with the older version of Xcode are expecting to work with .xib files. The old standard for iOS applications would create .xib files for each of the application views. The purpose of a Storyboard file is to consolidate all of these views together.


This not only makes editing your project a lot easier but it dramatically reduces the loading times within Xcode. The previous method of building views involved the Interface Builder software. However, this has been paired into Xcode so now you don’t even need it!


sample storyboard design for tab bar controller template


You’ll notice on this storyboard that we have 2 different views and a navigation item. The object on the far left is our tab bar controller which manages the navigation between only 2 pages(first view is loaded by default). You can edit the text on each page by double-clicking the elements. These are generic UITextView objects which control the display of text.


Running in iOS Simulator


Before we tinker in more detailed areas let’s see how the generic tab bar application runs. Xcode includes another piece of software called iOS Simulator which behaves as a native iPhone right on your computer.


To build and run your application just click the circle button in the top left corner, or alternatively CMD+R as a shortcut. This pops open the simulator and you’ll catch a glimpse of the app loading into view. The only core functionality is clicking between both view pages on the bottom tab navigation. It’s not much, but it’s certainly a great template to start with.


iOS iPhone application simulator


If you click on the iPhone home button the simulator will return to your springboard. From here you’ll notice that your application comes bundled with a plain white icon. By default this is the standard icon for all iOS projects – and it’s very boring. Let’s look into the process of customizing your app with a new icon.


Design for Apple Specifications


When we talk about graphics for the iPhone it’s important to go over Apple’s set of rules. Especially when in the realm of application icons there are strict size limits you should adhere with.


The largest icon size you’ll need is 512×512 pixels which is only featured in the iTunes App Store profile. It’s a good idea to keep this size in mind if you ever plan on publishing into the App Store. But for just a practice demo app we can get by without this larger template.


Tweetbot profile icon on the App Store


Check out the list below for a more complete writeup. We only need to include the 57x57px icon sized for standard iPhone & iPod Touch displays. But it’s wise to consider all of the potential options:



  • • 512×512 – iTunes Artwork

  • • 57×57 – Standard iPhone/iPod Touch

  • • 114×114 – Retina iPhone 4/4S

  • • 72×72 – iPad


There are other iOS sizes used for lesser-important sections. These include the Settings view and spotlight search, as well as custom document types. I’ve written up a full list of sizes in a previous iOS design article. But for now I’ll just create a 57×57 square icon design with the Speckyboy logo.


Attaching an App Icon


I should also point out that all application icons should be saved as square .png files. The rounded corners and gloss effect are added once the app is compiled and running on an iPhone(or simulator).


First save and download the icon file I linked above. You’ll want to drag this from Finder into your Xcode project window. A menu comes up asking if you want to copy the file over, just click Finish and the png should appear in your project navigator on the left side. I move all my icon files into the Supporting Files group to make it easier to manage and much more organized.


Before this icon will appear we need to edit the application’s .plist file. This should be located inside the Supporting Files group in the format %AppName%-Info.plist. So in my case the file is named newSpeckyApp-Info.plist. Look down through the Keys list until you find the row labeled “Icon files”.


.plist file edited with Icon.png file


This will contain an array of file names which point to each of your app icons. The naming conventions are also fairly standard coming right from Apple. Icon.png is used for the regular iPhone while Icon@2x.png is displayed on retina devices. Click to select this row and then click on the small arrow icon to the left. This expands the array open so we can see there are currently no values.


demo icon design for Speckyboy app tutorial


To change that click on the plus icon over to the right side. This adds a new array value with an empty String. Enter Icon.png for the value and save any changes. Now build and run the application to check out the effect! If the app launches too quickly just click the home button again to view the springboard of icons.


Helpful Resources



Conclusion


This overview should get you comfortable with putting together a very basic iPhone application. We didn’t spend any time going into Objective-C since the programming can get intense for beginners. But I recommend skimming some light material on the topic to slowly break yourself into the language. Additionally if you have thoughts or questions on the article please share with us in the post discussion area below.

Awesome Flat or Skeuomorphic is the Wrong Question. It’s About Satisfaction.

A great deal of digital ink has been spilled of late regarding the relative merits of Flat or Skeuomorphic design. On one side of the spectrum, both Microsoft and Yahoo! are embracing elements of Flat Design while Apple famously incorporates facets of so-called skeuomorphic design across its application portfolio.



I’ve been thinking about this quite a bit recently while working on a new app project for an e-commerce provider. I kicked off the visual design process by mood boarding a spectrum of styles from sites like Pinterest, Dribbble, and Designspiration.


The point of this process is to determine what style appropriately conveys the attitude and personality of the app itself. The intended impacts of each theme are not mutually exclusive—in fact, the Hybrid direction we ultimately recommended deliberately borrows meaningful aspects of each.



Literal:
This theme takes the sense of layering and space a step further, depicting specific physical objects with three-dimensional relationships to their environment. Objects may be rendered with photo-realistic shading and texture effects, implying depth of space and physicality. These effects convey interactivity and evoke a sense of immersion and delight.



Minimalist:
The opposite extreme is the flat design aesthetic, reducing elements to their simplest essence. Space and relationships are defined by blocks of color or negative space, with big target areas for actions. Eliminating embellishment of the UI elements allows the tool to fade into the background. This allows the emphasis and emotional weight to shift to the meaningful, user-driven content.


This got me to thinking about the classic Handbook of Usability Testing, by Rubin and Chisnell in which they describe usability as a combination of:



  • Usefulness

  • Efficiency

  • Effectiveness

  • Learnability

  • Accessibility

  • Satisfaction


As a visual designer, my role extends beyond basic functionality to also address aspects of confidence, perceived value, delight, and emotional engagement: The “Satisfaction” piece of the Usability equation.


The goal of visual design should always be to facilitate usability, which could be qualitatively measured through research (but usually isn’t). Beyond mere functionality though, the presentation layer serves intangible, instinctual, and emotional functions as well. The chosen design style is an aesthetic choice, not a functional choice. It is meant to communicate something deeper about the character of the product. We’re talking art, not science. What is the personality? What does it feel like? What memories or cultural experiences does it evoke?


Consider these two houses. They each perform the same function equally well. They both keep us dry, have a place to watch TV with our loved ones, and let us sleep well at night. I prefer the modern one, while others would be more comfortable in the ugly one. Both are acceptable solutions, but they are undeniably different.



Don’t get me wrong: I am not advocating or defending the popular ‘skeuomorphism’. My point—and one that most dialogue about the issue misses—is that Flat or 3D styles are an aesthetic choice for emotional reasons, not an accessibility choice for functional reasons.


Yes, in some cases a physical real-world metaphor may help novice users grok what the thing is. Apple has long pushed physical simulacrum, from the original Mac desktop, files, and folders, to the infamous ripped notebook pages and leather stitching. The primary intention though is an emotional appeal. As Steve Jobs himself put it in Fortune magazine:


In most people’s vocabularies, design means veneer… to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.


People have rightly called them out for illusions that are inappropriate or too literal, and it’s encouraging that a growing portion of the internet-commenting public has become so UI literate that many of these flourishes have become superfluous.


Overdoing it to the point of ridiculousness though doesn’t discredit the concept of visually implying depth, space, or tactile material. These qualities often do enhance usability by creating a sense of order and hierarchy. What is “in front”, which bits are clickable vs read only, what is most important on the screen, etc.


Appropriate use of visual metaphors and dimensional effects can both enhance usability and convey mood and attitude. Sure, the “authentically digital” flat style is en vogue, but extreme reduction by itself doesn’t alleviate usability issues, and may introduce new ones. Categorically abandoning visual cues and the tools of visual language for the sake of authenticity or current trends is dogma, not design. It may suit the particular goals of your application, but it doesn’t necessarily further the ultimate objective of usability.
Some suggested guidelines for deciding if a design style is appropriate:



  • Does it help or hurt usability (Usefulness, Efficiency, Effectiveness, Learnability, Accessibility, or Satisfaction)?

  • Does it highlight or distract from the important content or workflow?

  • Does the style communicate something important about the brand?

  • Will it hold up over time? Will it look dated in a year?

  • Do you have to make exceptions to the metaphor to make it work (i.e., scrolling on paper book pages)?

  • What else in the world shares that style? Does that association say what you intended?


My overall point is that neither Skeuomorphism nor Flat Design is inherently “better” or more usable. It depends entirely on how these styles are used, and if they serve the goals of the work.


It’s a nuanced and subjective question that depends on the intent and the implementation. There is no absolute answer so every design needs to be tested individually to determine how it performs. The user experience is about more than simple usability: it’s about how the user feels about what they are using. Visual design is a powerful tool for guiding that aspect of the experience.

Copyright By Awesoome.com , All Rights Reserved. Blogger tarafından desteklenmektedir.