Designing: Mobile and Web Pages

Curl Cosmetics, Web Page

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.

Curl Cosmetics, Mobile Screen Webpage

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.

References:

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.


One thought on “Designing: Mobile and Web Pages

  1. Hey Kim,

    I love the company and website idea. Your original logo from the week before is extremely creative since you decide to o=go with no text and just have a distinguishable icon as your logo. The use of such bright and red-filled photos against a mainly bluish-purple background was a really nice design move to make the photos jump off the page as all 3 colors do go together but the purple and blue give it a cool tone while the red is an opposing warm tone.

    I like both pages design the only thing I would say for your mobile design is maybe putting the icons on the upper right side down at the bottom in that blank space and moving the upper left ones over to the right since the upper left is the hardest part of the screen for people to get to when holding their phone with one hand.

    Overall great job and I like the very unique design and branding of your fake company.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s