Gaming Websites

image: pexels.com

I talked about children’s websites, tourist sites, political campaign sites, and even websites for vegans. Now I decided to look at gaming websites, and what makes their design so perfect for their audience – gamers.

I took a look at Hawken, which is said to be the best game website out there in terms of design, and it brings a somewhat different approach to video game websites because it blurs a video game site with a community website. This site features an great looking slider, a blog, video portal and community driven pages. Hawken’s website truly brings a unique experience.

Dead Island: Riptide is the next on the list, which is a pretty impressively designed site because it has great “flowing” animation to it, with a few unique features that can be played around with using your cursor. As you navigate through the website you will find that the animation and graphics are really tailored to the user’s viewing experience.

A popular gaming site, Halo: WayPoint is the third best designed.  Waypoint brings the creativity and the style of the Halo games right into the website with its design, menu and beautiful fonts. It features a slider with a fresh Halo look and Halo styled video players, which allows for easy and simplified user engagement. This site brings the Halo experience online with leaderboards, game stats, forums and blogs.

One I am familiar with, Animal Crossings: New Leaf, is the fifth on the list. This magical life simulation children’s game has a colorful and artistic design with music, animation, guided tours and even has a built-in community website. As you navigate through this website you may just get inspired to create a unique colorful, animated website design of your own.

And finally, one I know most people have played, Plants vs. Zombies, is also on the list. This website really brings all the information and content you really need on one page; no need to navigate through unnecessary pages. The website also has integrated the actual game on the homepage with links and images linking to full versions to the game.

Photography – why is it important?

image: pexels.com

According to squaremarket, pictures can make or break a company/industry website.

Pictures are typically images that represent a business. Some common mistakes that many businesses make is using something generic. Squaremarket recommends pictures of people who represent the company’s best prospects. The article goes on to explain that the pictures and the messaging on a home page should work together harmoniously. Pictures on the secondary pages are less important because “people pay far less attention to these.” Secondary page images are used to break up the text and create visual appeal. Something that is becoming more popular are graphics, or infographics. Businesses are constantly telling stories in their marketing. That means their website should be their ultimate story teller. Graphics, especially infographics, provide a lot of information in an interesting and efficient manner, allowing visitors to get a complete story from a single image.

Although this article was helpful, I would like to learn more about photographs that people can use, or maybe even illustrations or animations – how far can a designer go?

After the design

image: pexels.com

So I’ve basically only been covering design theories and how a site should look based on the audience. However, I wanted to search words that designers/web creators should and should not use on their site. I found a site that talks about certain words that could possibly increase web activity!

First, for companies that are selling a product, these are words that, according to research, increase web traffic.

1. alleviate
2. avoid
3. bargain
4. best
5. bonus
6. coupon
7. gain
8. get rid of
9. heal
10. new
11. prevent
12. restore
13. reviews
14. training
15. scam

According to orbitmedia, “As Google evolves, search results are based less on specific phrases and based more on general meanings. This benefits websites that have sections of many pages relevant to the wider topic, all related and interlinked. Creating several pages using buyer keywords helps indicate that your site is relevant for the broader, semantic meaning.” This means that as a designer, it is important to know certain keywords and phrases that can attract attention.

Another piece of information that can help people when designing their site is thinking about clever headlines. According to orbitmedia, these are a few words that have created viral posts.

1. smart
2. surprising
3. science
4. history
5. hacks
6. huge
7. critical

The article goes on to talk about words that can help gain retweets on Twitter, or what a subject line should look like for an email. It’s crazy to think how certain words can change the game.

Best Designed Apps

image: pexels.com

I just went over the best apps for design tools, but what about the best designed apps? Let’s see what there is out there that comes out on top.

First is the Arles Festival App. Clarity is one of the essential elements of a good UI design. It should not confuse your users nor give them a hard time figuring out how to use your interface. And you can find that in this app designed especially for the Arles Festival, which has around a hundred thousand recorded visitors annually since its inception.

Next is the Eda.ua – Food Delivery iPhone App. This mobile design version for an existing website is designed by a group of designers from the Ukraine. The app has both an iOS and Android version with a very friendly UI designed especially for the food delivery business. In order to meet usability standards, the designers conducted intensive market research and took note of various offbeat ideas. Then, they created and tested an interactive prototype with over 100 wireframes to ensure that the app design meets the needs of the client’s business.

Third is the Workout Book App. Unlike other workout apps, the Workout Book easily records your workouts and lets you see all the necessary information at a glance right on the home screen. Create your own workout with just a flick of your fingers and press save. Customize, set the day, and the targeted area you want to work on. Each workout has a color tag so you can easily look over them and monitor what you have missed.

App Design

image: pexels.com

I wonder about app design frequently because I think that one day everything will be on our phones. Since everything is becoming more and more fast-paced, I researched the best design tool apps, in case I want to follow a career path in designing them.

First, there is Evernote. Evernote is one of the all-time best apps out there for keeping organized. It works across devices – smartphone, tablet and desktop over the cloud, so once you save something you can retrieve it anywhere. And with extra add-ons like Web Clipper and Skitch you can “save” webpages to a personal file and then mark them up for reference. It is a great way to bookmark and create reading lists that you can go back to at any time. Evernote also offers a paid, premium account that offers added functionality such as shared notes and files. Evernote is available for desktops (Windows or Apple), iPad/iPhone, Android and Blackberry.

Photoshop Express sounds perfect! We can all agree that very little intense editing is being done on tablets and phones right now. But for simple touchups and edits, Adobe Photoshop Express is a great tool. For those already using Adobe products, there is a very small learning curve and it looks and works as you would expect. Simple tools are included with the download and a few more advance features are offered in-app. There are fun tools for added effects, giving you more control than Instagram and sharing is made easy too. Adobe Photoshop Express is available for iPad/iPhone and Android.

Beehance is a familiar name. I didn’t know they had an app! The Behance app allows you to have your portfolio at your fingertips. Show off your portfolio in seconds and use the app to browse for ideas. It has all of the functionality of the full website in a portable format.

And of course, how can I live without a color palette generator? The Color Schemer app is a fun little tool that lets you create color palettes or browse some of the ones created by other users. The app helps you create great RGB or HEX color pairings using photos, or with the built-in color wheel.

 

Designer Videos

image: pexels.com

I want to keep some videos on file that I can come back to to learn how to use design tools on programs like Adobe Illustrator and Photoshop. Below are a few Youtubers who have the skills!

Stephen is the creator of the Graphic Designer Tips YouTube channel, which is one of the best online resources for learning Adobe Muse, and Adobe Illustrator, as well as the overall Logo Design and Print Layout Design process. What makes Stephen’s channel unique are his series. Stephen has multiple 20 video deep playlist walking you through projects from start to finish. (https://youtu.be/KkK8_DsJEIw?list=PL9k8t41FVBP70wl9cyyYNVYOE7hLXZvaN)

Shawn Barry has created some of the most in depth and well-produced content for learning the principles of Graphic Design. Shawn is a Designer from Canada and has been an agency Creative Director and brings that experience to the table through his content. Shawn’s design lectures are a must for anyone trying to build a strong foundation of design knowledge and develop a true eye for design and visual communication. (https://youtu.be/owZvImgo57s)

Logo designer Will Paterson is a very popular and easygoing UK Design YouTube creator who primarily focuses on logo design, Brand Identity and Adobe Illustrator. Will’s videos inject a lot of humor in addition to great information that is easy to consume and understand regardless of your experience level. His personality has made him a favorite channel for many designers. (https://youtu.be/dPpZxq0fJRo)

Magazine Websites

image: pexels.com

Now, I’m going to look at the best magazine websites based on their usability and design. Because I did news websites, I thought it would only be better to do magazine websites, seeing how most of what we read is online now.

First on the list is Time Magazine. At a time (no pun intended) where the world needs access to a reliable news source, Time magazine has stepped up to the plate. They have built a site that is both easy to read and responsive. By displaying the featured news items on the left and the latest headlines on the right, Time Magazine has found a great way to balance the screen space.

Second is GQ Magazine. It’s no secret that GQ is one of the most popular men’s magazines out there, so why not try and achieve the same for the website. Right off the bat, you’re hit with fashion imagery with a banner that stretches from edge to edge. As you scroll down, you find a list of articles laid out beautifully in a stylish grid.

Third is National Geographic. Known for their beautiful photography, National Geographic spared nothing in bringing these images into their website. The site boasts simplicity and showcases big images with large, easy-to-read fonts. Each article is not limited to just one large image but comes with a variety of powerful photographs, some of the things that we’ve come to expect from this brand.

Last but not least is Newsweek. Newsweek’s website not only looks amazing on a desktop, but it also comes in a responsive version so you can access it anywhere on the go. That’s great since their website is full of amazing imagery and intriguing news stories. After clicking on an article to read more, you’re given a navigational bar that gives you access to all of Newsweek’s featured items.

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!