Designing for Desktop and Mobile Use

HomePage_final

Web design is one of the most critical factors for the success of a website. The design of a site is their primary factor for judging a company’s credibility, which also influences conversions, bounce rate, and more. Websites need to evolve continuously to stay current with users and search engines. To meet the users’ needs, you must have a responsive design so that users can view the site, whether on a desktop or mobile phone.

As smartphone use grows with more than half of the world’s internet traffic coming from devices, the requirement for mobile-friendly sites grows. Responsive design uses adaptable layouts, so a website layout will adjust but remain relatively the same on desktop, mobile, and tablet devices. Your content and your design adapt themselves to a user’s device automatically.

Screen Shot 2020-02-29 at 3.11.24 PM    CNN - Breaking News, Latest News and Videos

Keeping the user in mind and how they will experience the site will assist with the overall design effort. Here are the best practices to follow, according to Ed Johnson in the essay “Mobile Design Crash Course”:

  • Grids – Users expect consistency in the site experience. Using grids will help with the UI design. You should align the layout with adequate space between each element.
  • Column structure – This will help organize the layout across the screen.
  • Responsive design – It is essential to think about where the content will break on devices. Designing with these breaks in mind will aid you in creating the best user experience.

Design teams will often design using a column grid, creating a prototype to test, and when finalized, passing it onto the development team to replicate the design.

Assignment

This week I used the fictitious company I had designed the logo and ad for previously to visualize both a website and a mobile layout. I wanted to maintain the nautical theme and colors and provide a clean design with simple navigation for the user. The company’s mission is to provide sustainable materials and natural products for their customers. They manufacture their dog beds and supply locally produced food and treats with a focus on customer interaction.

HomePage_final

The top navigation consists of home, shopping, events, and about us, with the logo clearly visible in the top left corner. The welcome copy contains a short description of the company. I positioned it next to the image of the adorable puppy used in the ad. Next, there is a description of the dog beds explaining why you will love them. This section also contains buttons to connect to Facebook, Instagram, and sign up for our monthly newsletter. On the right, there is information on recycling old sails and the customized yacht insignia that each bed contains.

The shopping page would have new items, popular items, and anything on sale. The events page would show store events, adoption events, local community events that help area animals, and sales promotions that are coming that month. The about us page would give a history of who they are and why they do what they do.

Mobile

mobile

For the mobile design, I kept with the same look and feel minimizing the logo image at the top left. The menu is located clearly in the top right corner as a hamburger dropdown. Underneath Welcome, I have also added navigation with a short description to engage the user. The bottom has the social links as well as an opportunity to sign up for the newsletter.

If the user were to scroll down, they would see additional information on the recycling of retired sails as well as more details of the custom beds.

 

Resources:

Landa, R. (2019). Graphic design solutions. Boston, MA: Cengage.

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