Dtube Mobile User Interface Design Part 1: For Splash Screen, Sign In & Walk-through

Brief Overview

Today mobile application is an on the go platform to access many application with is. The idea of this contribution is for a proposed graphic user interface for dtube.

Benefits

This is to make dtube more easily accessible to users. Apparently most people will find it easier to use a mobile application than the web based platform

Tools

• Windows Operating System

• Adobe Photoshop CS6

• Font: Open Sans

• Vector icons : ionicons

Work Done

SPLASH SCREEN

The Process
Set a back ground and make it transparent by toggling the background off

Create a rectangular shape from the shape tools and set color to black or use color overlay then set it to black

Attach dtube logo and loader icons, including text

---

---

SIGN IN

The Process

Set a black rectangular background

Create shapes and buttons

Insert text and icons: Set icons to 40% opacity while the text for password and username are set to 60% opacity. Add Dtube logo

---

---

WALK THROUGH

The Process

Starting from an empty background

Set a rectangular shape of white

Create controller shape icons using circle shapes(you can also use page controller icons). This way it is easier to set the colors different. I used red to indicate the current page and ligh grey to indicate their are other pages.

Add a button

Using pen tool and layer mask I modified the Dtube logo which has a white text for TUBE ; Changed it to black to suit the background.

Then text was added to finish it up

---

---

MOCK-UPS

sign in with mockup view

walk through mock up view

---

---

Original files

• header image iphone mockup

• hand iphone mock up

• PSD raw file

---

Posted on Utopian.io - Rewarding Open Source Contributors

---