gdata.io.handleScriptLoaded({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$georss":"http://www.georss.org/georss","xmlns$thr":"http://purl.org/syndication/thread/1.0","xmlns$blogger":"http://schemas.google.com/blogger/2008","id":{"$t":"tag:blogger.com,1999:blog-7622222488475342763"},"updated":{"$t":"2023-11-06T12:16:05.946-09:00"},"category":[{"term":"alaska SEO Services"},{"term":"login form design"},{"term":"anchorage alaska website design"},{"term":"alaska website design"},{"term":"alaska logo design"},{"term":"effective SEO meta tags"},{"term":"Log in form design"},{"term":"Browser Compatibility"},{"term":"Search Engine Optimization"},{"term":"anchorage alaska web designer"},{"term":"anchorage alaska web developer"},{"term":"anchorage alaska web design"},{"term":"alaska web design"}],"title":{"type":"text","$t":"Anchorage Alaska Web Design"},"subtitle":{"type":"html","$t":"Blog About Anchorage Alaska Web Design Tips and Tricks. Current Website Projects Discussed."},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/-/login+form+design?alt\u003djson-in-script\u0026max-results\u003d6"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/-/login+form+design?alt\u003djson-in-script\u0026max-results\u003d6"},{"rel":"alternate","type":"text/html","href":"http://www.alaska-website.com/search/label/login%20form%20design"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Chris Howell"},"uri":{"$t":"https://www.blogger.com/profile/16995664185124678372"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"generator":{"version":"7.00","uri":"https://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"6"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-7622222488475342763.post-5739579593404626000"},"published":{"$t":"2015-02-05T17:43:00.000-09:00"},"updated":{"$t":"2015-02-05T17:43:08.338-09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Log in form design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"anchorage alaska website design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"login form design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"anchorage alaska web design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"alaska web design"}],"title":{"type":"text","$t":"Log in Design for Regina Airport Authority"},"content":{"type":"html","$t":"\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nRegina 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.\u003c/div\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of existing log in page.\u003c/h4\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://1.bp.blogspot.com/-w97IYT7VHhQ/U_03xZZ76MI/AAAAAAAAA_g/scjgFRCoNyI/s1600/current-design.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-w97IYT7VHhQ/U_03xZZ76MI/AAAAAAAAA_g/scjgFRCoNyI/s1600/current-design.jpg\" height\u003d\"485\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003ch3\u003e\nFirst Design\u003c/h3\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nI’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. \n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of first design.\u003c/h4\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://1.bp.blogspot.com/-6NG__HtgMYI/U_04MflcXBI/AAAAAAAAA_o/h1yPwSM1FhA/s1600/Regina.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-6NG__HtgMYI/U_04MflcXBI/AAAAAAAAA_o/h1yPwSM1FhA/s1600/Regina.jpg\" height\u003d\"584\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003e\nSecond design \u003c/h3\u003e\n\u003cbr /\u003e\nThe 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.\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of second design.\u003c/h4\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://4.bp.blogspot.com/-cVAYtGTLiN4/U_04TTaN2CI/AAAAAAAAA_0/wkb5q5YEkf4/s1600/Regina2.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-cVAYtGTLiN4/U_04TTaN2CI/AAAAAAAAA_0/wkb5q5YEkf4/s1600/Regina2.jpg\" height\u003d\"516\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\u003c/div\u003e\nBoth designs are looking good now. We will have our client make decision which one should be their new login page.\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\nNWDS\u0026nbsp;\u003ca href\u003d\"https://www.nwds-ak.com/\" target\u003d\"_blank\"\u003eAlaska Web Design\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\u003cdiv style\u003d\"font-family: arial, sans-serif; font-size: 13px;\"\u003e\n\u003cspan style\u003d\"color: #666666;\"\u003e\u003cspan style\u003d\"font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; line-height: 18px;\"\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; font-size: 15px; line-height: 21px;\"\u003eAbout NWDS\u003c/span\u003e\u003c/span\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; line-height: 21px;\"\u003e\u0026nbsp;-\n founded in 2003 by six software engineers, NorthWest Data Solutions \n(NWDS) provides custom computer programming and systems design services.\n NWDS creates many types of software, including e-commerce, financial, \ndefense, engineering, logistics, aviation and more. \u003ca href\u003d\"http://www.nwds-ak.com/\"\u003ewww.nwds-ak.com\u003c/a\u003e\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\n"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https://www.alaska-website.com/feeds/5739579593404626000/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https://www.alaska-website.com/2015/02/log-in-design-for-regina-airport.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/5739579593404626000"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/5739579593404626000"},{"rel":"alternate","type":"text/html","href":"https://www.alaska-website.com/2015/02/log-in-design-for-regina-airport.html","title":"Log in Design for Regina Airport Authority"}],"author":[{"name":{"$t":"Chanok"},"uri":{"$t":"https://www.blogger.com/profile/03212828073476536400"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/-w97IYT7VHhQ/U_03xZZ76MI/AAAAAAAAA_g/scjgFRCoNyI/s72-c/current-design.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-7622222488475342763.post-5248515408304194510"},"published":{"$t":"2014-04-28T17:15:00.003-08:00"},"updated":{"$t":"2014-08-26T16:38:17.604-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"login form design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"anchorage alaska web design"}],"title":{"type":"text","$t":"Login Design for Trans Maldivian Airways"},"content":{"type":"html","$t":"\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nTrans 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 \u003ca href\u003d\"http://www.asms-pro.com/\"\u003eweb-based aviation safety software\u003c/a\u003e. 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.\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of existing log in page.\u003c/h4\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://4.bp.blogspot.com/-8n_c8U-YPco/U1myic8ZjNI/AAAAAAAAAwA/WrRwrB4aEVA/s1600/existing-capture.JPG\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-8n_c8U-YPco/U1myic8ZjNI/AAAAAAAAAwA/WrRwrB4aEVA/s1600/existing-capture.JPG\" height\u003d\"380\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003ch3\u003e\nFirst Design\u003c/h3\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nFirst I grabbed a few images from their \u003ca href\u003d\"http://www.transmaldivian.com/\" target\u003d\"_blank\"\u003ewebsite\u003c/a\u003e\u0026nbsp;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. \n\n\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of first design.\u003c/h4\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://4.bp.blogspot.com/-odpjVBXbLlU/U1mzXaL3dcI/AAAAAAAAAwI/Bx_rkPkgXqM/s1600/Trans.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-odpjVBXbLlU/U1mzXaL3dcI/AAAAAAAAAwI/Bx_rkPkgXqM/s1600/Trans.jpg\" height\u003d\"548\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003ch3\u003e\nSecond design \u003c/h3\u003e\n\u003cbr /\u003e\nThe 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. \n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of second design.\u003c/h4\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://1.bp.blogspot.com/-9wS__PZgNvE/U1mztm3IHsI/AAAAAAAAAwQ/b9T3S7NCvYI/s1600/Trans2.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-9wS__PZgNvE/U1mztm3IHsI/AAAAAAAAAwQ/b9T3S7NCvYI/s1600/Trans2.jpg\" height\u003d\"516\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\u003c/div\u003e\nEach 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.\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\nNWDS\u0026nbsp;\u003ca href\u003d\"https://www.nwds-ak.com/\" target\u003d\"_blank\"\u003eAlaska Web Design\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\u003cdiv style\u003d\"font-family: arial, sans-serif; font-size: 13px;\"\u003e\n\u003cspan style\u003d\"color: #666666;\"\u003e\u003cspan style\u003d\"font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; line-height: 18px;\"\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; font-size: 15px; line-height: 21px;\"\u003eAbout NWDS\u003c/span\u003e\u003c/span\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; line-height: 21px;\"\u003e\u0026nbsp;-\n founded in 2003 by six software engineers, NorthWest Data Solutions \n(NWDS) provides custom computer programming and systems design services.\n NWDS creates many types of software, including e-commerce, financial, \ndefense, engineering, logistics, aviation and more. \u003ca href\u003d\"http://www.nwds-ak.com/\"\u003ewww.nwds-ak.com\u003c/a\u003e\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\n"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https://www.alaska-website.com/feeds/5248515408304194510/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https://www.alaska-website.com/2014/04/login-design-for-trans-maldivian-airways.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/5248515408304194510"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/5248515408304194510"},{"rel":"alternate","type":"text/html","href":"https://www.alaska-website.com/2014/04/login-design-for-trans-maldivian-airways.html","title":"Login Design for Trans Maldivian Airways"}],"author":[{"name":{"$t":"Chanok"},"uri":{"$t":"https://www.blogger.com/profile/03212828073476536400"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-8n_c8U-YPco/U1myic8ZjNI/AAAAAAAAAwA/WrRwrB4aEVA/s72-c/existing-capture.JPG","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-7622222488475342763.post-8181999193821285382"},"published":{"$t":"2014-04-03T15:21:00.000-08:00"},"updated":{"$t":"2014-04-03T15:21:02.477-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"login form design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"anchorage alaska web designer"},{"scheme":"http://www.blogger.com/atom/ns#","term":"alaska web design"}],"title":{"type":"text","$t":"Design Login Page for West Air Sweden"},"content":{"type":"html","$t":"\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003cspan style\u003d\"background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px; line-height: 16.1200008392334px;\"\u003eWest 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\u003c/span\u003e\u0026nbsp;been using \u003ca href\u003d\"http://www.asms-pro.com/\"\u003eSMS Pro's Web-based aviation safety software\u003c/a\u003e since the end of 2013.\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of existing login page.\u003c/h4\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://3.bp.blogspot.com/-Q_0UF2PpNPY/UzoGJtila6I/AAAAAAAAAuU/UQmM0V9dpCo/s1600/existing-login.JPG\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-Q_0UF2PpNPY/UzoGJtila6I/AAAAAAAAAuU/UQmM0V9dpCo/s1600/existing-login.JPG\" height\u003d\"490\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003ch3\u003e\nFirst Design\u003c/h3\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nWhat 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!\n\u003cbr /\u003e\n\u003cbr /\u003e\nI 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.\n\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of first design login page.\u003c/h4\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://2.bp.blogspot.com/-CDbELMkXT1U/UzoG55tIu_I/AAAAAAAAAuc/M0EOG0qCNBs/s1600/WestAirSwedenLoginPage.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-CDbELMkXT1U/UzoG55tIu_I/AAAAAAAAAuc/M0EOG0qCNBs/s1600/WestAirSwedenLoginPage.jpg\" height\u003d\"502\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003ch3\u003e\nA second design \u003c/h3\u003e\n\u003cbr /\u003e\nThis 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. \n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of second design login page.\u003c/h4\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://1.bp.blogspot.com/-nGjX6YcPsV0/UzoHbQQYpQI/AAAAAAAAAuk/_bpx9uh-1y8/s1600/WestAirSwedenLoginPage2.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-nGjX6YcPsV0/UzoHbQQYpQI/AAAAAAAAAuk/_bpx9uh-1y8/s1600/WestAirSwedenLoginPage2.jpg\" height\u003d\"503\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\nNWDS\u0026nbsp;\u003ca href\u003d\"https://www.nwds-ak.com/\" target\u003d\"_blank\"\u003eAlaska Web Design\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\u003cdiv style\u003d\"font-family: arial, sans-serif; font-size: 13px;\"\u003e\n\u003cspan style\u003d\"color: #666666;\"\u003e\u003cspan style\u003d\"font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; line-height: 18px;\"\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; font-size: 15px; line-height: 21px;\"\u003eAbout NWDS\u003c/span\u003e\u003c/span\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; line-height: 21px;\"\u003e\u0026nbsp;-\n founded in 2003 by six software engineers, NorthWest Data Solutions \n(NWDS) provides custom computer programming and systems design services.\n NWDS creates many types of software, including e-commerce, financial, \ndefense, engineering, logistics, aviation and more. \u003ca href\u003d\"http://www.nwds-ak.com/\"\u003ewww.nwds-ak.com\u003c/a\u003e\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\n"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https://www.alaska-website.com/feeds/8181999193821285382/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https://www.alaska-website.com/2014/04/design-login-page-for-west-air-sweden.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/8181999193821285382"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/8181999193821285382"},{"rel":"alternate","type":"text/html","href":"https://www.alaska-website.com/2014/04/design-login-page-for-west-air-sweden.html","title":"Design Login Page for West Air Sweden"}],"author":[{"name":{"$t":"Chanok"},"uri":{"$t":"https://www.blogger.com/profile/03212828073476536400"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-Q_0UF2PpNPY/UzoGJtila6I/AAAAAAAAAuU/UQmM0V9dpCo/s72-c/existing-login.JPG","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-7622222488475342763.post-8922868758427795887"},"published":{"$t":"2014-03-14T15:15:00.001-08:00"},"updated":{"$t":"2014-03-14T15:15:03.910-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"anchorage alaska website design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"login form design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"alaska website design"}],"title":{"type":"text","$t":"Design Login Page for Seneca Safety"},"content":{"type":"html","$t":"\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nSMS Pro is \u003ca href\u003d\"http://www.asms-pro.com/\"\u003eweb-based aviation safety software for airlines, airports, flight schools and aviation maintenance organizations\u003c/a\u003e. This enterprise-level aviation SMS software was developed by the\u003ca href\u003d\"http://nwds-ak.com/\"\u003e Anchorage Alaska Web design and programming company\u003c/a\u003e\u0026nbsp;- NorthWest Data Solutions for the aviation industry in 2007.\u003cbr /\u003e\n\u003cbr /\u003e\nOne 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. \n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of existing login page.\u003c/h4\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://3.bp.blogspot.com/-w5RmRZOTq-M/UuqxyOAWDwI/AAAAAAAAAoc/nG1Xbo7lp_E/s1600/existing_login_page.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-w5RmRZOTq-M/UuqxyOAWDwI/AAAAAAAAAoc/nG1Xbo7lp_E/s1600/existing_login_page.jpg\" height\u003d\"409\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003ch3\u003e\nFirst Design\u003c/h3\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nWe 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 \u003ca href\u003d\"http://www.senecacollege.ca/\" target\u003d\"_blank\"\u003eSeneca College\u003c/a\u003e. 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.\n\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of first design login page.\u003c/h4\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://2.bp.blogspot.com/-pfUu7VCzvY8/UxYwB0R53OI/AAAAAAAAAtI/MBnOrv_KLFE/s1600/login_page3.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-pfUu7VCzvY8/UxYwB0R53OI/AAAAAAAAAtI/MBnOrv_KLFE/s1600/login_page3.jpg\" height\u003d\"478\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003ch3\u003e\nA second design \u003c/h3\u003e\n\u003cbr /\u003e\nInstead 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. \n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreen shot of second design login page.\u003c/h4\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://3.bp.blogspot.com/-pzWvcjX8RJg/UxYv7WIsKsI/AAAAAAAAAtA/chPkZ6Pgy1k/s1600/login_page4.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-pzWvcjX8RJg/UxYv7WIsKsI/AAAAAAAAAtA/chPkZ6Pgy1k/s1600/login_page4.jpg\" height\u003d\"481\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\nI like this design better but again I’m not the decision maker. So which one do you like better?\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\nNWDS\u0026nbsp;\u003ca href\u003d\"https://www.nwds-ak.com/\" target\u003d\"_blank\"\u003eAlaska Web Design\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\u003cdiv style\u003d\"font-family: arial, sans-serif; font-size: 13px;\"\u003e\n\u003cspan style\u003d\"color: #666666;\"\u003e\u003cspan style\u003d\"font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; line-height: 18px;\"\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; font-size: 15px; line-height: 21px;\"\u003eAbout NWDS\u003c/span\u003e\u003c/span\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; line-height: 21px;\"\u003e\u0026nbsp;-\n founded in 2003 by six software engineers, NorthWest Data Solutions \n(NWDS) provides custom computer programming and systems design services.\n NWDS creates many types of software, including e-commerce, financial, \ndefense, engineering, logistics, aviation and more. \u003ca href\u003d\"http://www.nwds-ak.com/\"\u003ewww.nwds-ak.com\u003c/a\u003e\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\n"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https://www.alaska-website.com/feeds/8922868758427795887/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https://www.alaska-website.com/2014/03/design-login-page-for-seneca-safety.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/8922868758427795887"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/8922868758427795887"},{"rel":"alternate","type":"text/html","href":"https://www.alaska-website.com/2014/03/design-login-page-for-seneca-safety.html","title":"Design Login Page for Seneca Safety"}],"author":[{"name":{"$t":"Chanok"},"uri":{"$t":"https://www.blogger.com/profile/03212828073476536400"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-w5RmRZOTq-M/UuqxyOAWDwI/AAAAAAAAAoc/nG1Xbo7lp_E/s72-c/existing_login_page.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-7622222488475342763.post-6417972906725292517"},"published":{"$t":"2014-02-15T17:20:00.000-09:00"},"updated":{"$t":"2014-02-15T17:20:15.075-09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"login form design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"anchorage alaska web design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"alaska web design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"anchorage alaska web developer"}],"title":{"type":"text","$t":"Login page Web Design for airCreebec"},"content":{"type":"html","$t":"\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreenshot of existing design\u003c/h4\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://2.bp.blogspot.com/-32LLii8INi0/UvQnrGR08lI/AAAAAAAAAps/VFw05_vLX7E/s1600/screenshot_existing_form.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-32LLii8INi0/UvQnrGR08lI/AAAAAAAAAps/VFw05_vLX7E/s1600/screenshot_existing_form.jpg\" height\u003d\"380\" width\u003d\"400\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\nOne 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.\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003ch3\u003e\nFirst design\u003c/h3\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nFirst 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.” \u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreenshot of first design\u003c/h4\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://2.bp.blogspot.com/-Me4bX-A88GE/UvQpcDXcofI/AAAAAAAAAqA/xMTx2wdJfew/s1600/airCreebec_login_page1.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-Me4bX-A88GE/UvQpcDXcofI/AAAAAAAAAqA/xMTx2wdJfew/s1600/airCreebec_login_page1.jpg\" height\u003d\"492\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\nI 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.\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003e\nSecond design\u003c/h3\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nScreenshot of second design\u003c/h4\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://3.bp.blogspot.com/-zsdLsIe10eY/UvQqM6lNfOI/AAAAAAAAAqI/RFARqCfL9dY/s1600/airCreebec_login_page2.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-zsdLsIe10eY/UvQqM6lNfOI/AAAAAAAAAqI/RFARqCfL9dY/s1600/airCreebec_login_page2.jpg\" height\u003d\"478\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nAfter 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.\n\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nI 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! \n\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nWe will have the client look and make decision for their new login page. I’m already exciting to implement code for them.\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\nNWDS\u0026nbsp;\u003ca href\u003d\"https://www.nwds-ak.com/\" target\u003d\"_blank\"\u003eAlaska Web Design\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\u003cdiv style\u003d\"font-family: arial, sans-serif; font-size: 13px;\"\u003e\n\u003cspan style\u003d\"color: #666666;\"\u003e\u003cspan style\u003d\"font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; line-height: 18px;\"\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; font-size: 15px; line-height: 21px;\"\u003eAbout NWDS\u003c/span\u003e\u003c/span\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; line-height: 21px;\"\u003e\u0026nbsp;-\n founded in 2003 by six software engineers, NorthWest Data Solutions \n(NWDS) provides custom computer programming and systems design services.\n NWDS creates many types of software, including e-commerce, financial, \ndefense, engineering, logistics, aviation and more. \u003ca href\u003d\"http://www.nwds-ak.com/\"\u003ewww.nwds-ak.com\u003c/a\u003e\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\n"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https://www.alaska-website.com/feeds/6417972906725292517/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https://www.alaska-website.com/2014/02/login-page-web-design-for-aircreebec.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/6417972906725292517"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/6417972906725292517"},{"rel":"alternate","type":"text/html","href":"https://www.alaska-website.com/2014/02/login-page-web-design-for-aircreebec.html","title":"Login page Web Design for airCreebec"}],"author":[{"name":{"$t":"Chanok"},"uri":{"$t":"https://www.blogger.com/profile/03212828073476536400"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-32LLii8INi0/UvQnrGR08lI/AAAAAAAAAps/VFw05_vLX7E/s72-c/screenshot_existing_form.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-7622222488475342763.post-873608480882550193"},"published":{"$t":"2014-01-25T11:51:00.000-09:00"},"updated":{"$t":"2014-01-27T09:06:14.868-09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"login form design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"anchorage alaska web design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"alaska web design"}],"title":{"type":"text","$t":"Web Design Tips for Login page"},"content":{"type":"html","$t":"\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nOne of our products, SMS Pro™, is web-based \u003ca href\u003d\"http://asms-pro.com/\" target\u003d\"_blank\"\u003eaviation safety software\u003c/a\u003e. 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.\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nImages 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. \u003cbr /\u003e\n\u003cbr /\u003e\nThe following are steps a professional Web designer takes to modify an existing SMS Pro site.\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch4 style\u003d\"text-align: center;\"\u003e\nExisting Web Site Design\u003c/h4\u003e\n\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://4.bp.blogspot.com/-rbZuwIbbsv0/UuHWccEzbXI/AAAAAAAAAnw/Hi00BfkMCaE/s1600/FlairSafetyLogin-Current.JPG\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-rbZuwIbbsv0/UuHWccEzbXI/AAAAAAAAAnw/Hi00BfkMCaE/s1600/FlairSafetyLogin-Current.JPG\" height\u003d\"500\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003ch3\u003e\nWhat would I like to change?\u003c/h3\u003e\n\u003cbr/\u003e\n1. 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.\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n2. 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.\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n3. 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.\nChange text color to be dark grey since it match with the login background color.\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n4. Increase the size of text box including the login button.\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n5. Change the word “Retrieve password” to be “Forgot your password?” and move it next to login button.\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n6. Move the Facebook button away from the middle of the screen. \n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n7. 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.\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://1.bp.blogspot.com/-HkoLwgwUPxE/UuHadahmoiI/AAAAAAAAAn8/u3Y_TkwVr_4/s1600/FlairSafetyLogin2.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-HkoLwgwUPxE/UuHadahmoiI/AAAAAAAAAn8/u3Y_TkwVr_4/s1600/FlairSafetyLogin2.jpg\" height\u003d\"452\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003ch3\u003e\nHow about a second Web design idea for the Login page?\u003c/h3\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://1.bp.blogspot.com/-Pt07cKmeoZ4/UuHcOlxjdEI/AAAAAAAAAoM/ePPXUIWvTSs/s1600/FlairSafetyLogin.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-Pt07cKmeoZ4/UuHcOlxjdEI/AAAAAAAAAoM/ePPXUIWvTSs/s1600/FlairSafetyLogin.jpg\" height\u003d\"436\" width\u003d\"640\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\nI like the first design better than the existing login form but I like this one even more. \u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n1. 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. \n\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n2. The background color changed to be the same tone with plane background (faded more.)\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n3. The logo looks bigger since it has more white space.\n\u003cbr /\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv class\u003d\"MsoNormal\"\u003e\n4. The welcome text has more room for larger size and becomes the title of the page.\n\u003c/div\u003e\n\u003cbr /\u003e\nOne 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?\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003c/div\u003e\nNWDS\u0026nbsp;\u003ca href\u003d\"https://www.nwds-ak.com/\" target\u003d\"_blank\"\u003eAlaska Web Design\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\u003cdiv style\u003d\"font-family: arial, sans-serif; font-size: 13px;\"\u003e\n\u003cspan style\u003d\"color: #666666;\"\u003e\u003cspan style\u003d\"font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; line-height: 18px;\"\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; font-size: 15px; line-height: 21px;\"\u003eAbout NWDS\u003c/span\u003e\u003c/span\u003e\u003cspan style\u003d\"font-family: arial, helvetica, sans-serif; line-height: 21px;\"\u003e\u0026nbsp;-\n founded in 2003 by six software engineers, NorthWest Data Solutions \n(NWDS) provides custom computer programming and systems design services.\n NWDS creates many types of software, including e-commerce, financial, \ndefense, engineering, logistics, aviation and more. \u003ca href\u003d\"http://www.nwds-ak.com/\"\u003ewww.nwds-ak.com\u003c/a\u003e\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\n"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https://www.alaska-website.com/feeds/873608480882550193/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https://www.alaska-website.com/2014/01/web-design-tips-for-login-page.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/873608480882550193"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/7622222488475342763/posts/default/873608480882550193"},{"rel":"alternate","type":"text/html","href":"https://www.alaska-website.com/2014/01/web-design-tips-for-login-page.html","title":"Web Design Tips for Login page"}],"author":[{"name":{"$t":"Chanok"},"uri":{"$t":"https://www.blogger.com/profile/03212828073476536400"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-rbZuwIbbsv0/UuHWccEzbXI/AAAAAAAAAnw/Hi00BfkMCaE/s72-c/FlairSafetyLogin-Current.JPG","height":"72","width":"72"},"thr$total":{"$t":"0"}}]}});