We had a gallery walk last week. If you’re not sure what that is, it’s a time where we put together everything we’ve worked on and a bunch of students / teachers / staff walk through and look at it all. We can talk through with them what we’ve worked on, why we’ve done certain things, etc. and then they leave us feedback. Sometimes it’s a bit daunting, putting your designs out there for people to look at and I guess analyse but it always ends up being really helpful. People often point out things I might not have seen, especially because I’ve been looking at the designs for ages.
So I printed a few bits out and had a slideshow going on the computer too.
It went really well. I got some pretty positive feedback about my designs and some helpful pointers about a few things that I could fix up.
Here’s a few of the pointers/feedback that I have taken on board and made changes to my designs:
- A1 Poster
- I reduced the transparency of the social media in the bottom corner so it wasn’t competing with the logo – I want people to see the logo first.
- Fixed up the ratio of the wooden background and the teal colour – wasn’t quite 50/50 and it was suggested it would look better if it was in thirds or quarters.
- There were a few places I had to fix up the kerning as well in the text
- Loyalty Cards
- I had to alter the die line a bit – I only had a gap near the bottom and it was pointed out that if it was left this way the middle section would just flop around so I added another gap to the die cut on the top.
- One line of text on the back was made smaller to make it more consistent with the text on the front of the card.
- I ended up changing the bulk of the text to navy as it stands out more on the kraft paper
- Added more teal to it in the lines and coloured boxes
- Trying to find more ways to incorporate them in more collateral.
Feel free to give me feedback on any of my work and have a look at some of my previous posts to see some better images of my work.
SEO stands for Search Engine Optimisation. SEO is a number of techniques that are used to improve the visibility of a website when using a search engine (such as Google, Bing, Yahoo, etc.). SEO is all about creating a seamless user experience and communicating to search engines the intentions of your webpage so they can recommend your website for relevant searches. It is the application of improving the ranking of a webpage so it will be the first page that comes up in the search results.
So one might ask why it’s important to have a high ranking for your webpage? It increases the traffic to your webpage. A study was undertaken by Slingshot SEO in 2011 which compared the position of a website in the search engine results page (SERP) to the respective click-through rate. Below is a table with the results they found:
It is easy to see that if your webpage is at the top of the list it will have a higher click rate through to it. It’s also a little bit of common sense. Think back to all the times you go to Google or Bing or any other search engine you like to use (maybe even AskJeeves), do you always click on the first option? The majority of the time I do.
The next question one might ask: what do I need to have on my page to make it a good one?
I found this cool Periodic Table Of SEO Success Factors and thought it would be a good place to start. I won’t go into all of these but you can follow the link to find out more information if you would like to know more about that:
The Periodic Table Of SEO Success Factors from Search Engine Land
Some of the things you can to do to optimise your webpage for SEO:
- Make content indexable
- Make sure content is good quality
- Use the necessary keywords and phrases
- Create a relevant title for your pages
- Create an easy to read description for the URL of your website
- Incorporate Meta descriptions on each page of your website
- Be concise, descriptive and brief
Hope you found that to be enjoyable reading!
And the topic for this week is…..layouts for web design and their pros and cons.
Fixed* websites have a set width and using a different screen size won’t change the layout
- Exact known width to work with makes it easy to customise
- Don’t need to use min-width or max-width
- The website design won’t change no matter what size screen you are viewing it on
- Doesn’t work on anything 1px smaller than the exact width
- They don’t look good on large screens, creates white space on larger resolutions
- Can need a horizontal scrolling bar
- The website design won’t change no matter what size screen you are viewing it on (Won’t look good on tablets or smart phones)
*Fixed is not a good option for smart phones and tablets.
Fluid (Liquid) websites are built using relative values (such as percentages) to allow a scaling process to occur
- Grows and shrinks with the page
- It’s user friendly as it will adjust to whatever screen size the user is using
- Can eliminate horizontal scrolling bars which will improve the visual aesthetics
- Columns are relative to one another and can scale up and down fluidly
- Can look ridiculous on super large or super small screen
- Less control as to what the viewer sees on different screen sizes
- May have to set multiple widths for images, videos, etc.
Adaptive websites use media queries to target specific device sizes
The site will look different depending on the device being used and has ‘breakpoints’ – the point at which the layout changes.
- At set browser sizes the site looks good
- Can control what the design (content and layout) looks like
- Less work to build and maintain
- Does not perfectly encapsulate the in-between sizes
- Have to create different layouts for the different screen sizes
Responsive websites is a combination of both fluid and adaptive design. It uses the relative values of a fluid website with the media queries of an adaptive one.
- Less work to build and maintain
- More fluid when changing the screen size
- Pages are designed with all layouts in mind and uses media queries to adjust for varying resolution sizes
- Less control
- Longer development cycle
- Loads slower
In a situation where you had to design a new webpage, it would be more beneficial to design a responsive webpage, whereas an adaptive design would be better when converting an existing webpage into a mobile friendly version.
This website lets you look at these four different options and see how they’re different so follow the link and see for yourself how it works:
Liquidapsive – Web Layouts
Hope you enjoyed the read, maybe learnt something new.
Images retrieved from:
In HTML there is a table element that is used to represent data with more than one dimension and in the form of a table. Tables can be used to present tabular data in a functional way. This could be any information that you keep track of or record in a spreadsheet or it could be communicating the pricing page of a website. Tables in this sense can be (and should be) used to organise information and make it easy to understand in one, quick glance.
These two articles highlight a number of different styles that can be applied to tables to help communicate the message effectively:
- Top 10 CSS Table Designs
- 15 Tips For Designing Terrific Tables
In the past tables have been used in web design to structure the whole layout of an entire page. This method is very outdated and is no longer the way to create your webpages. Using tables is no longer an easily accessible format for webpages and the use of tables makes it hard to navigate the page.
This is a quote taken from W3C’s Editor’s Draft of the HTML 5.1 Nightly:
Tables should not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.
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.
It gives a score based on a number of semantics and then breaks it down even further.
This week I’m going to show you a very impressive website and then another website that is not really as impressive.
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.
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.
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:
- 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.
- Responsive design – this is where the website adapts depending on what device you are looking at it on (computer, tablet, smart phone, etc.)
- Scrolling instead of clicking – the background moves at a slower rate to the foreground.
- Modular/grid/card designs – very organized and is responsive, can browse a lot of data, clean and simple.
- 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.
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