LATEST MUSINGS

Blog

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

    AIDA the process mind goes through in successful advertising

    Advertising has been around for a very long time, from some of the earliest forms in the Roman empire displaying Caesar’s head on a coin to modern website banners. Adverts are all vying for our attention and to influence us, the more businesses that are being founded the need to make successful advertising is growing even greater. Knowing how the human psyche works give advert designers a little head start in creating something that stands a chance of convincing the viewer that they need the product or service in question. This is where AIDA comes in.

    Continue “AIDA the process mind goes through in successful advertising”

    How to make responsive YouTube videos on WordPress

    Responsive design has been here for a long while now and it is probably one of the most important design aspects of a website today. A responsive website will flux in size and layout depending upon the users media device, unfortunately embedding youtube videos into a website doesn’t always work well on your website but using some simple css code can help you find a way around this. In this post I give some brief code and a quick guide on making responsive youtube videos for users of WordPress.

    Jetpack Edit CSS

    I want to make this as simple for novice coders to follow so I recommend installing and activating the JetPack plugin from WordPress so that features to add CSS will be easier. Once you have activated the JetPack go to Appearance tab and then ‘edit CSS’.

    appearance

    If you are a bit unsure of CSS this is what the following code means. This code looks for the element ‘iframe’ in the ‘video-responsive’ css class and gives the video a height of 100% and width of 100% doing so ensuring the iframe takes on the width of its containing div. If you are feeling a little lost, don’t worry, simply copy the code and paste it into your Jetpack edt css feature and continue to follow the guide.

    .video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    }

    .video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    }

    This is the first stage of designing a responsive div tag for video, next you need to gather the embed code provided by YouTube.

    Stage 2: use embed code and div class to create responsive youtube videos

    Copy the embed code from your youtube video, go back to your WordPress website, ensuring your page is in ‘HTML’ mode rather than ‘visual’ and paste it into the desired page in the location you wish to display it.

    embed code for responsive youtube video

    Once the code is in place surround it with <div class=”video-responsive”>replace with embed code from YouTube</div>. This will call the css we wrote earlier to ensure the video responds as we want it to.

    Once all that is complete save your page and refresh your browser to see your YouTube Video responding something like that seen below.

    If you have any problems creating a responsive youtube video please feel free to leave a comment below and I will get back to you shortly.

    Twitter Profile size 2015 and some examples , NEW!

    Another new twitter profile size?! Really!?? Once again, one of the top social media channels has changed the way it looks trying to improve the user interface and I must say, they have done quite a nice job of it.

    I find it to be a much more minimalistic approach than with the interesting background and follows the same style of Google+ and Facebook with a large header and a small profile picture to one side which in turn makes it easier to design your branded images for and maintain consistency throughout. In this post I will discuss the new twitter profile size for 2014 and what to consider when creating yours.




    Twitter Profile Size 2014 – The header

    JAWilsonDesign Twitter profile, twitter profile size 2014

    What you will notice when you activate the new twitter profile is the header of your Twitter profile has now been made to expand the full width of the users screen. Although this a beautiful, simple idea if you have built and designed your Twitter profile in depth to exact measurements in the past it may result in your branded profile being blurred or pixelated…not good!

    The new measurements of the Twitter header is at least 1500px x 500px and I recommend using a large ppi ( ppi is an abbreviation for pixels per inch. A pixel is a dot on the screen that makes up your image, the more of them the more clear your image will be )  as this will improve the clarity of your image especially if a user is using a very large screen such as a 2560px x 1600px retina display. Also, after uploading a jpeg i discovered Twitter seems to render png files better with less loss to the actual quality of the image, so yep, you guessed it, save it as PNG.

    Twitter Profile Picture Size

    The profile picture for 2014 size has increased in size on desktops too now displaying at approx 210px square. I still recommend adding an image that is fairly high in ppi, larger than the 210px but ensure that the profile picture remains square for best display.

    Twitter Header peaks through

    jawilsondesign new twitter header with the new change to the twitter profile size 2014

    As you scroll through the Twitter news feed the header remains slightly in view by around 10px. I really like this feature as it add a decorative element to the new view. I’m really impressed with how nice the new interface feels on desktop, its so intuitive and pleasent to view, I get excited just looking at feeds on my laptop!! WOOP!

    Avoid text with the new Twitter Header

    I believe that avoiding text on your header is now compulsory. I would avoid it at all costs ( I know I have it at the moment ) as on smart phones it will not work well so try to be clever with images instead of having to include text. If people really want to find out more about you or your company they will visit your website and find out there.

    Background still has a use

    jawilsondesign main background - twitter profile size 2014

    Twitter backgrounds still have their place and what I have found is that it still displays the background when you log in. It is no longer customer facing so design it for your own benefit. Maybe consider adding a message to remind yourself what you use Twitter for and when to use it. For example, maybe you could have the days of the week on one side and then each day suggest a topic that you want to discuss on that particular day or maybe simply just use the same image as the header, it is just for people that use your Twitter account so don’t worry about it too much.

    Choosing your brand colour – Twitter Profile 2014

    Again the colour selection remains and does have a great personalising effect on your profile so ensure that it is selected and not just the standard blue. Colour has a huge effect on a users psychology and recently, i spoke about the effect of colour in this blog post about branding here .

    Responsive Twitter Profile Size 2014

    Keep in mind that end users will, a lot of the time, be using the social media platform on their smart phones rather than the desktop display. When I looked at my new header design on mobile I noticed that my main marketing message ,my website url and my specialities, is slightly covered. To rectify this problem I would probably put my main skills to the very top of the header in order to avoid this happening, but for the time being, I’m quite happy with the way it looks.

    Some 2014 Twitter Profile examples

    Seeing how others are designing their new Twitter profile under the newly designed user interface can inspire you to design your own. I have put three of the ones I have spotted that I think are great designs, the first of which is Smashing Magazine, a web designer/developer magazine.

    smashing magazine twitter header , twitter profile size 2014

     Smashing Magazine Twitter Header 2014

    I particularly like the flat and fun cartoon illustrations of the editor showing that they have a sense of humour but also mentioning the url of their company. It makes me want to visit their site simply because i feel I will have a smile put on my face.

    twitter profile size 2014 , thrive agency use a subtle pattern for their new design




     Thrive Twitter Header 2014

    The next one is Thrive, a branding agency based in the North East of the UK. They have created a repeated image of their logo as a pattern for their new twitter header and it works really well. Their profile is all about branding so showing their brand colour and logo is a great way to show a professional design to their visitors on desktop computers, likewise, it will look great on smartphones as no text will overlap their account profile.

    twitter profile size 2014 design of designboom

     

    Design Boom Twitter Header 2014

    Designboom are an excellent website all about design and they use their header to show some of the famous faces of design. I have always been a fan of their logo and I think their Twitter header compliments their brand message and content  effectively.

    Whether you are creating a new twitter account or updating your current site its important you reallt think through your graphics and whether the correct message is being portrayed. You may not think that a message is important when most people are focusing on what you tweet but any opportunity you have to either brand your business or self should not be missed and it shouldn’t be taken lightly and it would be wise to take at least some careful consideration of how you want to represent yourself to visitors of your Twitter account.

    Do you have any other suggestions about the new Twitter Profile display? Would you like your profile included in the gallery? Please add a comment below with your twitter profile, I love to seeing the creativity of others. Happy 2014 tweeting folks!



    Finding and discovering keyword competition

    Being close to the front of organic search results is really important to anyone who owns a website. It is seen as the holy grail of a good website but it isn’t always easy to reach the top as many a blog owner knows.

    Semrush keyword discovery tool

    semrush




    Semrush tool helps you discover who is ranking highest for particular keywords and in which country, you can discover which keywords are particularly expensive or alternatively cheap, if they are increasing in price to help you with your Adwords campaigns.

    Discovering related keywords

    Not only can you see how a particular keyword is performing and who is achieving the best result in search engines for it but you can also discover other keywords that relate to the keyword you are trying to target.

    The benefit of discovering keywords is that when you start writing new blog posts or web pages around your product or service you can discover which keywords are less competitive and what seems to be trending to boost the likely traffic to your website.

    So for example, in the below image you can see how many times ‘cardigan’ keyword has been searched for (49,500), how much it costs per click (CPC) and what I think is very beneficial, how competitive the keyword is to allow your content to be found and clicked on, the lower the number the less competitive the keyword.

    cardigan

    There are many more options but I will let you explore the keyword discovery website for yourself. Just know that on the free version you can only search for a small amount of keywords and you don’t get as much results as you would on the paid version. Don’t let that put you off, go and check it out NOW!

    Is the keyword still trending?

    Lastly, to make sure you are targeting a keyword that may be increasing in popularity check out Google Trends. This tool helps you see if your particular topic is going to be worth the effort. Will it bring in a massive influx of new traffic and hopefully fans of your content or not?

    If the keyword is not going to attract people to your website how else can you bring your services into your potential customers consciousness? Can you target another keyword, do you need to rethink your product and or service? Or do you need to reconsider how to reach out to the potential market you are targeting?

    interest

     

    I hope you find these tools useful and if you have any other suggestions about creating great content to help improve organic search results and traffic then please feel free to comment in the box below.


      Grade your websites digital marketing via Hubspot

      There is a lotta lotta information out there about digital marketing and how to get your website seen and generate sales leads and by golly, don’t you just worry that you’ve missed something? Hubspot, probably one of the biggest, if not the biggest, digital marketing agencies offers a service to see if your website is meeting the online marketing ‘grade’. Take some to grade your websites digital marketing via how well it is performing.

      Continue “Grade your websites digital marketing via Hubspot”

      6 things to consider when designing a Twitter Profile

      Designing a Twitter profile seems really really easy, upload a picture as your profile image, a background image, set your colour for links and bobs your uncle it is done. But alas, that was a story from the same place Cinderella comes from, creating perfected branded Twitter profiles really needs a Graphic Designer familiar with digital design and marketing, preferably social media marketing. In this blog post I will discuss what you need to consider when designing a Twitter Profile to perfection and why it is more important than you think.




      1. Designing a Twitter Profile with  exact Twitter Profile Measurements

      The exact measurements of the profile is really important, to the width of the timeline, to the width of the sidebar, to the header size and the profile picture. All these elements have an effect on designing your Twitter profile layout (This my Twitter Account). You then need to consider are you going to left align the background image, centre it or right align it. Once you have considered the layout of the design next you need to keep in mind that everyone will be viewing Twitter on different platforms.

      2. Screen resolutions vary

      designing a twitter profile a bad example

      Twitter is available to view on many different size screens from a small smart phone screen upwards to a very large Apple Desktop PC. Twitter is a responsive platform meaning that you need to consider how your background is going to look on screens with different resolutions. If you look at the above image you can see that the company has not considered that everyone will view their profile at larger screen sizes and forgot to set the default background colour as white to help fade in the image to its background. This is easy to change but important to get it right otherwise you will begin to look cheap and unprofessional.

      3. Branding

      So you have considered what to include in your layout when designing a Twitter profile and remembered that users will be viewing your profile with different size screens, next you need to consider your businesses brand.

      Branding is really important and if you are not consistent with your business message your audience will become confused if your identity looks different on Twitter so try to keep it looking similar to your website, collateral and overall brand. If you have one ( and professional brand designers should provide you with one ) use your style guide and adhere to it as close as possible.

      4. Communicate product or service when designing a Twitter Profile

      Next you will want to take the opportunity to advertise the product or service you are selling. Consider the images you are using as your background and header and do they put across the right marketing message? Does it communicate a story and/or have a call to action such as ‘download our free ebook’ or ‘sign up to our newsletter to find out when our new product is released’ etc. Although your users won’t always see your main profile background it is a marketing opportunity you should exploit and if someone should visit your Twitter Profile it should communicate something appropriate.

      5.Social Media Consistency

      designing a twitter profile should reflect all social media channels

      Do you have social media channels already? Make sure that they are consistent throughout. Another words, make sure they all look the same from the Twitter account, to Google+, to Facebook, they all need to have the same style. In this image above can you tell instantly that this account is connected to the Twitter account previously mentioned? Nope, I don’t think so either, to rectify their problem they simply need to use their logo and possibly more white in their cover photo design. They are also missing a marketing opportunity to communicate something with text not just pictures.

      6. Contact details

      design a twitter profile design with contact details on it

      Lastly, but not least, I think it is quite vital to place your contact details on the Twitter background. Consider putting  your business telephone number, address and other urls that maybe point to your website, social media channels and anything else that you think is relevant.




      All things considered you can’t be good at absolutely everything and although Twitter do make it fairly straightforward to create your own Twitter profile sometimes getting a professional designer to create your imagery is better so that you can focus on the important parts of running your business efficiently whilst a designer develops your profiles in the background. If you need help with your social media profile designs I can help you with it, simply contact me using the contact page here, alternatively if you are a fellow designer is there any other points you consider when creating social media profiles?

        How to choose a colour scheme for your brand

        Creating a colour scheme for your brand should not be taken lightly, colour has a huge psychological power over its viewer than has been with us in nature from the beginning of time. It’s not simply saying ‘I want it to be yellow’, you need to consider what shade of yellow as a vivid bright yellow has a different feel, mood and meaning than a dark mustard yellow. Here is some basic information about the meaning of the main shades of colour.

        Continue “How to choose a colour scheme for your brand”