Design Challenge #4
This weeks Design Challenge was difficult for me to do. Not because I did not know what I was doing but more because I am getting tired of doing these. I am trying to find the time to do freelance web design to bring in some money to pay bills, do design challenges, blog, job search, networking and filling out my Flatiron Job and Networking Tracker. All of that while trying to have a life and figure out how to do the upcoming holidays while being safe (not only for me, but for my family as well). Ok… Now onto the real reason for the blog post.
This weeks challenge was to create a pop over for a website or app. I decided to do a popover for a website. I went the route of a login form and I thought “what better a company to do a pop over on then a credit card company especially with the holidays coming up.” I decided to do American Express and not only do one pop over but I did two. I know, I know, OVER ACHIEVER! But in reality it doesn’t seem like 2 popovers. It is considered a pop over in Adobe XD to accomplish what I needed.
I did some research on what American Express looks for in their login form and what the look and feel the login fields should exude. I then took a screen shot of the website for each and every homepage slider they had. I did this to simulate the homepage slider. As you see below:
Once I setup the header slider, I moved onto setting up the pop over login form. I created it to be an overlay on click on the login button in the header. I then went to google and found an American Express logo that I could use and set that as the header. Once I had the overlay and the logo setup, I focused on the form fields and the selection field (which is the second pop over). You can see them below:
After all the artwork was done, the only thing left to do was to prototype it out. I kept the transitions simple since this is a web-based project and it definitely looks and feels like a website. You can see the finished product below.