Media Websites

image: pexels.com

After researching different websites for audiences like children and american voters, I thought about media websites as well, mostly news publications. I decided to analyze some of these and find out why their design works. According to the poynter.org, these guys got it right.

  1. Identity.
    1. It’s important, according to poynter, that a news’ website know who they are and reflect their parent products’ brands.
      1. EX: The New York Times, MSNBC, USA TODAY
  2. Reader-Friendly
    1. Having a welcoming, and easy-to-read content is necessary for designing a news website.
      1. EX: CNN, Christian Science Monitor, International Herald Tribune
      2. The Christian Science Monitor has a very pleasing balance and hierarchy to its design. This comes from the use of space between items, a clear distinction between the main story headline and other story heads, and not using too many icons. This is a great example of why white space aids readability and creates balance. A dedicated section for ads is placed slightly downpage. The ads have a consistent width and enough space between them that they don’t get lost.

        CNN has a nice short left navigation bar, and picks the top headlines for each section displayed down page.

        The International Herald Tribune has headline with a short paragraph of text highlights the top stories, while the simple navigation points you to a section or region in an easy-to-use drop-down menu. On story pages, you have the option of adjusting the type size and layout so it is most comfortable for you to read. The one weakness is its obvious lack of photography on stories that need that reference to give the reader a complete picture.

  3. Beauty
    1. As you can tell from above, The International Herald Tribune wins this one.
  4. Simplicity
  5. Misc.
    1. BBC, The Washington Post
    2. The center section of the BBC News site has nice, chunky promos highlighting the day’s big stories, and a fairly simple navigation bar on the left. But, the right rail looks like it gets the leftovers thrown at it because of the inconsistencies in color palette and a sea of random images.

      What I like so much about the Washington Post site is that it has its own identity apart from the printed edition. It remains to be seen if that is positive or negative, but it does give it its own credibility. Check out the Camera Works section. It’s the best photo-driven section on the Web.

Free Stock Photos

image: pexels.com

As a web designer, it’s clear that I will need to find clever and easy ways to find photos if I can’t take my own. I thought about the websites that I should know to go to when I need to include photos of places I’ve never been, such as the Caribbean or maybe skiing. I searched a bunch of places I think could be helpful to keep on a post so I can come back to it later when I need it.

  1. pexels.com
    1. I use this site for my blog posts on here! Pexels provides high quality and completely free stock photos licensed under the Creative Commons Zero (CC0) license. All photos are tagged, searchable and also easy to discover through discover pages.
  2. morguefile.com
    1. This website has more photos from people around the world, whereas pexels has high quality photos. If you can’t find it on pexels, it’ll probably be on morguefile. Morguefile is a free photo archive created to serve as a free image exchange for creative professionals and teachers to use in their work.
  3. stocksnap.io/
    1. This is the only one out of my list I have not tried yet. However, it does seem to be very similar to pexels.com due to the quality of the photos. It is also is released under Creative Commons and does not require attribution. No more hassle trying to figure out whether you can use photos for commercial use and whether you need to provide attribution!

One-Page Wonder

image: pexels.com

So I started to create my website a bit too late, it’s due tonight. This made me think of creative ways to design a portfolio. I wanted to make a one-page portfolio, similar to a design I saw when I was comparing weebly, wix and squarespace. According to elegantthemes.com, Divi’s single-page sidebar navigation makes it easy. When you create a new page, you can easily enable “Divi’s Single Page” navigation option, giving any visitors a visual and clickable representation of their progress on the page. You can also use custom anchor links and Section ID’s to create one-page menus for the complete One-Page package. Enabling a one-page navigation is actually easy, and it can be done on a per-page basis. Whenever you create or edit a page, I have to go to the “Divi Settings” box to the right of the text editor. Within this box is a side navigation option. I just need to select “On” from the dropdown menu, and then save the page. Now there is a floating navigation bar has been added to the right side of the page.

The side navigation bar automatically adds a clickable link to each section on the page. When I want to add a new section, a new circle link will be added automatically to the floating side nav. Users can click the circles to skip to different sections on the page. It also makes it easier to identify where the visitor is on the page, makes long-format pages easier to understand and navigation!

Vegan Websites

image: pexels.com

As a recent vegan, I wonder about where they go to find the best recipes and ideas to keep up with their diet. Maybe there are well-designed websites out there that accommodate. Let’s find out.

Due to my research, most of the sites I found are blogs by other vegans. This is how great websites start, though! I found http://blog.fatfreevegan.com/ , which uses flat-designed eggplant as their icon, titled “Fat Free Vegan Kitchen.” She uses the purple in the eggplant in her font as well, and light blues on top of a white background. This is specifically for vegan recipes, with images and a “read more.”

http://www.rickiheller.com/ “Diet, Desserts, and Dogs,” is a website with a host, Ricki Heller. She posts almost daily about her healthy lifestyle, whether it be tricks and tips or whether it’s ok to cheat on diets. We can clearly see her excited face in each of her videos. This already gives off a welcoming, friendly vibe. I’m interested in hearing what she has to say about being vegan because she clearly takes a lot of time out of her day to share her insight. My only issue is her colors, a blue and orange theme, as well as the horrendous amount of ads on the sides.

http://veganyumyum.com/

This is more of a food journal, which I like because it shows a picture of the food the blogger is trying herself, and giving us a review on it. She also adds some of her personality to her entries, which again, I enjoy because it feels more personal.

Designing University Websites

image: pexels.com

According to nngroup.com, there are essential design guidelines a web designer needs to follow in order to successfully create a university/school website. I learned a lot from this:

  1. It is important to clearly identify the university on every page
    The name of the college or university should be clearly visible on every page. Apparently, not everyone arrives at the website from the homepage! NNgroup says that many will arrive on internal pages via search. This means that for subsites and microsites especially, it is essential that users know which university they’re looking at.
  2. Use images that reflect the university’s values and priorities
    This makes sense to my previous post. “Visitors make value judgments about your school based on the images that you use.” So, like JMU’s Duke Dog on the homepage, a few photos of sporting events could help users see an emphasis on athletics. A video gallery with thumbnails of people that all look the same means that users will see a lack of diversity.
  3. Make the “About Us” page count
    I didn’t have a chance to look at either HBS’ or Johns Hopkins’ about us page, but according to NNgroup, the About Us page is one of the top places where prospective students go to decide if a university is a good fit for them!

With these design principles in mind, I’ll forever look at University websites differently. I wonder who designs them!

University Websites

image: pexels.com

I’ve looked up design theories for children’s websites and political campaigns, and now I want to look at what it takes to design a University’s website, such as my school’s, JMU!

I actually didn’t know that Webby had an awards ceremony for the best university/school’s websites, so I’m gonna talk about those. In 2016, the winner was the Harvard Business School, which has a lot of interactions and puts your sense to work because immediately after entering, you hear the sounds of a waterfall and birds chirping. The idea here is a “survival guide” (figure 1). Screen Shot 2017-03-19 at 5.42.00 PM.png

(Figure 1) source: https://www.alumni.hbs.edu/wilderness-survival-handbook/index.html

This is a clever and genuine design for a serious business school. The best part is that when you scroll up or down, the person outlined in white with their HBS backpack walks along the yellow/orange path to their destination. This is a great, interactive way to get students to apply and become interested in the school. However, if I were a HBS student, this wouldn’t be fun to come to often if I needed information on something for my major.

The winner in 2016 for the “people’s voice” on Webby was Johns Hopkins University. This is designed much differently, with a video playing in the background that changes from a student playing a hand game with a child in a foreign country to the fast-paced life of the city in Baltimore. I think that the video already gives insight on what the school is like without having to scroll up or down. I wonder if that’s the goal when designing a university website?

Campaign Websites

image: pexels.com

So I realized that I mostly only know how to design websites based on a mainstream audience, which is people my age or older. But I only recently thought of specific audiences, such as children for their websites for games or even people that need to travel somewhere. But what about political campaign websites?

I searched ideas on what are the most important elements to include in a political campaign website, and this is what I found.

According to a blogger on Brick Factory, there are five great campaign websites that he considers the most effective. First, he talks about Ed Gillespie (R-VA), and his campaign from 2014. He believes that Gillespie had the right idea with his use of photography and the site’s responsiveness. But, he does criticize the video that comes on as soon as you visit the site because it throws off the viewer and makes them think that it was just put there randomly. But what about the political aspects did he like? He mentioned that the Take Action bar on the left that encourages users to volunteer, donate, share or sign up for the email list. It is unique and nicely implemented, just as it should be for a campaign website. Nathan Deal is fourth on the list with his campaign website. This includes bold photography and minimal text, which the blogger believes will always work. What I’m noticing among these sites is the theme of using red, white and blue along with bolded words that have a lot of meaning for their campaign, such as “Donate,” or “Volunteer,” or even their slogan, such as “We can Do better.” From these examples, I can tell that designing a political campaign website relies heavily on appropriate photography with the person running, as well as them actively out and speaking to individuals. I also think that color themes are crucial because, as I have learned in my other classes, colors can make or break a site depending on the shades and blends that you use. Clearly, light greens, blues, whites and browns are usually a go-to. It’s interesting to think about designing a website for a campaign – never considered it to be a future career for me!