HTML5 Elements & Old Browsers

Graphic Design, Web Design

Another day, another blog. Introducing HTML5. For those who don’t know what this is, it’s Hypertext Markup Language – the most recent language of the internet used for describing the contents of a webpage and how it looks.  It has been updated to allow for more efficient content and improved performance.

Just a short video that explains HTML5 in simple terms:

There are new media elements such as <video>  and <audio> which define a standard way to embed them into a webpage. These are good for web design, especially the <video> one, because it is no longer necessary to use plugins to view the videos.

List of HTML5 Elements

While these elements are supported in modern browsers, it’s important when designing a webpage to keep in mind older browsers and what to do if they aren’t supported. The main browser that doesn’t recognise some of the elements is Internet Explorer. I’ve been looking into some different ways to get around this so the elements can be recognised. A tool that has been found to workaround IE is the HTML5Shiv. This is a code that can be put into the <head> element so that IE can read them.

I also found a website that can test how well a browser will support HTML5 so this could be a handy tool to see and compare other (and older) browsers and determine which ones your elements may not work in.

HTML5 Test

It gives a score based on a number of semantics and then breaks it down even further.

Advertisements

Websites: Good vs. Not So Good

Uncategorized

This week I’m going to show you a very impressive website and then another website that is not really as impressive.

Impressive Site:

http://grainandmortar.com

So what elements from this website could be used in my own web designs…all of them? Ok, I’ll try to just pick a few.

  • It’s really simple and minimal!
  • The simplicity of the navigation. The main navigation is fixed at the top of the page and there are other sets of navigation panels to get around other pages.
  • Text and icons are highlighted when you hover over them.
  • The website is a long scrolling site. You can just keep strolling instead of clicking through a whole heap of links. (Side note: I found another great example of super effective scrolling is: http://www.quoplus.com Enjoy!)
  • The images. They are big, great quality and help to promote the website. They also use a number of handy illustrations/icons for different sections of the webpage.
  • Having ‘About’ and ‘Contact’ section is important so viewers can tell straight away what the website is all about. People like to know about other people.
  • The information in the footer bar.

Unimpressive Site:

http://www.suzannecollinsbooks.com

Now, Suzanne Collins is a great author but I think she may need to invest in a new website.

  • New fonts would be a good start.
  • A new layout — on the ‘Works’ page there’s big images of her books and then not a lot of text which leads to way too much white space. The side bar doesn’t look very good – it’s full of short quotes which is unnecessary because on the home page under each image are even more reviews of each book.
  • A new colour scheme — maybe to match her books.
  • Maybe highlight The Hunger Games as it is very popular and a best selling series.

There are many more changes that could be made to this website but I won’t go into any more because I’ve gone on a bit too long here.

Thanks for reading.

– KH

What’s trending in Web Design?

Uncategorized

I’m currently doing a class on web design and we are looking at some of the popular layout trends around at the moment. While there are numerous current web design trends out there at the moment, I’m just going to give you a quick summary of a few I think are the popular and therefore make for some pretty effective websites:

  1. Filling a single screen with full width, high resolution images or videos. When it’s an image sometimes it will be a scrolling slideshow to highlight different aspects of the website.
  2. Responsive design – this is where the website adapts depending on what device you are looking at it on (computer, tablet, smart phone, etc.)
  3. Scrolling instead of clicking – the background moves at a slower rate to the foreground.
  4. Modular/grid/card designs – very organized and is responsive, can browse a lot of data, clean and simple.
  5. Flat designs – clean designs, bright colours, two dimensional.

Websites need to grab your attention and make an impression pretty quickly otherwise viewers won’t stay on the page and this is a big problem – why have a website if no-one is going to look at it? McLeman (2015) found that you only have up to eight seconds to get the viewers attention.

Websites that demonstrates some of these trends:

Websites that needs to adopt some of these trends:

I found an infographic that goes through some of the trends I’ve mentioned and then one or two different ones as well.

References:

Ali. (2015). 5 Best Web Design Layout Trends for 2015. Retrieved from: http://designposts.net/best-web-design-layout-trends-for-2015/

Kunwar, A. (2015). 10 Web Design Element and Layout Trends That Dominate in 2015. Retrieved from: http://www.pixelatingbits.com/10-web-design-element-and-layout-trends-that-dominate-in-2015/

McLeman, D. (2015). Is your site lagging behind web design trends? Retrieved from: http://crosswebideas.com/web-design-trends-2015.html

Randall, A. (2015). 7 Top UI Design Trends for 2015 & Beyond. Retrieved from: http://gotgroove.com/ecommerce-blog/7-top-ui-design-trends-2015-beyond/

Weller, N.B. (2015). Web Design Trends to Look out for in 2015. Retrieved from: https://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015

Social Media & Your Career

Uncategorized

Hey everyone. Let’s get started with this week’s topic: Social Media & Your (My) Career. How can social media be used for your career? What sort of strategies can be employed?

Here’s a video to start us off:

(Not so much the plug for Social Media Quickstarter, although it could be a good resource for starting your social media presence). They have a few other videos on their Vimeo page if you want to check them out.

Getting straight into it, in today’s day and age social media is a vital tool for anyone in the creative industry. As a graphic designer one of the pathways is to become a freelancer or starting your own design studio. For these options, social media becomes an important platform where designers can be found and get in touch with. Steve Nicholls (n.d.) has seen an increase in the number of freelance designers due to social media and therefore believes, social media and freelancing go hand-in-hand.

I found an article by Melanie Perkins (2014) that has four tips on establishing a successful social media presence for new and existing brands but I think they can also be applied to graphic designers looking to start promoting themselves. The first tip is having a consistent colour palette. Choosing the same colour (or the same two to four colours) and using it for all social media posts (across different platforms — i.e. Twitter, Behance, Tumblr, Instagram or one of the many others which are out there) will help viewers recognise your company (whether it be an agency or a freelancer). The chosen colours should be representative of the designer and they can be used in a logo, text, images, etc. The next tip is choosing typefaces that go together and which also reflect the designer’s personality. In the case of typefaces, Perkins (2014) also suggests using a maximum of three fonts and using them consistently. The third tip is to use the right images that follow the same theme and in some cases, any filters that might be used. Last up, there is the suggestion of using a template – creating a style guide to ensure each element works together and stays (relatively or recognisably) the same for each post. In the end, the main point I’ve taken from this article is that consistency is key. If it’s consistent, it becomes recognisable and if it’s recognisable it will become memorable to viewers.

Nicholls (n.d.) outlined four ways a graphic designer can use social media to enhance a client’s experience.

  1. Communication – graphic designers can use social media to communicate more often and more efficiently.
  2. Collaboration – with the use of social media, graphic designers can find the “right” person needed to work on a new project.
  3. Communities – new communities (networks) can be created (or joined if they are already there) to help spread the word about new projects/products.
  4. Collective Intelligence – a tool to keep track of what is trending (popular at the moment) and get feedback about projects/products.

Facebook StatisticsFacebook Statistics 2Twitter Stats

Perkins (2014) finishes the article with an interesting statistic:
“In the time it took you to read this article, approximately 500,000 new posts would have appeared on Twitter, 3 million on Facebook, 15,000 on Instagram and many, many more.” That is a little bit daunting when you think about it, but it’s also full of possibilities and chances to get your voice out there.

As I’m at the stage where I need to be creating an online presence and portfolio I’m beginning to realise how important it is to have a clear vision in place before using social media. From the articles I’ve read I can see that having a plan to follow will lead to a more successful social media presence and I’m hoping that I can use these tips to create a creative, consistent portfolio — one that will become recognisable and memorable. I’m also becoming more aware of the benefits of using social media to promote my works. It can be used to expand networks, collaborate with other designers, keep up to date and communicate with viewers, consumers, clients and more.

While looking into this topic, I have also found a number of articles that mention another benefit to the rise in social media that doesn’t relate to utilising it to promote yourself and your graphic design portfolio. This is the fact that graphic designers are in high demand. Businesses are realising the importance of social media and marketing so they are seeking out designers to help them creatively and more effectively promote their brand. The social media page for a business (depending on which platform they are using) will need to include banners, specialised logos, sales and promotions (holiday seasons, special events, etc.), advertising and inspirational quotes (The Social Observer, 2014). Each of these items needs to be creative and consistent in order to effectively represent the brand. The infographic below illustrates how much time should be taken on some different aspects of social media.

Social Media Time Spent

Social media marketing has become important in two different areas with regard to graphic design. Firstly, in the way I can use it to market myself as a graphic designer — being creative, consistent and using different elements to represent who I am through my posts. Secondly, due to it’s recent rise, it has become a new avenue to gain clients as businesses start looking for graphic designers to market their brand through social media.

Here’s some other articles that might be worth reading in regards to social media marketing:

  • What Not to Say When Promoting Your Freelance Business on Social Media by Robert Lanterman
  • Getting Started With Social Media Design by Anna Guerrero
  • Use Social Media to get Design Work: 25 Pro Tips by Gary Marshall

Thanks again for reading 🙂

Reference List:
Bogdan, E. (n.d.). Graphic Design + Social Media. Retrieved from: www.slideshare.net/mobile/ericabogdan/graphic-design-social-media-9663508

Guerrero, A. (2015). Getting Started With Social Media Design. Retrieved from: https://designschool.canva.com/blog/getting-started-social-media-design/

Lanterman, R. (2014). What not to say when Promoting your Freelance Business on Social Media. Retrieved from: www.millo.co/say-promoting-freelance-business-social-media

Marshall, G. (2013). Use Social Media to get Design Work: 25 Pro Tips. Retrieved from: www.creativebloq.com/career/get-work-with-social-media-1012939

Nicholls, S. (n.d.). The Importance of Social Media for Graphic Designers. Retrieved from: www.graphicdesign.com/article/social-media-graphic-designers/

Perkins M. (2014). How to Develop a Strong Visual Brand on Social Media. Retrieved from: blog.hubspot.com/marketing/strong-brand-voice-social-media

The Social Observer. (2014). Social Media for Graphic Designers: Benefits and Drawbacks. Retrieved from: www.thesocialobserver.com/social-media-graphic-designers-benefits-drawbacks/

Inclusive Design

Uncategorized

The topic this week is inclusive design — making sure widening the reach of your creative projects, attracting greater diversity, not being discriminatory and making it accessible to all. When I first started reading this lecture I wasn’t too sure how it related to graphic design specifically. I could definitely see how it related to gaming, animation, film and television, and maybe even audio, but I struggled to find the connection to graphic design. There was a section that related to vision impairment but it only discussed colour blindness and as my teacher pointed out, if a client wants a red logo, it’s not likely they will pick a different colour just because there’s a one in seven chance of people who won’t see it as red. So what did I do? Research of course. In the next few paragraphs I’ll try and tell you a little bit about what I’ve found out.

One aspect of inclusive design is accessibility. As it says in the lecture, this can include people with visual impairments, anyone who has hearing difficulties, mobility impairments or people with cognitive disabilities. This video (and the website) outlines the importance of accessibility:

What is Inclusive Design? Here is a definition of it:

Inclusive design is design that is inclusive of the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference. Designing inclusively makes better experiences for everyone.

For graphic design specifically it means:

Creating messaging which is as accessible as possible to the widest audience as possible. Not only is it good practice, the more inclusive your literature or online presence is, the wider your reach.

With the notion of making the experience better for everyone, I came across the idea or the suggestion that it would be good to actually incorporate inclusive thinking into your design process so that it won’t matter who your project is being created for it will just be one of the steps you follow. To be inclusive it is important to understand and empathise with people, i.e. who the design is being created for, their needs, their wants, their beliefs. This is illustrated in a video put out by the Design Council:

In the video, they also discuss the importance of design being inclusive from the start. It is important for projects to not be specifically made for someone who is disabled because in some situations it could make the viewer uncomfortable. I liked the line that was something along the lines of “designs shouldn’t shout inclusive, it should just be inclusive.”

Paul Nini discusses how graphic design is both exclusive and inclusive. In an article he wrote “the actual practice of graphic design is most powerful when an inclusive approach is used” and goes on to give the example of the ‘election design’ project. This project involved the design of new ballots and other materials necessary for an election. The project was successful because the designers took an inclusive, user centred approach and made sure the material could be easily used and accessible by all.

Ewelina Woloszyn outlines three problems which are specific to graphic designers and offers some suggestions on how to address them to be more inclusive in your designs. The first condition is dyslexia — the difficulty of reading or interpreting words, letters and symbols. Woloszyn suggests its more comfortable for someone with dyslexia to have the type on a coloured background and the colour of both the background and the type is also important (think about the contrast).

The other two conditions are sight loss and colour blindness. While it may be hard to accommodate colour blindness in all designs you work on, there are still a number of considerations to think of. Some of these are outlined in an article by Alex Bigman – “Why all designers need to understand colourblindness”.

After this weeks lecture and the research I’ve done, I believe it’s important to be inclusive when working on graphic design projects. I realise that in some cases it might not be possible to be inclusive but I believe it is still important to look at the project from a different point of view and rethink the functionality of the design. In the end, it all comes back to how important it is to understand the customer and the client.

As always, many thanks to those who have taken the time to read this. Hope you enjoyed it.

– KH

Reference List

Bigman, A. (2015). Why all designers need to understand colourblindness. Retrieved from: https://99designs.com/designer-blog/2013/04/17/designers-need-to-understand-color-blindness/

Boho Creative. (2015). Inclusive Graphic Design. Retrieved from: http://www.weareboho.co.uk/services/inclusive-graphic-design/

Design Council. (2014). Inclusive Design: from the pixel to the city. Retrieved from: http://www.designcouncil.org.uk/news-opinion/inclusive-design-pixel-city

Nini, P. (2009). Exclusive + Inclusive: The Twofold Nature of Graphic Design. Retrieved from: http://www.thinkingforaliving.org/archives/1301

RGD. (2015). RGD: Accessibility For All. Retrieved from: http://rgd-accessibledesign.com

Woloszyn, E. (2011). Inclusive design guidelines booklets. Retrieved from: https://www.behance.net/gallery/1469095/Inclusive-design-guidelines-booklets