Regina Airport Authority is a non-profit corporation which operates Regina International Airport under a 60-year lease from Transport Canada. Their mission is to manage and operate their airport in a safe, secure, efficient, commercially viable and environmentally responsible manner.

Screen shot of existing log in page.

I’d like to have the login page looks similar to their current website. So I took one image and incorporated it to my new design. In order to turn it to the nice background image, I made it blur with Photoshop Gaussian Blur. And I decided to center all elements. Then added color to username, password, and login boxes with their logo color scheme. The rest of the content, I wrapped with slightly transparent white background.

Screen shot of first design.

Screen shot of second design.

Trans Maldivian Airways is a private airline based in Ibrahim Nasir International Airport. It operates floatplanes to resort islands in the Maldives. They have recently started using SMS Pro’s web-based aviation safety software. We would like to give them a new look to their login page to generate good will and because we like working with the crew over in the Maldives.

Screen shot of existing log in page.

First I grabbed a few images from their website and stored them on my computer. Their nice images made my work easier. After picked out the image for first design, I started to work with my favorite tool--Photoshop. I had the image blurred because I wanted the login form dominant, and then placed it below our logo. For the login form, I had white transparent background and changed the tone to be TMA’s logo color and placed it on top of the main image, then relocated all content as usual.

Screen shot of first design.

Screen shot of second design.

West Air Sweden is a cargo airline based in Gothenburg, Sweden. It operates scheduled and ad hoc freight charter services for FedEx, DHL, TNT and UPS. West Air has been using SMS Pro's Web-based aviation safety software since the end of 2013.

Screen shot of existing login page.

What I would like to change was login form style and color. First I added the grey background to style the form. I also wanted to add color and an element to emphasize it a little more. Then I thought if I have an icon it should work too. So I created the key symbol with illustrator and placed it next to the form title; it helped to gain more attraction. Next, I started to work on the font and size by having larger size for the elements I wanted to emphasize and rearranged their locations. Then added color to it, looked pretty good!

I decided to use the large picture to be background for both login form and content. Then I had login form on the right side of the page. For the content, I changed the font color to be white on the black-transparent background.

Screen shot of first design login page.

Screen shot of second design login page.

SMS Pro is web-based aviation safety software for airlines, airports, flight schools and aviation maintenance organizations. This enterprise-level aviation SMS software was developed by the Anchorage Alaska Web design and programming company - NorthWest Data Solutions for the aviation industry in 2007.

One of our clients has been using this login page for a long time. Occasionally, this client would add a picture to this page, but lately, this login page looks and feels empty. I’d like to add some interesting elements to it.

Screen shot of existing login page.

We have a lot of images about airplanes, helicopters, pilots, airports, and more that related to aviation. But the difficult part is choosing the right image for its purpose. I chose these images from our client’s website Seneca College. But the problem was all images are small, so I decided to use 3 images instead of one to create this login page. I used red and black to be main color design since it matched with their website and our logo. I had grey color to make the contrast in area I wanted to emphasize in the form.

Screen shot of first design login page.

Screen shot of second design login page.

One of requirements for airCreebec is I have to keep the content they have now on the existing login page. This is quite challenging task since I can’t use the large image, and I need to re-design all text to look more inviting to read.

First of all, I’d like to break the whole line of text across the web page because it seemed too long to read. Then I grouped them up on one side of the page and had the rest on another side. I also concerned about the amount of characters on both sides so it looked balance that way. For the url address, I put it as a hyperlink under the word “clicking.”

Screenshot of first design

After finishing the first design, I looked away from my computer screen and let my eyes fresh. I told myself I could make a little more change to get a better result.

I took away the USER LOGIN background then change color from white to dark grey. I reduced the width of login form but increased the height, and added the skinny box to the left side of USER LOGIN word. That helped its look more modern. Finally, I also increased the height of the image to match with the height of login form. I like it!

We will have the client look and make decision for their new login page. I’m already exciting to implement code for them.

One of our products, SMS Pro™, is web-based aviation safety software. SMS Pro has a configurable login form that allows users to securely access the system. We recognize the importance of functionality, usability as well as aesthetic desirability. As a website designer, I have to balance all of them together in order to meet a great user’s experience.

Images are helpful during the design process, but they need to used properly. What does that mean? It means that when we have an image, such as from your camera, we can’t haphazardly upload it next to text on our login form. We have to think and choose wisely.

The following are steps a professional Web designer takes to modify an existing SMS Pro site.

Existing Web Site Design

2. A couple more things I would like to do are adjusting the color tone and crop the image. So this way I have the plane in focus more than clouds. Then put the image on top of the page.

3. The logo and login form do not stand out and they don't seem connected. I’d like to group them together to make them stand out more. I'd put them on the grey background (same tone with the sky.) Also change character of word “username” and “password” with uppercase and increase the size. Change text color to be dark grey since it match with the login background color.

4. Increase the size of text box including the login button.

5. Change the word “Retrieve password” to be “Forgot your password?” and move it next to login button.

6. Move the Facebook button away from the middle of the screen.

7. Add welcome text under the logo to inform users this is their safety system, and it helps to direct users’ eyes to the login form.

I like the first design better than the existing login form but I like this one even more.

1. I change image since the previous plane faces outward so it leads users’ eyes out from the page. With this image, it helps keep users engaged within the page.

2. The background color changed to be the same tone with plane background (faded more.)

3. The logo looks bigger since it has more white space.

4. The welcome text has more room for larger size and becomes the title of the page.