Every company needs a website. The website needs to be versatile and is the home where all users go to. Users can see the products and get a feel for the company’s values, and they see if the company is genuine. A few years ago, it was easy to throw information on the page. Still, now designers need to place all of the information meticulously so that it is both pleasing for the eye and able to be viewed on various screen sizes. It has to be appealing and easy to read for the computer, mobile device, tablets, and sometimes watches.
For my website, I decided to create a webpage and mobile page for a fake cosmetics company. I used the same logo and font type that I made last week, diving deeper into the company’s importance of identifiable branding. I created the website with a simple blue background to keep it minimalistic, with black font. I added large images to be the site’s primary focus because I wanted them to spark inspiration for makeup.
This homepage was created with simplicity in mind. I wanted it to be super simple but also creative. I looked at the Web Style Guide by Patrick J. Lynch and Sarah Horton, and it had an order of how elements should be arranged on the site. I put the title at the top of the page, with a navigation button on the left-hand corner, and I added a search button, a wish list button, and the cart button on the top right-hand corner. Underneath the title is the navigation bar, with the logo next to the title. The main two images are supposed to inspire the user that comes to the site. It’s hard to fully show a website because there is no way to show what the site would look like if you scroll downwards. The home page is not supposed to have all of the heavy information; it should not be overwhelming; otherwise, no one will want to be on the site.
The next step was to take the webpage and turn it into a mobile page. I knew that all of the information on the webpage wouldn’t fit on the mobile page, so I rearranged the navigation bar. I needed the main navigation bar to be the hamburger button in the corner. According to 5 Tips for Creating Great Mobile App User Interfaces by Parham Aarabi, it’s important to have the ideal button size. It’s also important to keep motion in mind; when someone uses their phone, their thumb can only reach so far on the screen that you want your page to focus on the lower side of the screen. There is such thing as having too much on the screen; as the designer, you need to recognize when you need to add stuff and remove items.
Both versions of this site had almost all of the same items. I had to remove items from the webpage to fit the mobile page. I wanted both sites to look the same and have the same energy because I wanted users to recognize the site without needing to read the title or look at the logo.
Koetsier, John. “5 Tips for Creating Great Mobile App User Interfaces.” VentureBeat, VentureBeat, 12 Dec. 2018, venturebeat.com/2013/04/08/5-tips-for-creating-great-mobile-app-user-interfaces/.
Patrick J. Lynch, Sarah Horton. “Web Style Guide, Third Edition.” Page Structure and Site Design | Web Style Guide 3, Sarah Horton, Patrick Lynch, http://www.webstyleguide.com/wsg3/6-page-structure/3-site-design.html.