Pages

Showing posts with label login form design. Show all posts
Showing posts with label login form design. Show all posts

Thursday, February 5, 2015

Log in Design for Regina Airport Authority

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.


First Design


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.



Second design


The second design, I used the image from current login page. But half of this image had very bright light. It could draw users’ eyes to it so I decided to cover with login form. It turned out great since the bright part helped to draw attention to the form. Besides that, I relocated “REGINA AIRPORT AUTHORITY’S SMS PROGRAM” to the left side which pointed to the form. The rest of the content left on white background made it easy to read.


Screen shot of second design.


Both designs are looking good now. We will have our client make decision which one should be their new login page.


NWDS Alaska Web Design


About NWDS - founded in 2003 by six software engineers, NorthWest Data Solutions (NWDS) provides custom computer programming and systems design services. NWDS creates many types of software, including e-commerce, financial, defense, engineering, logistics, aviation and more. www.nwds-ak.com

Monday, April 28, 2014

Login Design for Trans Maldivian Airways

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 Design


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.



Second design


The second design, I did the opposite way with the first design. This one I used the original image without blurring it. However I cropped its size to fit my page. I had the login form and TMA’s logo located on the left side. I expanded username and password fields wide enough to make them jumped out of the stunning image background. Then use same tone of TMA’s blue color for login button. I left all content as it was in the first design. Lastly, I repositioned our logo and welcome message.

Screen shot of second design.


Each design had its own unique way to accomplish. I worked around the image since it was the center of attention. We will have TMA make decision on the login page new look.


NWDS Alaska Web Design


About NWDS - founded in 2003 by six software engineers, NorthWest Data Solutions (NWDS) provides custom computer programming and systems design services. NWDS creates many types of software, including e-commerce, financial, defense, engineering, logistics, aviation and more. www.nwds-ak.com

Thursday, April 3, 2014

Design Login Page for West Air Sweden

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.


First Design


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.



A second design


This design I changed the look of login form by having transparent background and font color to be white instead. Then I moved it to the center of the page. I still using the same image but framed its height shorter also added a black transparent layer on top of it. Next relocation the whole content below the image and adjust welcome message size.

Screen shot of second design login page.





NWDS Alaska Web Design


About NWDS - founded in 2003 by six software engineers, NorthWest Data Solutions (NWDS) provides custom computer programming and systems design services. NWDS creates many types of software, including e-commerce, financial, defense, engineering, logistics, aviation and more. www.nwds-ak.com

Friday, March 14, 2014

Design Login Page for Seneca Safety

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.


First Design


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.



A second design


Instead of using 3 images, I chose only one. But like I mentioned earlier, the image was small size so I had to help cover the pixel looking after enlarge it. I put the Gaussian blur and another transparent layer with Photoshop on top of the image. It became a good background then I had login form locate at the middle of the page. I changed the color on the form area to make it stand out.

Screen shot of second design login page.



I like this design better but again I’m not the decision maker. So which one do you like better?


NWDS Alaska Web Design


About NWDS - founded in 2003 by six software engineers, NorthWest Data Solutions (NWDS) provides custom computer programming and systems design services. NWDS creates many types of software, including e-commerce, financial, defense, engineering, logistics, aviation and more. www.nwds-ak.com

Saturday, February 15, 2014

Login page Web Design for airCreebec

Screenshot of existing design


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 design


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


I replaced part of the logo with the image of their plane because I wanted the image stand out but still keeping the word “airCreebec.” I adjusted login form by increasing the font, adding some color, and repositioning a little. Added two lines to separate all text content from image and login form.

Second design

Screenshot of second 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.



NWDS Alaska Web Design


About NWDS - founded in 2003 by six software engineers, NorthWest Data Solutions (NWDS) provides custom computer programming and systems design services. NWDS creates many types of software, including e-commerce, financial, defense, engineering, logistics, aviation and more. www.nwds-ak.com

Saturday, January 25, 2014

Web Design Tips for Login page

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


What would I like to change?


1. The image looks nice but it needs some work before using it. I’d like to remove the person who stands right in front of the plane. This task would take about 20-30 minutes with Photoshop so why not? The image without the person there makes it less distracted. Next, I would not use a border surrounding the image because if it doesn’t help to make it looks better I’d rather just leave it alone. One of my principles of design – less is more.

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.


How about a second Web design idea for the Login page?


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.

One of our cultures is excellent customer support. I’m happy that I can help improve SMS Pro™ to serve our clients better. In conclusion, exceptional Web design is about whether the client likes the concept. So, which one do you like better?


NWDS Alaska Web Design


About NWDS - founded in 2003 by six software engineers, NorthWest Data Solutions (NWDS) provides custom computer programming and systems design services. NWDS creates many types of software, including e-commerce, financial, defense, engineering, logistics, aviation and more. www.nwds-ak.com