20 Aug 2018

RealEyes Tech Roundup

Week of August 20, 2018

From time to time, RealEyes Media will be sharing a tech roundup of cool products, technologies, and tools we recently learned about and dig. Feel free to reach out to us with questions or share some experiences of your own!

Contact us to learn more about our product and services.

Callbags

John Gainfort, Senior Developer

With the introduction to Angular 2 a couple of years ago I was introduced to the wonderful world of Reactive Programming with the RxJS library. I was immediately hooked and had to learn more. Through my research I found Cycle.js, a Functional Reactive Framework, which used another reactive library called XStream. XStream was developed to remove some of the bloat that the RxJS library had by only including what was thought to be the most necessary operators instead of the 100+ that RxJS carried by default. This however still had the same flaw RxJS had and that it is only maintained by a handful of developers and it could still include more code than a user was using in their project. Andre Staltz, the creator of Cycle.js and XStream, then created the Callbag spec.

A Callbag is simply a definition of a function that handles callbacks in a functional reactive way. The idea being that anyone can create a function that adheres to the Callbag spec and open source it as a library. This removes the burden of maintaining larger libraries like RxJS and the steep learning curve of creating an open source project for the first time. This also enables the ability to only include the desired callbags into your projects bundle through either single imports or a collection of imports. In my opinion this new idea that you are no longer dependant on oss maintainers to fix bugs or add new features will lead to a better development experience. When the need to change or add a new Callbag arises, simply create your own and release it to the world. I am not alone in this opinion and can be seen with the boom of Callbag libraries created within the 5 months since it has been introduced. I urge everyone to read up on this new spec, dive into the many operators created by Andre and the many other authors, and then create your own.

QUIC

John Cohen, Developer

As time has passed, computers have gotten faster and faster. The raw hardware, as well as our internet connections, but, there has been a lot of buildup of latency. The web today is laggy, even though it is very fast. It takes a long time for systems to establish connections. With the way trends in design of web applications aregoing, it is only going to become even slower as every application you use has to talk to more and more applications to do anything.

One thing I am keeping my eye on is the rise of the QUIC (Quick UDP Internet Connections) protocol. This is a replacement for TCP which underpins the standard HTTP/HTTPS connections that most websites rely on. Google has been developing the QUIC protocol for a few years now, and it has started to see some adoption in some locations internally in Google services (and their Chrome browser), as well as from some big players like Akamai.

QUIC addresses the multiple RTT (Round-Trip-Time) of establishing connections that TCP has (SYN, SYN-ACK, ACK), which adds latency that can become a problem as more and more connections to different systems are required. Add additional RTTs of overhead for every connection established that is HTTPS.

QUIC cuts out that overhead. It also describes the encryption used, instead of needing another layer for encryption, like HTTPS needs TLS.

It may still be years before the internet at large switches to a different protocol, but I am looking forward to the relative speedups when we migrate away from TCP to something faster.

360|AnDev

Lora Kulm, Mobile Developer

360|AnDev, a local Denver Android conference, was a couple of weeks ago, and they filled two days with great speakers and amazing content ranging from advanced Kotlin techniques to learning how to effectively work with designers. One of my favorite talks by Yun Cheng covered the process of splitting up an existing code base into an MVP architecture, and had some great tips and explanations of benefits, as well as the underlying concepts behind the architecture. It was a great conference and I had the privilege to connect with talented Android developers from all over the world. Looking forward to the next one!

Share this
24 Jul 2018

Docker on Raspberry Pi 3

Big Upgrades for Little Devices

By Marcy Nugent, DevOps Engineer

Just look at that tiny server

Developing for Raspberry Pi inspires a sense of wonder at what can be done with tight resources; many services that once required a cluster of expensive servers in a data center can run without issue on this $35 tech toy. On the other hand, the ubiquity of x86 processors makes running common software a challenge – try finding up-to-date versions built for Raspbian (the default OS choice for the Pi) and you’ll quickly find yourself scouring Stack Overflow articles and old blog posts. You can spend hours looking for someone, anyone who has this thing working already. Once building from source seems like the easy way out, you may rethink whether this $35 computer is worth it.

xkcd wrote my biography for me

Docker to the Rescue!

Enter Docker.

Now that Docker on ARM has matured into a usable product, it’s trivially easy to install the latest Docker CE engine on a Pi. Once that’s complete, we can really get rolling on the Pi and deliver applications with the same methods you would use on any other device. Using a Dockerfile, we can codify the heinously detailed work of compiling an app for ARM without utterly unmanageable Rasbian shell scripts, ancient apt-get versions, or typing “chmod +x” for every last install script.

Unless this is your idea of fun

The fantastic folks over at Resin.io have done the heavy lifting for us with their ARM-emulating base images, so we can build our software without using a Pi, and simply deliver it via Docker Hub or Quay.io through a “docker pull” command. Check out the RealEyes Github for a Dockerized WireShark Dumpcap implementation and check out our Quay.io repo for the public image, so you can always have a Docker Repository on Quay.

Contact us to learn more about our products and services.

Share this
31 May 2018

RealEyes Tech Roundup

Week of May 29, 2018

From time to time, RealEyes Media will be sharing a tech roundup of cool products, technologies, and tools we recently learned about and dig. Feel free to reach out to us with questions or share some experiences of your own!

Lora Kulm, Mobile Developer

Google I/O, Google’s annual developer conference, introduced so many new things this year, with a continued focus on AI and machine learning. For developers, a big announcement was the conglomeration of the support libraries and architecture components into Android Jetpack. Jetpack takes existing libraries and commonly used Android features, and combines them into one easy-to-use collection that provides guidance for UI, architecture, and features. Also announced was a virtual assistant that calls businesses and schedules appointments for you called Duplex, updates to Assistant and Lens (including a super cool Google Maps integration), and the Android P public beta.

Phil Moss, Senior Developer

Earlier this month I had the opportunity to attend Streaming Media East in New York City. I had been to Streaming Media conferences before, but this time, I got to speak! There was an all star cast of presenters at this conference, including Google, Wowza, Bitmovin, Verizon, Facebook, Netflix, and many more big time folks. After three days of seeing presentations, I was overloaded with some great information, but my absolute favorites involved low latency video, new ways of live encoding, learning how to analyze objective and subjective video quality from none other than SSIM and Netflix, and, of course, our very own, Jun Heider, who did a great talk on video AI platforms. It was an honor to be involved with this conference, and have the opportunity to share some of the knowledge and experience I’ve gained over the years working with RealEyes. I am looking forward to more just like this.

Paula Gettman, Operations Analyst

JIRA applications from Atlassian are awesome, right? YES, especially IF you know how to use them properly to get the most out of them for your business. One way to go from a JIRA beginner to a JIRA master is with the Expium 3-day Jira Boot Camp, and recently, a coworker and I went on this journey. I say journey because it was over 22 hours of learning about JIRA Software and JIRA Core, starting with the most basic JIRA overview to hands-on workshops configuring workflows, projects, agile boards and more. For me personally, the most complex aspects of the training were the workflows and screen schemes. Luckily, each student has the opportunity to dig deep and explore each of these topics, and others, in what I believe to be the greatest part of the training: the workshops! Getting a chance to actually put what we learned into action was a fantastic way to make sure we retained the information and understood how to best apply it to our RealEyes JIRA instance which is specific to our business goals. Luckily, the training course comes with two expert instructors who answered literally hundreds of questions for us and other students in the class. That being said, shout out to our instructors Johnson Wang @jonccwang and Scott Price! As an online trainee it was nice to have an instructor dedicated solely to us, and Scott did an excellent job.

Contact us to learn more about our products and services.

Share this
03 May 2018

RealEyes Tech Roundup

From time to time, RealEyes Media will be sharing a tech roundup of cool products, technologies, and tools we recently learned about and dig. Feel free to reach out to us with questions or share some experiences of your own!

Jun Heider, Director of Technology

While walking the halls of NAB Summit, I ran into a startup – Valossa – that built its own AI and ML stack to index and analyze video. They have a 300 minute free trial and a top-notch front-end to review the AI analysis that rivals Microsoft’s Video Indexer. You should check them out at http://valossa.com/.

Frances Janz, Quality Assurance Engineer

The QA process involves many activities that, preferably, should be tracked and recorded. Up until now, we’ve been tracking everything via spreadsheets in Google Drive. Requirements change and new features are being added all the time. Unfortunately, spreadsheets are cumbersome, hard to update, and easy to lose track of. Enter the test management system — in our case, PractiTest! PractiTest allows us to import our old test cases straight from Google Drive, break items out into separate steps that can be passed/failed individually (so we know exactly what part of a test failed), run reports that can be shared with our clients on all of our testing efforts, track everything we’ve done recently in handy charts, and create Jira bugs straight from our test screen. The last feature automatically includes the test steps and results in the bug report, so the devs know exactly how to reproduce it. No more cross-team confusion!

Marcy Nugent, DevOps Engineer

Instead of using a WordPress or Joomla system that does a thousand things halfway, Ponzu does the pure Content Management with exactly the functions needed for editors and contributors. The code comes with generators for quick developer iterations to easily format how the articles/content/posts/etc. are added, and Ops doesn’t have to manage a heavy server system with tons of individual components to update and manage. With two shell commands, a blog entry system can look like the below:

 

Share this
01 Apr 2018

Announcing Thrift Shop Streaming

Your Past is Our Future

Short on cash but long on inspiration for your media community? RealEyes Media is pleased to announce the next big thing for budget streaming: Thrift Shop Streaming as a Service!

How it Works

Using our proprietary VHS to 4K HLS transcoding system VHLS™, get ready to stream your weird library of 10¢secondhand VHS tapes to the world!

Insert our extra-fancy VHLS™ video player to your Geocities, MySpace, or Xenga page to wow hundreds of your friends, and watch those :poop: ripple through your comments. It even works on mobile, so your friends can scatter :poop: from anywhere!

The Revolutions Start Now

Not sold yet? Check out all these Features:

  • 4k Upconverting for Static Lines

  • Monetize your stream with retro ad insertion

  • Auto-rewind plugin included (hardware available wherever lesser goods are sold)

  • Auto-unspools the VHS periodically to maintain realism, and continuously delivers to the nearest Interstate median once completely unrolled *Note: This feature cannot be disabled
  • Batteries not included

Interested?

Contact us via fax at 1-888-VHS4YOU, and write the coupon code #aprilfools2018 in a purple sparkly gel pen to receive BIG discounts! Broken printers are standing by.

 

Share this
30 Jun 2017

Mobile Navigation Strategies

If you build it they will come…that is unless they can not find it. The navigation on your website or mobile application is the map your users have to guide them to all of the features and pages you have built. If you have poor navigation your users may not be able to find what they are looking for and it might as well not exist. In this post, we will go over a few good mobile navigation strategies, how to use them and common mistakes developers make when implementing their mobile menus.

The Side Bar Menu

Let’s start with the sidebar menu. The sidebar menu is a simple solution for navigation on a responsive website. The sidebar menu starts off as a top bar navigation, once the browser size reaches a specified width the navigation transforms into an icon that can be clicked to toggle a sliding menu. This menu is easy to install and customize.

Below is an example of the sidebar menu.
Sidebar Menu

 

Advantages

  • The sidebar menu allows the user to view a portion of the content on the page they have navigated to without closing the menu. This happens because part of the page is exposed when the menu is opened.
  • AngularJS Material SidebarIf the menu you are using has sub-menu items the sidebar menu is probably the best fit for your project. The sidebar menu allows for drop downs to be embedded in the menu. This is why the sidebar is the menu of choice for many UI framework websites like Angular Material that  have a large selection of menu and sub-menu items.
  • The sidebar menu is an easy transition from a full web menu, once the screen is too small for all of the menu items to fit the breakpoint can be set to transition the UI to just a menu icon.

Common Mistakes

  • Setting the breakpoint too late can ruin a users experience on your site. If you are using the sidebar for responsive web design make sure that your media queries are set to trigger the menu before your menu options run out of room and collapse to the next row. In the example below, the break point is set to small and the menu overflows out of the menu bar. To avoid this make sure you test at different screen sizes. If you add additional items to your menu be sure to go back and test again.

Sidebar with incorrect breakpoint

Sidebar with correct breakpoint

  • Camouflaging the menu icon is a common mistake designers make when using the sidebar. If your menu icon does not stand out or if it not in a common location the user may not see it. In the example below the menu icon is one of the last things your eye sees. Your eye is pulled to the left corner where the menu button normally is. The extra icons and dull color also contribute to the lack of visibility. Incorrect positioning and sidebar menu focusCorrect positioning and sidebar menu focus
    To avoid this, remember that in the hierarchy of your design the add button and the menu both need to be seen. You should move the menu to its traditional position where users will expect it. You can also make it a bit larger and brighter so it can be seen clearly within the rest of the design.

UI Frameworks with Sidebar Menus

 

Drop Down Menu

Next we will look at the dropdown menu. The dropdown menu is a very common solution for mobile menus. The transition to this design is similar to the sidebar. When the menu items no longer fit in the menu bar an icon replaces the text.This is one of the most commonly used mobile navigation choices because it is easy to create and mobile users have become accustom to this type of menu. You can see an example of the dropdown menu below.

Dropdown Menu
Advantages

  • The dropdown takes up less space than the sidebar menu so users can see more content while navigating. This is why the dropdown is good for smaller amounts of menu options.
  • The dropdown menu has more options for placement. It can come from the center of the page, or pop up from the bottom. The sidebar is limited to the left or the right.

Common Mistakes

  • Dropdown MenuCutting off the menu is a big mistake that can be made with a dropdown menu. Be sure to give your menu enough room to show all of the navigation options. Just like any other element in your design the dropdown needs proper spacing, if all of your other graphical elements are in a grid made sure your dropdown follows the same rules.

UI Frameworks with Dropdown Menus

Tabs Menu

Last, let’s take a look at the tabs menu. The tabs menu shows a few menu options with the currently selected option highlighted or underlined with an accent color. This menu option is good for small menus or for sub-menu options on a main menu page. It is not recommended to use this menu on mobile for your main menu if you have more than four options. This menu requires a minimum amount of space to view the menu options. This style of menu has become popular on applications where multiple sub-pages can be scrolled through on a main page in the application.

Tabs Menu

Advantages

  • The main advantage to using the tabs menu is its simplicity. Applications with just a few options do not need to waste space with large dropdown or sidebar menus when you use this option.
  • The tabs menu does not cover any of the content when you are navigating, so the user can see all of the pages content as soon as they arrive.
  • The most common use case for the tabs menu is to navigate through sub-pages or different types of content in a section of the application. This is used alongside with another menu option like the dropdown or sidebar. You can see examples of this when you look at popular applications like Yelp or Venmo.

Venmo and Yelp Tabs Menu Examples

Common Mistakes 

  • The most common mistake people make with this menu is putting in too many options. If you have too many options on mobile you risk having your menu get cut off.

UI Frameworks with Tabs Menus

Conclusion

There are a number of options to choose from when you are creating the navigation for your project. You need to keep in mind how many options your user will be choosing from, how important it is to keep the page content visible when navigating, and the screen sizes your users will likely be using. These considerations will allow you to choose the most effective navigation for your mobile application.

Share this
16 Jun 2017

Using PhoneGap Plugins to Create a Splash Screen Part Two: Using PhoneGap Plugins

PhoneGap Plugins Logo
Part one of this blog series, Using PhoneGap Plugins to Create a Splash Screen Part One: Creating a Splash Screen discusses how to design splash screens for mobile applications. In this part of the series you will learn how to use PhoneGap plugins to apply the screen you created. PhoneGap provides a series of core plugins that help developers take advantage of a mobile device’s native features such as the camera or ability to vibrate. There are three places you can look for pre built plugins. You can search npm, git repositories or PhoneGap’s plugin repository. In this post you will be using a plugin from PhoneGap’s base repository, the splash screen plugin.

Plugins need to be implemented differently for each platform so you need to be sure to read into how to how apply the one you have selected correctly for the device you are working on. In this example you will be installing the splash screen plugin on an android device.

Step 1) Importing your Plugin

You will import the plugin that you have chosen into your config.xml file. You need to include the plugin name, spec, and source. The spec is your plugin version, your plugin will work without this, but it is highly recommended that you include the version. The source for plugins from the PhoneGap core where the splash screen is located will be “pgb”. The import script for the splash screen will look like this once all of the parameters are added:

<plugin name="cordova-plugin-splashscreen" spec="~4.0.2" source=”pgb” />

Some plugins require you to add in a reference to the javascript files. This is not the case with most PhoneGap core plugins like the splash screen plugin. If you are required to reference the files you will not be adding them into your project when you upload it on PhoneGap Build. The files will be automatically injected by PhoneGap and adding them in advance will cause problems with your build. Read the documentation for your plugin if you are using a different plugin, as mentioned before each one is different.

Step 2) Adding Your Platforms

Once you have loaded in your splash screen plugin you will need to specify the platforms you are targeting. In this example you are using Android. To do this you will add the following code to your config.xml file.

 <platform name="android"></platform>

If you would like to add in other platforms the format is the same. There is no limit on the number of platforms you can use.

Step 3) Add Your Screens

The step is to add in your splash screen files. If you read part one of this post you will be using the png files you created. Nest them into your platform tags. You will have one default screen and a landscape and portrait screen for each pixel density.

    <platform name="android">
        <splash src="splash.png" />
        <splash src="res/screen/android/splash-port-ldpi.png" platform="android" density="port-ldpi" />
        <splash src="res/screen/android/splash-port-mdpi.png" platform="android" density="port-mdpi" />
        <splash src="res/screen/android/splash-port-hdpi.png" platform="android" density="port-hdpi" />
        <splash src="res/screen/android/splash-port-xhdpi.png" platform="android" density="port-xhdpi" />

        <splash src="res/screen/android/splash-land-ldpi.png" platform="android" density="land-ldpi" />
        <splash src="res/screen/android/splash-land-mdpi.png" platform="android" density="land-mdpi" />
        <splash src="res/screen/android/splash-land-hdpi.png" platform="android" density="land-hdpi"  />
        <splash src="res/screen/android/splash-land-xhdpi.png" platform="android" density="land-xhdpi"  />
    </platform>
Step 4) Customize Your Splash Screen with Preferences

Now it is time to customize your splash screen. The splash screen plugin gives you a few different preferences to work with. The following are a few examples that you can use.

SplashScreenDelay
The SplashScreenDelay lets you add a delay to the amount of time before the splash screen is hidden. This is set in milliseconds. It is useful when you want to expose users to your branding but your application has little or no loading time. This can also be set to 0 to force your screen to automatically hide.

 <preference name="SplashScreenDelay" value="3000" />

FadeSplashScreen and FadeSplashScreenDuration
FadeSplashScreen can be set to true to give your screen a fading effect as it transitions to the application. You can set how long this transition takes with fadeSplashScreenDuration, also set in milliseconds.

   <preference name="FadeSplashScreen" value="true"/>
   <preference name="FadeSplashScreenDuration" value="750"/>

ShowSplashScreenSpinner and SplashScreenSpinnerColor
Lastly you should add your spinner. You learned about the parts of a splash screen in the first part of this series. Now is when we add in our spinner. This is set with ShowSplashScreenSpinner. You can also change the color of your spinner to go along with your application by using SplashScreenSpinnerColor.

   <preference name="ShowSplashScreenSpinner" value="true"/>
   <preference name="SplashScreenSpinnerColor" value="#ffffff"/>

Step 5) Add the Splash Screen to your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project. Once you have done this click on Rebuild all. Download the new version of the project to your android device. Open up the application on your phone. You will notice you are now being greeted by your new splash screen!

Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate-splashScreen.apk

Share this
06 Jun 2017

Virtual and Augmented Reality in 2017: A Quick Look

Project Tango Logo

Digital media and applications are escaping their confines of 2d platforms with augmented and virtual reality. You may have been hearing a lot about virtual reality and augmented reality lately with Google Daydream Logotechnology like Microsoft’s HoloLens, Facebook’s Oculus Rift and augmented reality phone games like Ingress and Pokemon Go becoming more popular. Over the last year we have also seen an explosion in the amount of AR and VR ready phones to go to market. Last November the first augmented reality enabled phone was released, using technology from Google’s augmented reality program, Project Tango. Even more phones already come ready to be used with Google’s VR tech, Daydream.

What does this mean for the future of phone applications and the way we view media? In this post we will discuss what the difference between augmented and virtual reality is, how they work, where they are being used now and where can expect to see more.

 

Augmented Reality versus Virtual Reality

The first thing we need to understand is the difference between augmented reality and virtual reality. Augmented reality and virtual reality are commonly confused for one another, so let’s start by setting the record straight. While they are very similar there are a few key differences.

Augmented reality uses the real world as the environment for the user’s experience. Augmented reality uses virtual objects simulated in an already existing space. An example of how augmented reality would work is the following. You are in your living room and you would like to see what a new blue chair would look like next to your couch.  You download a furniture app that utilizes AR technology, you turn on the application’s camera and it shows you your living room with the new chair in the middle of it. Augmented reality enhances the world we live in through the phone’s camera, but it is still easy to tell what is real and what is being simulated.

Let’s look at how virtual reality is different. Virtual reality involves more equipment, usually in the form of a headset attached to a personal computer or mobile phone. Virtual reality takes the user and makes them feel as though they are in a different environment by generating graphics and sound. An example of how this would work is the following. You get your virtual reality headset out, put it on and now you are in a furniture store full of chairs to choose from. A virtual salesperson walks you through a selection and you pick the right one for your living room. You can not tell the difference between reality and the simulated furniture store while the virtual reality program is running.

 

A Look at How Augmented Reality Technologies are Being Used Today

Project Tango Development KitRecently Tango augmented reality technology has become accessible to developers. This technology uses the three core technologies of area learning, motion tracking and depth perception to understand its surroundings. Tango offers a Unity plugin and development device that makes building augmented reality easier for developers so we can expect to see more games and applications using that technology soon.

Last year the Lenovo Phab 2 Pro was released, the first phone to come with Tango technology. Unfortunately this release was not as successful as anticipated. Of the few apps available many of them were reported to be buggy. The Lenovo hardware fell short as well with many reviews complaining about the heavy hardware, low graphics quality and AR apps draining the battery in short amounts of time. Overall the release was just a good proof of concept for Augmented reality on mobile devices, but could use some major improvements.

A Look at How Virtual Reality Technologies are Being Used Today

Virtual reality has seemed to have currently found its home in the gaming industry. HTC Vive HeadsetSome of the most popular applications for VR has been through the HTC Vive, Daydream View, Oculus Rift, and the very popular Sony Playstation VR. These technologies are being used to develop and play games using platforms like the Oculus Rift store and Steam VR. Google is also  investing in virtual reality development through Daydream and the Daydream View headset. A few phones are already on the market that come Daydream ready and we can expect to see more.

 

Media Streaming with VR

While gaming seems to currently dominate the present state of the Virtual Reality market there are other applications being used for the technology. Applications like Within and Ryot VR are using the technology to engage viewers in news videos and documentaries shot with 3d cameras. This has been mostly used to shoot short artistic or documentary style pieces focusing on social topics. More popular media outlets like the New York Times are also getting involved with VR technology with the NYT VR app that allows users to go through an expanding catalog of news stories.

One of the factors that is helping to expand the market for VR media streaming is the availability of 3d cameras. Consumer ready 3d cameras are hitting the markets and making it easier for people to create their own VR content. Here’s some links to entry-level 3d cameras:

Also, for those that want to stream 360 video, there’s a number of players in the 360 streaming media space:

Conclusion

We can expect to see more AR and VR in the near future as more hardware becomes available like headsets and AR and VR enabled phones. We’ll reach critical mass once the number of applications and sources of AR and VR media grows as well. We think we can continue to expect to see much more from these technologies in the near future.

Share this
20 Apr 2017

Using Phonegap Plugins to Create a Splash Screen: Part One

A splash screen is a graphical element that appears when an app launches or is loading. The basic splash screen usually contains a logo, the application or brand name and a loading bar. Splash screens are more of a necessity for larger applications that take time to load. Having a user look at a blank screen while waiting for the app to load increases their perceived wait time. If you have a smaller application with less loading time, splash screens are a good opportunity to expose users to your logo and improve brand recognition .

 

The following is part one of a two part series on creating a splash screen for your mobile application. In this section you will learn about the elements included in a splash screen, how to design a splash screen, and the design files you will need to implement your design on an active mobile application.

 

If you have been following the RealEyes blog series on building mobile applications using Google Material and Cordova PhoneGap this post will continue to add to the real estate rating application you have been building. If you have not been following along, and would like to learn to build a mobile application using Cordova PhoneGap and Google Material the following are links to the previous posts:

If you have not been following the RealEyes blog series on building mobile applications using Google Material and Cordova PhoneGap this is still a great reference for improving your mobile application with a well designed splash screen.

 

Step 1) Knowing the Design Elements

The splash screen has two main objectives. The first objective of the splash screen is to let the user know that the application they are trying to launch is loading. The second objective is to give the user extra exposure to your brand. You are going to accomplish these goals with the two key elements of the splash screen, the loading bar and the brand logo. Google also suggests that you expose placeholder UI. Placeholder UI  includes core structural elements such as a status bar to give a smooth transition into the application. Extra elements that can be added into the splash screen is the brand or application name, brand slogan, the application version number and any other graphical elements that increase brand recognition. When choosing what to add to your splash screen remember to keep it simple, less is better.

Design Elements :

(Suggested)

  • Logo
  • Loading bar
  • Placeholder UI

(Optional)

  • Application name
  • Slogan
  • Version number

 

Below are some examples of splash screens:

 

 

Step 2) The Design Specs

When designing splash screens you need to account for different screen sizes as well as different orientations. Therefore every screen size qualifier should have two different images, one for landscape and a second for portrait. In the demo you are looking to create an app for an Android device. If you are building for other devices you can find the design specs here. All files should be in a png format.

 

 

Name DPI Portrait Landscape
XHDPI 320dpi 720px X 1280px 1280px X 720px
HDPI 240dpi 480px X 800px 800px X 480px
MDPI 160dpi 320px X 480px 480px X 320px
LDPI 120dpi 200px X 320px 320px X 200px

 

Step 3) Designing your Splash Screen

Now it is time to put it all together! You are going to build a simple splash screen for the real estate application you have been building over the last few posts. You will use the application logo (the design you are using for your icon), the app name (Real Estate Rater), and the color scheme from the app with a light texture. The placeholder UI and the load bar will be added and configured when the design is implemented in PhoneGap with your plugin. When you create your design you need to remember to use a vector image so you can easily recreate the image in multiple size files.

You now have a set of splash screens that are ready to be added to any android application! If you would like to learn how to implement your new design in a PhoneGap project using the splash screen plugin, look out for our next blog post: Using PhoneGap to Create Splash Screens: Part Two

Share this
11 Apr 2017

Creating a Product Icon for Your App with Material Design and PhoneGap

You and your team may have spent months developing a great application. Now it’s time to put it on the market for users to discover. In a large sea of apps you need to make a great first impression to stand out from the crowd. A well designed product icon will help you accomplish this. The product icon is the first and sometimes only part of your app a potential user will see. The icon you design needs to represent your app in a clean, eye catching fashion. It needs to give potential users an idea of what your app does while gaining their trust with a quality design.

In this post we will be showing you some guidelines to follow in order to create a well designed product icon. We will be using Google Material design standards along with PhoneGap to complete our project. If you have been following our blog we will be using the real estate reviewing app that we have been building over the last few posts Creating Cross Platform Mobile Applications with Cordova/PhoneGap and A Comparison of Material Design Frameworks. If you have not been following our blog you can still use this as a guide for creating an icon for your own project. Let’s get started!

 

Step 1) The Concept

First thing you need is a good concept. Your concept should represent your app simply. It should give the user an idea of what it does before they ever click on it.

This app is about rating and reviewing real estate so putting the shape of a house in the icon will associate the app with real estate. Adding a star will give some indication of the purpose of the app since users have become accustomed to the star rating system. These two shapes will give users a sense of what the app is about without ever opening it.

Step 2) The Design Specs

One you’ve established an exciting concept you may want to jump into creating it. First, however, you should look up the specs for the icon. You’ll need to create the same icon a few different times in multiple sizes in order to account for different screen pixel densities. This means your icon needs to be scalable and for that reason, using a vector graphic is highly recommended. The following is a chart of the naming conventions, dpi, and sizes for the Android icons that you would need to create.

xxxhdpi 640dpi 192px X 192px
xxhdpi 480dpi 144px X 144px
xhdpi 320dpi 96px X 96px
hdpi 240dpi 72px X 72px
mdpi 160dpi 48px X 48px

 

Step 3 ) Designing the Icon

Now that you know the sizes and naming conventions required, it’s time to start designing. For this, you can use Google Material’s guidelines to create the icon. These design guidelines are already implemented through the app via the Materialize framework. It is good practice to sync the design of the icon with the design of the app. After all, the icon is supposed to be a preview of the rest of the application.

 

As discussed in our post Initial Thoughts on Google Material Design Material design is based around the concept of digital design inspired by the physical world. The same concept is applied in product icon design. Product icons like most good design is based on a grid system that you can see below. Along with this grid system, a keyline grid to guide for pre-rendered base shapes is provided. You can use these guides when designing the icon.

The Grid and Keylines

Google Material Design - Grid and Keylines

 

Get Your Base Down

To start, add the base lines to the grid to form the outline of the icon design. Once you have a blueprint of what is being designed, start putting the pieces into place. First, fill in the background. In this example the main color in the application, teal, is being used. Remember to keep your color scheme consistent to what you are using in your app. The background will have two additional parts. The top of the icon will have what is called a ‘tinted edge’ this is the original color mixed with white. The bottom will have what is called a ‘shaded edge’. This is the background mixed with a darker color to give the appearance of depth to the icon. After the background is in place, color in the foreground.

This is the house shape using white for the foreground.
Icon step 1 - Teal Background and White House

Add Some Color
Next, add some spot color to the icon. This is a highlight on your icon using a small amount of a secondary color. We are going to use yellow on the star as the spot color.

Icon Step 2 - Spot Color - Yellow Star

Give the Icon Depth
Lastly, give the icon elements depth by adding shadows. Imagine a light source coming from the top left corner of the icon at a 45 degree angle. Add a soft shadow from the foreground onto the background to separate them.

Here is the final result.

Icon Step 3 - Adding Depth

Experiment
You can also try experimenting with different background shapes using the same guidelines. Have fun!

Icon Design Experimentation - Round Background

 

Step 4) Create and Name Your Icon Files

Use the chart in step 2 to create your icon files. Use the name in column 1 the dpi in column 2 and the width X height in column 3. Save your files as pngs. Once you have all of your files created, add them to the config.xml file in your PhoneGap app.

 

Step 5) Add the Icon to Your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project.

PhoneGap Build - Update Code

Once you have done this click on Rebuild all. You will see your icon replace the default PhoneGap icon in your project space. You now have a brand new product icon to represent your app! Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate.apk

Share this

© 2018 RealEyes Media, LLC. All rights reserved.