Category: Blog

Is it ever okay to use a template for design

When a lot of creatives read this blog title I imagine a combination of fear, disgust and anger will be running through their veins at the suggestion of such a thing but in all honesty, even though I am a designer and creator of branding there is a place to using templates. In this blog post, I discuss several places when and where it is okay to use a template for design of a new digital presence. Continue “Is it ever okay to use a template for design”

Dos and donts of building your Instagram account

I have been using Instagram for over a year now and probably, not in the right way for building a following that relates to my brand.

I used it more as a way to store photographs of my personal life which is okay for some if that is all you want to do with this visual social media tool but I have bigger plans to connect with the world, fellow creatives and share my inspirations with people.

I realise if I use Instagram correctly to build a brand I can reach potential customers in a new and more entertaining way. But like anything, it is simply understanding tools properly to help you grow an audience that is interested in what you have to offer. Continue “Dos and donts of building your Instagram account”

How to create the perfect blog post, a step by step guide

Blog post to perfection, learn how to create the perfect blog post with this step-by-step guide.

With the help of this step-by-step guide, you will soon become a master blogger of supreme SEO goodness. The first two stages I have created are for those who just want to get started in blogging and the stages after that are for those who want to take their blog posts that step further and make them super-powered to boost traffic to your website. Continue “How to create the perfect blog post, a step by step guide”

How to add accurate subtitles to your YouTube Videos

This may seem quite a strange thing to blog about but something that is becoming increasingly important to me is how accessible the content I provide to web users is. YouTube does have automatic subtitles when you upload a video but sometimes it doesn’t pick the exact words which can be humorous but not good for those who are hard of hearing or deaf. Adding the correct words to your YouTube subtitles will benefit your accessibility for those with hearing difficulties but also help others that may not be able to understand regional acsents so well so may call upon the subtitles.



How to add accurate subtitles to your YouTube Videos

Once you have uploaded your video you will come to a screen with your video and a few tabs at the top. If yo look at the image below you will see a tab named  ‘Subtitles and CC’, click it.

displaying automatic subtitles of YouTube Videos

Next you will see options to click  English (Automatic) subtitles that YouTube automatically provide, once again, click this ( see image below if you are unsure what to click ).

 

add subtitles to your YouTube Videos, picture of editing captions

Now you are able to edit the subtitles in the automatic feature. You will find a lot of the subtitles that have been created are very wrong. YouTube does try it’s hardest to pick up all the words spoken but if the video star has a strong acsent it will struggle, a lot! It can be quite humorous to watch but it is not good accessibility. Follow these two simple steps to make sure they are correct for those who wish to use the subtitle feature on your videos.

  1. To edit the subtitles let the video play and then click on the subtitles to replace what is being said accurately.
  2. As video plays click subtitle to stop section of video, also click time if it does sync correctly and change the time length to show the words you have edited to perfection ( see below to see subtitle being edited).

featured

Once done there is a button at the bottom called publish. You bet you know what to do next, yep, click publish!

Now when a user watches your video and needs subtitles they will get the correct words display.

Well done you have added accurate subtitles to your YouTube video, you are on your way to providing a better user experience for one and all.

If you get stuck please feel free to contact me or leave a comment below and I will get back to you asap.




    The importance of accessibility in web design

    Web design isn’t just about putting your message across to as many people as possible it should be attractive, provide useful information, creates enquiries/sales, attract your right target market and be easy to navigate. As we all know we are all individual with unique characteristics, beliefs and abilities and it is important to make your website accessible to EVERYONE! It is part of the law that you consider the accessibility of your website in the perception of the able and disabled people in the world. Visit the W3 where they have put together documentation about web design accessibility.




    Different disability accessibility in web design

    Visual accessibility in web design

    Visual ‘disabilities’ can range from blindness, to being short sighted, to being colour blind on varying scales and when designing a website you must keep in mind how different people see and access your website.

    Images

    How do blind people see images you may ask? Well there are two ways they are able to understand the context of images on websites. Firstly in every image there SHOULD be an ‘alt’ tag, this alt tag is to allow screen readers to describe what the image is displaying. For example if you have a picture of a cat wearing a tutu you don’t put ‘a funny animal picture’, it simply isn’t descriptive enough, put exactly what is in the picture ‘ a cat wearing a tutu’.

    altag

    It has been common practice for a lot of web designers to use the alt tag to put the main keyword of the webpage into the alt tag which is fine (to some extent) as long as it is still descriptive enough to explain to those who need the alt tag to have a good web experience.

    flowers to display what different types of visual disabilities may be like

    Ease of reading through contrast

    A lot of people, in particular men, suffer with some form of colour blindness. This can range from not seeing one or two colours correctly to seeing everything entirely in greyscale (black and white). It is for this reason that there must be clear contrast of colours for those with colour blindness to be able to understand visual layouts correctly otherwise important information may get lost.

    Is the text and the interactive features large enough?

    Another disability that needs to be considered is partial sightedness. Sometimes a person is not entirely blind and can see some visual information, this should be considered when not only selecting the font size of the typography but also when designing the clickable areas of buttons and interactions.

    Tools to test your website’s accessibility

    A tool you can use to see if your site has considered visual accessibility in web design is a tool called spurapp.com. This tool takes your website and gives you all the scenarios to understand where your website could improve upon its visual design in terms of accessibility.

    Access to photo editing software?

    If you prefer you can do test with any photo/graphic editing software by taking a screenshot of your website and taking away the colour to see how the contrasts of elements look, use the Gaussian blur tool to see how readable the website is for someone whom may be short sighted.

    Hearing accessibility in web design

    a picture of two ears for discussing hearing accessibility

    Something you may not have considered is hearing accessibility. If your website has podcasts or videos you are going to need to consider how you are going to communicate the information to those whom are hard of hearing.

    If you are creating podcasts it is quite important that you also include a transcript. Although this can be time consuming it is not only helping everyone be able to access your fantastic information, it will also be highly beneficial and also have the effect of helping you be indexed by Google if it is written in html with the correct syntax.

    Likewise, if you have a YouTube channel for your business there is also the option to include ‘auto’ subtitles. This is fantastic that YouTube are trying really hard to include accessibility and make it as easy as possible for video creators to include them but sometimes the words are just plain wrong and can confuse matters! Instead, I recommend taking the time to write your own subtitles to ensure the ‘write’ words are shown .

    Device Accessibility

    responsive web design accessibility
    And last but not least is device accessibility in web design. For quite a few years now responsive design has been at the forefront of designers who care about doing a good job. If a business has a responsive website it shows that they care about their users experience and not just about having a digital presence.

    With more and more users now using mobiles and tablets to acccess website it is important that pinching and squeezing to read and view information isn’t a part of the user experience. It is uncomfortable and may give the wrong impression to visitors.

    If you already have a website with lots of content it may be a little difficult to include responsive css code but if you are creating a new website it is much easiser as you write the html and then add css with something like @media screen and (min-device-width: 481px) and (max-device-width: 768px) {enter styling here}. It is quite easy to learn how to do this but if you need help you can find lots of information throughout the web but personally, I recommend using Teamtreehouse.com, i’ve been using it for over 6 months now and good practice of web design/development is made quite clear and easy to comprehend through the platform.

    Accessibility is good for everyone

    When you start putting accessibility at the forefront of your mind when designing websites and user experiences then not only is it going to benefit people with disabilities but it will also have the benefit of making your website more compliant with w3c web standards, making your site easier to index, improving organic search results and making your site run as efficiently as possible so remember, accessible web design is good web design.

    If you have any extra points please feel free to leave a comment below.




      Create infographics easily without Graphic Design Knowledge

      To create infographics takes time, fact. Anyone who has ever had the inclination to design an infographic will know they are not that simple to create, you first have to collect your data, then select how you want to represent that data, is there a particular theme you can adhere the information to? Next you need to create graphic elements that will communicate the date effectively and lastly is there a way you can create a sense of flow in the layout.

      create infographic



      Create Infographics faster

      As you can tell that really does take time! Luckily for those without graphic design skills do have an answer to their prayers, easel.ly. This website allows you to create infographics from a basic template without the need to have spent time learning the mainstream vector creating programs. Below is a brief introduction into just what is possible with this fantastic infrographic tool.

      Although this is a great tool for the novice graphic designer it can be quite limiting to what is possible and that is why an infographic created from scratch by a professional digital designer will always be slightly more professional and detailed than one created via a platform such as this. If you need an infographic quickly, maybe for a blog post and don’t have the funds to hire a designer at the moment this is a great option but otherwise I’d still recommend hiring a designer to communicate your data as professionally as possible.




      Have you used easel.ly? How did you find it? Do you know of any other infographic programs? Please feel free to comment in the box below.

        Architectural Model 2005 | My favourite design

        From 2004 to 2008 I was a part 1 Architect student and part of the course was to create scale models of the designs I was creating. This was a radical bookshop on a bridge design that got my highest marks and was also my favourite design that I created in the 2nd year of the course.




        Architectural Model and the idea behind it

        The idea is that because the bookshop sold alternative books and a different way of thinking about things then the bookshop should also reflect that in its geometry by not following the forms of that surrounding it. In terms of material the external part of the building would be clad in wood and the internal walls would be metal, again juxtaposing what is expected to be found in a building.

        The bridge itself would re-use some materials that the original bridge was replacing and allowing visitors to graffiti on the bridge just like what it used to have.

        The bridge is a place for those with alternative way of thinking to reside and meet, discuss and philosophise. If only a place would exist rather than  creating shopping mall after shopping mall, office block after office block.

        Site visit before creating and designing the Architectural Model

        In the images below you will see the shop that I designed the bridge shop for and a few images of the original bridge and the new location for the shop to reside. 

        I hope you enjoy viewing the site and the architectural model, I promise to be blogging about graphics, web and marketing in my next blog post.

        news from nowhere shop

        bridge creambuilding

        architectural model by JAWilsonDesign

        architectural model by JAWilsonDesign

        architectural model

        architectural model by JAWilsonDesign

        architectural model by JAWilsonDesign

        architectural model by JAWilsonDesign

        architectural model by JAWilsonDesign

        architectural model front view

         




        Toxteth Architectural Masterplan – 2007 JMU students

        In 2007, during my architectural degree I was assigned into a group of four and asked to come up with a plan to regenerate a part of Liverpool that had long been in need of some refurbishment for our CDP, a Toxteth Architectural Masterplan CDP. So we sat around a table and firstly discussed our ideas on how we should tackle it.




        Researching the past

        We decided to do some research and discovered that Toxteth used to be a hunting ground for kings of old and then later the home to many dockers and traders of the shipyard docks until the early 20th century. Realising that as a group we had environmental thinking as a priority we wanted to use the idea of the woodlands as a basis for our design and also to show the beauty within Toxteth that has been forgotten due its recent bad press.

        architecture ba hons project

         

         

        01

         

        This is the Art Installation we created, it was created after we had visited Toxteth and realised that Toxteth had beauty within but it was hidden. The light was created in this form by ‘borrowing’ a fence from a bordered up building that was hiding the beauty of the Toxteth terraces facade. Once we had it we projected images of Toxteth onto the board and through the board different dots of light was created crating an image of beauty, something that people don’t necessarily think of when they think of Toxteth. At the foot of the page is the city skyline and trees populated throughout the city. To represent the idea of repopulating the city with lots of trees and forresting the city to make it green once more.

        02

         

        This was the bridge and market of Toxteth, along the boulevard of Princes Avenue, we noticed it was an used space that had a lot of potential for development to re-energise the area into a busy area once again like it was in the victorian era.

        We decided to include a bridge so that it links both sides of the area together to bridge the community on this busy street which we intended to make one way and reopen windsor street on the part of Toxteth to increase passing trade for the shops along that space and make Toxteth thrive again.

        The bridge itself would be a green bridge with the opportunity to grow your own vegetables or flowers to help bring a stronger sense of community

        03

         

        This was the school. The idea of the school was to promote the idea of sustainable lifestyle from a very young age so it is the way they live rather than it being something ‘they choose to do’. When the child enters the school they plant a small sapling and as their education grows the tree also grows with it. After their 18 years of education the tree should be fairly large and then the pupil would be able to replant the tree somewhere else in the city repopulating the city with greenery improving the atmosphere with cleaner air, improving the landscape for the inhabitants and also increasing the value of the properties as it is proven that tree lined streets increase the value of property in its vacinity.

         

        04

         

        Rather than build a community centre we decided to build a distraction centre. This is a space that allows the community to use it for leisure but see other activities going on around it thus creating a distraction. It is known that a reason a lot of young people say they cause trouble is that they are bored so by havign a distraction centre it would improve the community spirit.05

         

        This is the ecotower where the local community can grow their own food and is linked to the school. They are like vertical alotments creating a sense of community and teaching people about food and the benefit of growing it yourself.

        06




        Below are a few mockups to show how the idea of a greener Toxteth.

        windsor street final

        greenterraces

        07

        This was a group architecture project i took part in and I enjoyed working with other creatives very much, we came up with some great ideas and actually looking back some of our own ideas have started to be implemented only this year in Wirral ( as they are starting to plant more trees) and the green bridge is also something a dutch designer created so some concepts we had back in 2007 are also in the minds of other architects, we definitely had the right thinking. Although architecture is not what I now practice it was a great experience and led me to where I am today. I hope you enjoyed reading this article about my past education.

          Infographic CV

          It has been two years since I landed my current inhouse design job as a website and graphic designer and (without sounding like a big head, sorry if i do :s) my skills have improved a great deal in since when I. I recently discovered an old CV on an external HD and it was a simple word doc that didn’t really show what I am capable of so decided it was about time I updated it to reflect my advancement in design and to tell my personal story in a more visual way.




          I wasn’t sure whether a visual infographic CV is something that was going to impress people who view it or whether I should stick to a traditional written resume. My thinking was that by creating an infographic CV it shows that I am willing to take a design risk whilst trying to show my personality through visual forms.

          Digest information quickly

          Not only this but infographic CVs are usually easier to digest for the viewer because graphical information is quickly communicated and play a large part in the delivery of my work and educational history and as the saying goes, a picture speaks a 1000 words.

          Considering an employer will likely be flicking through hundreds of resumes if yours can communicate your work experience and background in a short space of time it is, in my opinion, a win for the person viewing it and an enjoyable experience for the designer who created it.

          Benefit of upgrading to an infographic CV

          By updating my resume to an infographic CV I have had to really study my past work, education and personal history in order to be able to communicate this visually and hopefully create a flow of information in the design I have created which makes me see areas I need to improve upon but also where I feel I have done well. Basically this a SWOT analysis of self, a really important thing to do periodically in order to improve your ability as an employee and to be able to give all you can to your employer.

          Downside of upgrading to an infographic CV

          There are two downsides to creating your CV into an infographic, one is that is a risk as the employer may not like the design or the fact you are breaking traditions and secondly it takes quite a lot of time to create an infographic and if it doesn’t impress your potential employer then the time you have spent creating it may have been for waste.

          Infographic CV in the flesh

          So here it is, the infographic CV I recently created, I hope you like it.




          John_A_Wilson_CV