Web Design
Everyone knows about the internet. The internet is a primary place for people to gather information, connect, and explore. A person who visits a website makes several choices: to move through it, enter information, search, read, comment, play games, download content, etc. Streamlined design and easy navigation are key to a successful website.
Devices + Screens
Whether a person is navigating the web on their phones, a tablet, or a computer, they are using their devices differently. On a phone or tablet a person is more likely to be using a touch screen and a portrait orientation. In contrast, a computer user is using a mouse and keyboard and a landscape orientation. These factors effect how a person interacts with a website. Webpages need to be easy to navigate and remove the need for excessive clicks or swipes.
Web designers have to ensure that each page is a positive and easy experience for the user. Pages must be responsive to the various screens and sizes they can be viewed on. Some designers advocate designing for mobile first, because it forces you to streamline your content and design. Designing for what each device can do is a good way to think about the user. Think about how people use mobile vs desktop and horizontal vs vertical orientation.
Website Design
Good design and flow is very very important to a successful website. A well-designed website will have a visual layout that provides a sense of location at all times. Getting lost on a website yields to the user getting frustrated and leaving. There's a lot to think about, but to break it down simply, you should be designing for:
your target audience (age, culture, demographic)
the kind of content you're hosting(video, images, text, lists, etc)
clarity and engagement (making information easy to find, involving, interesting)
screens + devices (mobile, computer, resolution)
The Home Page
If you saw my previous blogs, I created a fake business and logo called, Green Thumb Plant Shop. (I wish this business was real! If anyone wants these assets, contact me!) This week I was tasked with designing a desktop home page and a mobile-friendly version.
My target audience for my brand are millennials...because we love plants. This is based off of nothing, other than I am a millennial and I love plants. The kind of content I will host are mostly images and text for online sales or information.
Regardless of device, the home page can set the tone for the entire website experience. From top to bottom of the home page, I thought a lot about the order of importance. The book, Graphic Design Solutions, taught me about information architecture, which is the organization of website content into heretical order. Even though navigating a website is nonlinear, it's important to make sure the most relevant content and navigation is at the top. Each page that users navigate to should have the most important information visible without scrolling, this is referred to as above the fold.
Let's talk about the desktop version:
The top section has the smaller branded logo and navigation. The 'home' button is colored to show the viewer what page they are on. Then there is the 'shop' button, 'about' button, 'visit us' button, search function, and shopping cart.
The header image is the first thing users will see, since it is a large image with the logo. This will tell users they've navigated to the right place. Just below the header image is a brief description of the plant shop.
The navigation, header image, and shop bio is the content I've created to live above the fold. Users get all the information they need without scrolling. They can search for something specific, online shop, find the physical store location, read a brief bio, and more.
Below the fold is second hand content. You can filter shopping for specific products with the 'shop' drop-down navigation menu at the top (not shown here). But you can also quickly shop for just plants or pottery below the fold. The images 'plants', 'flowers', and 'pottery' are all shopping buttons.
Below the products are reviews. I always look at reviews when shopping at a new site, so having a few positive scrolling reviews on the homepage was a nice touch, but not something that needed to be on the top.
At the bottom is the footer. The footer includes the physical store hours along with three methods of contact. The top navigation and footer would stay on each page that the user moves to.
Let's talk about the mobile version:
This mobile-friendly version is compact and streamlined and contains all the content I've created to live above the fold. The top section has a menu drop-down navigation, the logo, a search function, and a shopping cart.
I switched the header image and bio in this version. A lot of mobile versions that I've come across have 'banners' at the top with specials or something similar. With mobile, I assume the user has clicked through from an advertisement. Here they can read a brief, one sentence bio of the store.
The header image is the second thing users will see, since it is a large image with large text. The text "purify your space" correlates to the ad I created in the last blog and comes with a 'shop now' button. Since there is no text navigation in the top menu, I needed a 'shop now' button for easy access.
Below the fold is almost the same as the desktop version. You can filter shopping for specific products with the drop-down navigation menu at the top (not shown here). The only change I made here was the orientation of the images to flow better on vertical mobile devices.
Below the products are reviews and these are the same. At the bottom is the footer. The footer includes the physical store hours along with three methods of contact. I added the social media icons here because the user is already on mobile and can quickly 'follow' the brand.
Final Thoughts
Over the past few weeks I've created and designed a brand, a logo, a color palate, an advertisement, and a website; and that's pretty cool. I'm very happy with how everything came out and I learned so much in the process. Consistency and 'less is more' were my themes throughout these projects because I tend to overthink and try to connect too many dots. Branding is such a fun process for me and I can absolutely see myself doing this in the future!
Resources:
https://blog.hubspot.com/marketing/anatomy-web-design
“Web, Mobile, and Motion Design.” Graphic Design Solutions, by Robin Landa, Sixth ed., Cengage, 2019, chap. 13.