June 22, 2012

Techweek Chicago 2012 - Android app

CyberWalkAbout has released an Android app in cooperation with popular social tool GetShortList.com which is the official app for Techweek Chicago 2012. The Android app is a wrapper to the mobile website, but the fully native app is being considered.

The app allows users to have Shortlist always handy on their phone's screen and to conveniently share Shortlist, for the visitors to Chicago the Map feature will provide directions to Merchandise Mart.

Shortlist apps help professionals maximize their time and opportunity at large events. Proprietary matching technology helps attendees and businesses make the right connections based on their goals, professional background and social graph. We call it "accelerating serendipity." You'll call it "amazing."


Shortlist is also an information hub for essentials like sessions, exhibitors and maps. Everything you need to make the most of your time and opportunity is now at your fingertips. So the only question left to ask is, "Who's on your Shortlist?"


Keywords

Techweek, Chicago, social networking, professional, events


Download the app today: http://bit.ly/TechWeek4Android












June 18, 2012

How to prepare design assets (UI) for iPhone development

From our experience the ideal case scenario is when the developer and the UI/UX designer work hand in hand. Meanwhile since, many companies have their in-house design teams, and either want to save on design, or feel more comfortable working with their team, here are the requirements for the deliverables.


1. Press-able elements should have at least 2 states, regular and pressed, the 3rd optional is in focus, used mostly for the listings, or when an element has on/off state. For example in camera apps, flash on/flash off which is different than pressed state which user sees only for a millisecond, on actual press.


2. Name the files properly.
a. According to screen size: naming should be identical, for retina display @2x is added to the naming. Every single element needs to be prepared for both screen sizes:
  • btn_item@2x.png
  • btn_item.png
b. For every different state of the same element:
  • btn_item.png
  • btn_item_pressed.png
  • btn_item_on.png
  • btn_item_off.png
c. Add screen title to the file name, unless the asset is being reused throughout the application.
  • btn_homescreen_item.png
  • btn_settings_item.png



3. Always design for the bigger screen
The latest generations of the iPhone, comes with a 640x960 px, 326 dpi retina display. The previous generation has a screen of 320x480 px, 163 dpi, (notice exactly 50% smaller). So let's go through the process of preparing the Close button from this screen:
a) Make sure to have both states, regular and pressed:



b) Select all the layers pertaining to the element you are saving, right click and Convert it to Smart Object.

c) Right click on the new Smart Object and export it.

d) Open the exported file, select the layer with the element you want to save. 
  • hide the layer effects in order to check the margins
  • use the Direct Selection Tool to select the shape points
  • move every side in any direction you consider appropriate, in my case I moved to the right the 4 points shown in pic. B below
  • compare the right margin on the pic. A and pic. B you should see the difference in crispness.





f) When you are happy with the margins, bring back the layer effects, go to File > Save for web & devices, in file format choose PNG-24, preserves transparency and is optimized hit save, choose your location and name properly, in our case btn_close@2x.png:


g) now we need to save the same button for smaller screens, go to Image > Image Size, and choose resolution 163 instead of 326 press OK. Repeat steps d and f, skip the @2x suffix in the naming.
h) repeat steps d-g for the pressed state of the element if present.

Attention: All the files should be in the same folder. Avoid using text on the graphics, unless you have very good design reasons to do so (ex. impossible to replicate programmatically and important for the design style ). Do not use text on the reusable graphics on which the text copy may differ from screen to screen.

4. Prepare Guidelines for the developers with the instructions on file usage, fonts, colors, spacing.

Attention: If you provide general guidelines throughout the app, like text colors, general use of text, you do not have to be this detailed as i n the example above on every screen. Guidelines should be provided for every screen of the app. If you decide to skip this step, you cannot expect an exact implementation of your designs.

5. Zip the assets folder together with the guidelines in pdf format, the layered psd file of the screen with appropriate naming (optional), append the date(MMDDYY) to the archive filename, and send.

6. Be consistent in file naming. If there are changes to the UI, name the files exactly as the once to be replaced. Add the new date to the zip and send.

June 7, 2012

Food Tracks app in Several More Cities!

People have been tweeting about local food trucks, books were written on the subjects, but now the food trucks have a chance to have their voice above the crowds and have their location known on the map.

Food Tracks application from CyberWalkAbout.com allows people follow their food trucks and if the owner chooses so, to see that truck on the map. The app made appearance in several American cities, and now it covers hundreds of trucks. The truck owners are eager to join the service because it is a free advertisement for them - all they have to do is turn on their geo-location when they tweet. Yes, it is absolutely free!

The app made their appearance in following regions:


- Atlanta, GA
- Bay Area / San Francisco / Silicon Valley, CA
- Chicago, IL
- Dallas, TX
- Houston, TX
- Las Vegas, NV
- Los Angeles (LA), CA
- Miami, FL
- New York City (NYC), NY
- Orange County, CA
- Phoenix, AZ
- Portland, OR
- Seattle, WA
- Washington, DC

Download the app on Google Play Market: http://bit.ly/FoodTrucksApp

If you are a truck owner you should definitely join in by writing to info@CyberWalkAbout.com





Food Trucks Submission FORM




June 6, 2012

CouponCabin mobile app exceeds 12,000 downloads in first 2 weeks!

CouponCabin mobile app  exceeds 12,000 downloads in first 2 weeks with the average rate of daily download is on the raise as the users are learning of this new, great application. The set of great social sharing features contributes to this rapid growth as users share their favorite couponing offers with friends. 


The CouponCabin app was designed and created by CyberWalkAbout, a Chicago-based mobile development agency that specializes in state-of-the-art user experience design for Android and Apple iOS.

Uki's Google Java Technology blog