Propositions for little website improvements

13 posts / 0 new
Last post
Maelan's picture
Maelan
Joined:
2016-05-14 21:57
Last seen:
1 month 2 weeks ago

Hi there, I’m Maelan.

For the ones who don’t know me, I’ve introduced myself here. So, nice to meet you ! :)

First of all, I have to laud Atrayonis for the great job is has and still be doing on the new website, which is reeeeeally cool !!! laugh And you know, even a really good thing could get better.
So, as a simple graphic designer with a bit of webdesign experience, I’m proposing some improvements that can be done to the website. Don’t be mistaken, I do not propose my help to bother Atrayonis (although I do love it !), as he answered favourably to me, but in fact to make the site a bit more appealing to new comers. Because for now, it is a lot of content, almost text. The visitor has to be guided so he can make his way into the site (and especially the JOIN button). The problem of the actual site is that every piece of information is like… at the same level (visually I mean). So the visitor can be easily lost, or just bored if nothing else than text catches his eyes !

I think the first thing to work on is the home-page.
Thus, I’ve made a quick mock-up to show you guys what could be a better home-page to me.

Here it is → http://i.imgur.com/3iA6Z5U.jpg (link is external)
And here is a previous version that Atra don’t like (“that’s terrible!!!”) → http://i.imgur.com/pzpHMNu.png (link is external)
Of course, I invite you to comment on both of them, especially if you don’t like !
Also, note that the background acts the same way it does right know, however it is impossible to fake parallax on fixed images.

_______

Now, let me explain the reasons I have done it this way :

  • I wanted the homepage to look more like a portal, or a hub where every important information is gathered, and linked to a more detailed page. Also, hierarchy is really important when you have several types of informations. To my opinion, the first thing to be seen is a striking visual that represents TR. You definitely need to make us dream, if you want more people to come in. The better idea Atrayonis and I had for that is a Slideshow, with some gorgeous screenshots as you know how to take it, attracting us right to the Mainlands of Morrowind.
  • Then, the second important thing is a quick presentation of your project. We currently have one in the actual homepage, but it is rather small and in a unconvienient place.
  • Thirdly, the news. In my version, it’s a bit different compared to the current homepage which is in fact the newspage. At term, both pages will be separated, so there could be only two or three news on the homepage as the same time, so the homepage will not be too long.
  • And finally the right column, which is really important. Ok... downloading the files is great, but if you want more people to join they’ll need to meet you easily to the forum, the social networks, Discord, IRC and so on. So that’s the reason why all these useful links have to be gathered at the same place, in a visual and simple way. That’s because your site needs to be the hub of all your online content, and a meeting place !

Thank you for reading my post. smiley I hope you’ve found it interesting.
Atrayonis and me are really looking forward to hearing your opinion ! wink

10Kaziem's picture
10Kaziem
Asset DeveloperInterior Developer
Joined:
2015-12-12 23:47
Last seen:
2 years 7 months ago

Hello! First off, it’s super awesome to see website feedback. We’ve been working hard on the website for a while now, but it’s been difficult to get feedback and in particular mockups of how the site could be improved. We’ve really been needing a graphic designer. More or less, the people who have been doing actual on the site work are, me, Gnomey, Seneca37, occasionally Swiftoak, and mainly and most importantly Atrayonis (Anonytroll is his other username).  There’s not too many of us, and Anony and I are both learning how to handle Drupal from scratch. He’s further along than me, though, I’m hoping to get better at it so I can take some of the load off his back.

I like both your mockups, though I like the one with the full-width picture best, because the screenshot really gets the point across of what we do (morrowind mod) and then there’s that nice map right below it where we can show off all we made. And the thumbnails for the blog posts are nice too, they look much better than the default thumbnails we already had. Pictures are very pretty and eye-catching. Also, the improved contrast with the darker sections is very nice.

I sorta wish there was a way to have more recent screenshots, but if the main picture up there would cycle through the most recent, say, 10 screenshots on its own, that would solve the problem.

Improved visual hierarchy is definitely a must here. I like the boxes off to the side, though some art/icons would be nice instead of the little symbols you have. (That’s secondary, though.) I like that those links and options are presented immediately and visually to a visitor rather than being buried in a menu.

I would love to see if there was a way to make even more contrast, but in a nice way. The visuals should be exciting! (They already are nicely improved. But I’d love to see more.)

Does: concepts, textures, youtube vids, admin stuff e.g. PR, handbook, assets, small website things. Activity level: wildly unpredictable. Still active. Find me on Discord.

ThomasRuz's picture
ThomasRuz
Asset Developer
Joined:
2016-05-09 13:13
Last seen:
5 days 7 hours ago

Love it laugh
It definitly makes the homepage look really exciting and immediately gives the reader the information that they need,
while still being orderly and implementing the features the site now has.

Atrayonis's picture
Atrayonis
Developer EmeritusInterior DeveloperQuest Developer
Joined:
2015-09-28 20:13
Last seen:
1 year 11 months ago

The way these things work, the slideshow can’t auto-cycle through the most recent screenshots. They have to be deliberately used.

I put it on the dev site over here.
The slideshow images are a bit out of shape because they are rescaled – for the real version we’d of course use images which are already of the fitting dimensions.

Aeven's picture
Aeven
Developer EmeritusExterior DeveloperInterior Developer
Joined:
2014-01-11 16:53
Last seen:
1 week 2 days ago

I like the non-full width version a lot! :)

Atrayonis's picture
Atrayonis
Developer EmeritusInterior DeveloperQuest Developer
Joined:
2015-09-28 20:13
Last seen:
1 year 11 months ago

There’s basically three or four things left to do before switching the rest of these over:

  1. Get fonts working properly. The dev site has a hackjob working atm, which needs to be replaced with proper CSS declarations.
  2. Find and upload actually fitting images (1280x480) so they don’t look stretched. Suggestions?
  3. Put in a descriptive text with links in the slideshow images?
  4. Fiddle with the images in the side boxes so they don’t take up that much space.

And the big one: currently, there are boxes in the right sidebar on all pages. If they are restyled on the main page, they should be restyled on all of them, or the other pages will look off. So the top blurb would have to be green, or would need an image – should that be the image that the corresponding info box on the main page had? And just keep the other boxes as they are?

10Kaziem's picture
10Kaziem
Asset DeveloperInterior Developer
Joined:
2015-12-12 23:47
Last seen:
2 years 7 months ago

Inputs: for the images, let’s use nice screenshots. We have some, we can probably get more if there’s any place that’s particularly photogenic. Screenshots do the best job of immediately conveying what we have to offer. Descriptive text could just be the name of the location it’s in, plus a link to the relevant gallery. Not sure what you mean about the boxes on the sidebars.

Does: concepts, textures, youtube vids, admin stuff e.g. PR, handbook, assets, small website things. Activity level: wildly unpredictable. Still active. Find me on Discord.

Atrayonis's picture
Atrayonis
Developer EmeritusInterior DeveloperQuest Developer
Joined:
2015-09-28 20:13
Last seen:
1 year 11 months ago

What I wanted to say with that was that I have no such screenshots. The current ones are uploaded from some stuff in the galleries and some of my screenshots. To fight compression, you’d have to have properly sized one.

The boxes in the sidebar on the frontpage have a minimal image, a green-backed headline, and some descriptive text (with links, ideally). This works for the frontpage – what about the subpages, such as the forum or the claims browser? I set up an introduction box in each, but if the frontpage has images and stuff, those need to be redone too.

Maelan's picture
Maelan
Joined:
2016-05-14 21:57
Last seen:
1 month 2 weeks ago

About changing the aspect of other pages / side boxes : if you need some more mockups, to see what it could look like, just ask me.

About the screenshots : why don’t make a new community’s call for screenshots with a competition on the social networks for instance, with the top 5 being published in the site (slideshow) and FB and tumblr. It could be cool, and I think you definitely need some more casual interactions with the community/supporters.

Atrayonis's picture
Atrayonis
Developer EmeritusInterior DeveloperQuest Developer
Joined:
2015-09-28 20:13
Last seen:
1 year 11 months ago

Show me a mockup of the forums and the claims browser I can implement, and I’ll push things live within a week. Promise.

That said, Lev’s acquaintance (?) had some feedback for the mockups and I’m now in the position to pick and choose who to believe (I want less fonts). I’m also categorically against imitating Bootstrap and it’s giant “only smartphones count” design choices. I’ll probably scale down the dimensions on the dev site a bit this week.

The idea of putting this up for people to fill in never occurred to me. Wow, I feel dumb. Great suggestion!

10Kaziem's picture
10Kaziem
Asset DeveloperInterior Developer
Joined:
2015-12-12 23:47
Last seen:
2 years 7 months ago

Asking around for TR screenshots is a great idea; just ask people to be using minimal mods if possible. Screenshots can be resized extremely easily by anyone with a graphics program so if we have any you definitely want to feature just point me at them and I can resize them in a minute.

Does: concepts, textures, youtube vids, admin stuff e.g. PR, handbook, assets, small website things. Activity level: wildly unpredictable. Still active. Find me on Discord.

Atrayonis's picture
Atrayonis
Developer EmeritusInterior DeveloperQuest Developer
Joined:
2015-09-28 20:13
Last seen:
1 year 11 months ago

Bump. Since this came up again, I'll invite anyone to help improve on this.

I still need at least one mockup of the forums or the claims browser (preferably the forum) in addition to a mockup of a main page before I can do anything.

Atrayonis's picture
Atrayonis
Developer EmeritusInterior DeveloperQuest Developer
Joined:
2015-09-28 20:13
Last seen:
1 year 11 months ago

As usual, nobody has replied in here, so I went and implemented some of the main site changes which don't affect the subpages.