Tips & Tricks: How to Create Apps with a Custom Feel

1 Apr

If you don’t have the budget right now to create a unique custom design for your app, don’t fret. Our builder was designed to be flexible and lets you tap your creative spirit! You can easily give your app more punch by taking advantage of the app builder’s capabilities and enlisting your resident image maven.

Creating Unique Apps

A site list graphic is created as one image, but is designed to give the appearance of multiple buttons.

1. Make a unique site list by using images with touchable hotspots.

Create an original image graphic for your site list that breaks down your app content into specific categories. In the builder, add the Image Map widget to the desired page and upload the graphic. You’ll then be able to draw touchable “hotspots” over each category and turn each section into an interactive “button”. Since you are creating this image specifically for your app, you can choose to graphically represent the categories as circles, squares, rectangles, even icons–it’s up to you!

Check out a great example created by the Cranbrook House and Gardens. The Home page of their app features an image map with touchable hotspots.

2. Make those site lists feel even more custom by using images with a transparent background.

Consider creating a site list graphic with a transparent background. In the example below, the image on the left was created with a textured blue background and saved as a JPG. The image on the right was created with a transparent background and saved as a PNG file in order to preserve the transparency. Note how using a transparent background gives the impression the category “buttons” are floating on the background of the app–as opposed to obscuring the background–and leaves more of a custom feel. Again, the client is utilizing our Image Map widget to turn each category into a touchable hotspot to drive the user to the appropriate page in the app.

Mobile Tour Example Home Page

A client uses special graphics and the image map widget to make their Home page pop.

3. Add text or logos to your images.

Strategically adding your logo or app name to strategic images in your app can make a huge impact on its overall look and feel. In the image above, the client added text to their home page image using image editing software. Because the client was able to implement fonts from their organization’s style guide, the end user is instantly presented with the client’s branding. On this particular sample, the client turned off the page padding in the builder to allow the image to span the full width of the page, which presents a different feel as well. This setting can be changed on a page-by-page basis by clicking on the page header in the builder.

4. Create transparent banners in your app.

Using image editing software, you can easily mount graphics you’ve created for other purposes as a way to bring in your branding. In the examples below on the left, the Canadian Museum of Nature has reused an existing image designed for a printed map and centered it onto a transparent banner. On the right, a client’s logo is used instead. In both scenarios the banner is created at 1024 pixels wide, with the image centered, and saved as a transparent PNG. The transparency of the file, and the fact that the image is centered–rather than running the full width of the page–presents a more refined feel to your app. If you create a banner for your logo, you can play with the height of the file and reuse it throughout your app–taller banners at the top of a key pages like a Home or About Us, or shorter ones subtly placed at the bottom of each page in your app. For more info and examples about sizing banners, visit our Learning Center.

Images mounted and centered onto transparent image banners lend a custom feel to your app.

Images mounted and centered onto transparent image banners lend a custom feel to your app.

 

Incorporating some of these ideas can transform your app and turn one of our stock themes into one that reflects your organization’s identity. If your organization does not have image editing software, you can always use free ones like Pixlr or Photoshop CS2.

Did you learn any tricks while building your app? Tell us about them!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: