Original Post
Toribash Page Redesign
as we all know (including the toribash staff) the main page @ http://toribash.com/ is ugly as living heck. Now me being somewhat of a web developer was bored, and took this into mind for the heck of it. So without further a-do (btw didn't know if this the right section, but none the less it is creative), here is what i have came up with:
Now before you say anything, keep in mind that was a screenshot, it is static, now let me explain what is going on here
the thing on the left is the navigation (gave the proper copyright to toribash to nabi of course, and the design to me) with a toribash logo, and some fancy navigation buttons that change apon hover (instead of using ugly jpg images like the current one uses, i use css). darkened the left side of the screen, and added a very subtle border on the right side of it to seperate it a bit. Now, behind it is not just a picture, it is the toribash trailer from the main webpage (still all credit to nabi/sir/etc), looping, autoplay, and muted so you have a nice dynamic webpage to please your eyes.
You want to see it in action you say? Check it out here:
https://pyxel.ml/projects/toribash
(the background video takes a sec to load bc shit hosting)
Proof of me coding it and junk: http://prntscr.com/hxuopq
Screenshot (Warning Big) ►
Now before you say anything, keep in mind that was a screenshot, it is static, now let me explain what is going on here
the thing on the left is the navigation (gave the proper copyright to toribash to nabi of course, and the design to me) with a toribash logo, and some fancy navigation buttons that change apon hover (instead of using ugly jpg images like the current one uses, i use css). darkened the left side of the screen, and added a very subtle border on the right side of it to seperate it a bit. Now, behind it is not just a picture, it is the toribash trailer from the main webpage (still all credit to nabi/sir/etc), looping, autoplay, and muted so you have a nice dynamic webpage to please your eyes.
You want to see it in action you say? Check it out here:
https://pyxel.ml/projects/toribash
(the background video takes a sec to load bc shit hosting)
Proof of me coding it and junk: http://prntscr.com/hxuopq
Last edited by hanna; Jan 9, 2018 at 06:59 AM.
Sorry but I actually prefer the current version over this.
It's more visually pleasing and more informative.
The only problem I have with the current website is that it's only covering half of the screen.
It's more visually pleasing and more informative.
The only problem I have with the current website is that it's only covering half of the screen.
Originally Posted by Hypersaint
Sorry but I actually prefer the current version over this.
It's more visually pleasing and more informative.
The only problem I have with the current website is that it's only covering half of the screen.
Eh i gave it a shot, im an ex-sitedev sort-of so i thought i'd give it a shot lol
I'm inclined to agree with Hypersaint that the current version is definitely more informative and that the overall design is more pleasing. I also agree with you however that the current Toribash homepage is in serious need of a re-design.
Let me breakdown my issues with this, I think they can probably be summed up as:
- Video backgrounds are mostly bad.
- Neither design is particularly accessible.
Video Backgrounds:
Video backgrounds are an iffy design element, for some pretty obvious reasons.
- The load time on them is horrendous, as can be seen in your example.
- afaik iOS devices still don't autoplay videos in this fashion, and Android devices don't tend to get along well with them either.
- The quality of the video is pretty poor too - you could disguise this somewhat with an overlay on top of the video. Probably just using the ::after pseudo-element on the container.
Personally, I am not a huge fan of video backgrounds. I think there is insufficient evidence to assert that they do anything to accomplish increased conversion - but arguments can be made from both sides on this point I suppose.
Accessibility
Anyway, the main issue I have with both the current design and your proposed design is accessibility. Neither seem to have any consideration for responsive design. Let me show what I mean, here is your design viewed on an iPhone 8 portrait and landscape:
You've scaled the video pretty well, you could do it better using the property background-size: cover or the object-fit property (limited browser support). But, I would be much more inclined to simply default to a background image on smaller screens using either media queries or JavaScript. However, once this is done, there is essentially no content to the page. This is why it is bad practice to rely exclusively on a video to serve as your call to action.
Here the copyright info is starting to mess with the navigation, I would be looking at hiding the navigation on smaller screens and having a button to toggle it back into view.
The current design is much worse when considering accessibility - and this probably speaks more to its age than anything else. The original design was created by Michael Heald at Fully Illustrated who is a seriously good designer. Anyway onto my issues with it:
I mean, what to say here really? It is a product of a by-gone time, using a fixed layout. The iPhone is serving the page okay, in the sense that it is at least usable, however it certainly isn't optimised for this screen size and has just been scaled automatically. However if the window is too small horizontally on a desktop browser, we are going to start running into to horizontal scrolling and the whole thing is a mess. I've also blocked Flash to show why the top bar is a bad idea. This design actually fares a bit better in Landscape - but still not brilliantly.
What I would suggest, if you are serious about moving forward with a re-design, is to adapt the current design into a responsive page layout. The current design is good in the sense that it has carefully considered CTAs such as the download link. It still offers in-game footage, but is controlled by the user rather than having a video background.
Let me breakdown my issues with this, I think they can probably be summed up as:
- Video backgrounds are mostly bad.
- Neither design is particularly accessible.
Video Backgrounds:
Video backgrounds are an iffy design element, for some pretty obvious reasons.
- The load time on them is horrendous, as can be seen in your example.
- afaik iOS devices still don't autoplay videos in this fashion, and Android devices don't tend to get along well with them either.
- The quality of the video is pretty poor too - you could disguise this somewhat with an overlay on top of the video. Probably just using the ::after pseudo-element on the container.
Personally, I am not a huge fan of video backgrounds. I think there is insufficient evidence to assert that they do anything to accomplish increased conversion - but arguments can be made from both sides on this point I suppose.
Accessibility
Anyway, the main issue I have with both the current design and your proposed design is accessibility. Neither seem to have any consideration for responsive design. Let me show what I mean, here is your design viewed on an iPhone 8 portrait and landscape:
Portrait
You've scaled the video pretty well, you could do it better using the property background-size: cover or the object-fit property (limited browser support). But, I would be much more inclined to simply default to a background image on smaller screens using either media queries or JavaScript. However, once this is done, there is essentially no content to the page. This is why it is bad practice to rely exclusively on a video to serve as your call to action.
Landscape
Here the copyright info is starting to mess with the navigation, I would be looking at hiding the navigation on smaller screens and having a button to toggle it back into view.
The current design is much worse when considering accessibility - and this probably speaks more to its age than anything else. The original design was created by Michael Heald at Fully Illustrated who is a seriously good designer. Anyway onto my issues with it:
Current Design
I mean, what to say here really? It is a product of a by-gone time, using a fixed layout. The iPhone is serving the page okay, in the sense that it is at least usable, however it certainly isn't optimised for this screen size and has just been scaled automatically. However if the window is too small horizontally on a desktop browser, we are going to start running into to horizontal scrolling and the whole thing is a mess. I've also blocked Flash to show why the top bar is a bad idea. This design actually fares a bit better in Landscape - but still not brilliantly.
What I would suggest, if you are serious about moving forward with a re-design, is to adapt the current design into a responsive page layout. The current design is good in the sense that it has carefully considered CTAs such as the download link. It still offers in-game footage, but is controlled by the user rather than having a video background.
Originally Posted by Fee
I'm inclined to agree with Hypersaint that the current version is definitely more informative and that the overall design is more pleasing. I also agree with you however that the current Toribash homepage is in serious need of a re-design.
Let me breakdown my issues with this, I think they can probably be summed up as:
- Video backgrounds are mostly bad.
- Neither design is particularly accessible.
Video Backgrounds:
Video backgrounds are an iffy design element, for some pretty obvious reasons.
- The load time on them is horrendous, as can be seen in your example.
- afaik iOS devices still don't autoplay videos in this fashion, and Android devices don't tend to get along well with them either.
- The quality of the video is pretty poor too - you could disguise this somewhat with an overlay on top of the video. Probably just using the ::after pseudo-element on the container.
Personally, I am not a huge fan of video backgrounds. I think there is insufficient evidence to assert that they do anything to accomplish increased conversion - but arguments can be made from both sides on this point I suppose.
Accessibility
Anyway, the main issue I have with both the current design and your proposed design is accessibility. Neither seem to have any consideration for responsive design. Let me show what I mean, here is your design viewed on an iPhone 8 portrait and landscape:
Portrait
You've scaled the video pretty well, you could do it better using the property background-size: cover or the object-fit property (limited browser support). But, I would be much more inclined to simply default to a background image on smaller screens using either media queries or JavaScript. However, once this is done, there is essentially no content to the page. This is why it is bad practice to rely exclusively on a video to serve as your call to action.
Landscape
Here the copyright info is starting to mess with the navigation, I would be looking at hiding the navigation on smaller screens and having a button to toggle it back into view.
The current design is much worse when considering accessibility - and this probably speaks more to its age than anything else. The original design was created by Michael Heald at Fully Illustrated who is a seriously good designer. Anyway onto my issues with it:
Current Design
I mean, what to say here really? It is a product of a by-gone time, using a fixed layout. The iPhone is serving the page okay, in the sense that it is at least usable, however it certainly isn't optimised for this screen size and has just been scaled automatically. However if the window is too small horizontally on a desktop browser, we are going to start running into to horizontal scrolling and the whole thing is a mess. I've also blocked Flash to show why the top bar is a bad idea. This design actually fares a bit better in Landscape - but still not brilliantly.
What I would suggest, if you are serious about moving forward with a re-design, is to adapt the current design into a responsive page layout. The current design is good in the sense that it has carefully considered CTAs such as the download link. It still offers in-game footage, but is controlled by the user rather than having a video background.
Yeah I'm still learning, this'll be helpful however.