• Fur Affinity Forums are governed by Fur Affinity's Rules and Policies. Links and additional information can be accessed in the Site Information Forum.

FA New Home Design Suggestion

Mailylion

Comes in up to 4 boxes
Hi everyone ^^

I've been hangin' around here for quite some time now and I've been watching you guys progressing with the new FA website design. You did a good job on most subpages of the current Design. I do however feel that the main page still has a lot of potential regarding user friendliness and the display of submissions in a more appealing fashion.

So I sat down and came up with a few changes that probably won't require too much effort to do but would greatly increase interactivity with the Site in general.

I could have put a few more "new" elements in there, but my goal wasn't to redesign the whole website, just the main page.

Before you continue, please save the preview picture on your computer and then drag and drop it into a new tab in your preferred browser.

Also: Sorry to all the random artists I stole pictures from. ;3 Rest assured they were only used as examples for this design and were not used in any other way anywhere else.

These are a few noteworthy changes I made:

Website Header and Navigation
I changed the overall appearance of the site's header. It is now bigger, now features the site news in a more noticable way and "Support" and "Community" were sepearted for more straightforward interaction. I also changed the profile summary to look a bit more appealing and space saving.

Four Art Main Sections (actually 3, wasn't sure if you admin guys would like the design, so Fursuiting & Crafts will be included later ;3)
They each feature a much bigger and more effective display method and are much more user friendly and interactive. All of the sections now feature a "popular" drop down menu and a "search by category" link which automatically links to the "browse" sub page. The scroll arrows on either sides of the categories make it much easier to quickly browse the latest submissions without going to the "browse" sub page.

Recent Artwork
All the recent artwork will be displayed here, as usual. There isn't too much to be said here. When designing this section I tried to imagine how an artist would want his pictures to be displayed. And especially as a site that features mostly visual art it is of utmost importance that pictures are being displayed in such a way that they are being noticed.

Recent Writing & Poetry
You can't really say the current beta website design really features writing & poetry in an appropriate fashion, now can you? So this section was in dire need of a revision. Now each new submission features a short excerpt of the writer's story while still having a custom thumbnail picture to draw attention. :3

Recent Music & Audio
This section has also been improved to draw more attention.

Footer
Only changed the layout of a few elements here.

What are you guys saying? Would it be possible to implement some of these features without too much effort on the coding side?

Once again I want to mention that I could've come up with an even more elaborate design. I do however know how time consuming it is to even implement just the few new features and designs I just suggested for the coders of FA, so I went with just a few slight changes for the main page which would still make the main page prettier and easier to use.



fa_home_design_prefinal_01.jpg
 
Last edited:
J

jayhusky

Guest
Wow, nice!

I like the design, it's not cluttered, its easily navigable and not a lot of wasted whitespace.
The only bit that bugs me is the large space in the footer, but then again on smaller screens it would be a lesser space so it's all good I guess.

As for the development side of it, it wouldn't be too hard to turn this into a template for the site, the harder stuff is the actual code that offers the functionality underneath, such as PHP etc. The templating would be easy to do if done correctly.

Overall I would say it is very good, nice job.!!
 

quoting_mungo

Well-Known Member
That's absolutely visually appealing at your resolution - I can't say how it might work for smaller screens at a glance, however.

I can say offhand, however, that pretty as your vision for stories may be, I suspect it would be a lot of work to implement, and would be liable to either break gallery views across the site or necessitate the addition of an extra thumbnail field to story submissions, as it appears you're using thumbnails in a different format than what we currently have. (Also note that while it might be technically possible, and I'm honestly not sure whether that's the case, at the moment the only story files that get parsed directly by FA are ones uploaded directly in .txt format; in order to implement something like this FA would have to parse at least the first few sentences of all allowed story formats.)
 
J

jayhusky

Guest
@quoting_mungo Not necessarily, the promo text on the thumbnail could be the first "X" Characters of the submission description, that way FA still loads and parses its own text without having to incorporate additional code changes.
The thumbnail/text combo can be two separate containers holding their respective data and then layered on top of one another to produce a hover-over effect. Similar to a system Weasyl employed a while back, but have since dropped it.

I'd be willing to put the time into developing a demo template of this with all the relevant code etc to test it as a responsive design if @Mailylion is ok with that?
 

Mailylion

Comes in up to 4 boxes
That's absolutely visually appealing at your resolution - I can't say how it might work for smaller screens at a glance, however.

I can say offhand, however, that pretty as your vision for stories may be, I suspect it would be a lot of work to implement, and would be liable to either break gallery views across the site or necessitate the addition of an extra thumbnail field to story submissions, as it appears you're using thumbnails in a different format than what we currently have. (Also note that while it might be technically possible, and I'm honestly not sure whether that's the case, at the moment the only story files that get parsed directly by FA are ones uploaded directly in .txt format; in order to implement something like this FA would have to parse at least the first few sentences of all allowed story formats.)

Thank you for your input. Unfortunately I am not really a coder and can't always tell how much work it would be to implement certain features. Maybe what @jayhusky is suggesting might work just fine. I guess we'll just have to try and see. ^^

I'd be willing to put the time into developing a demo template of this with all the relevant code etc to test it as a responsive design if @Mailylion is ok with that?

Sure thing @jayhusky! I'd be glad to work with you on a potential and actually working concept. ^^ Will you be able to actually test your code with the actual FA website?

Just let me know what graphics you need and I'll provide.

Also, keep in mind that I am living in Austria and won't always be able to reply right away. >__< I do however have a telegram account (like almost every fur nowadays X3). You can add me using my nick "mailylion".
 
J

jayhusky

Guest
I'd be able to develop a working "static" concept, where it would show all the functionality, but wouldn't update when the website updates. This is mainly because FA doesn't have an API and access to its code is strictly down to staff. I'm not a member of staff, as is evident by my signature. But I've been working on a lot of things to do with FA over the years, so I'm often posting concept stuff about the site, on it.

As for graphics, realistically, we'd only want to rely on them for things such as menus (browse etc) and for the actual submissions/adverts etc. This way its light on bandwidth and also means it'll scale nicely from mobile to large screens without multiple resolutions of images. So If you'd be up to creating some content to do with those, that would be awesome.

That's ok. I'm not a user of telegram unfortunately, but I'm around here a fair bit, so you're always welcome to drop me a PM here if you need anything.

Once a concept template is done, I can see a possibility of creating a userstyle which creates this effect on the live site. might take a bit of work, but I think it's doable
 
Last edited by a moderator:

Mailylion

Comes in up to 4 boxes
Alright, then I guess we'll get the show on the road. ^^

Just a few more questions:

I'm not a member of staff, as is evident by my signature. But I've been working on a lot of things to do with FA over the years, so I'm often posting concept stuff about the site, on it.

Do you think if we put some work into it that there is a slight chance some of the staff will think about actually implementing it?

Do you need anything else from me? Like the jpg with the actual margin/padding/sizes of elements etc.?

How long do you think it'll take you to get it done?
 
J

jayhusky

Guest
Alright, then I guess we'll get the show on the road. ^^

Just a few more questions:



Do you think if we put some work into it that there is a slight chance some of the staff will think about actually implementing it?

Do you need anything else from me? Like the jpg with the actual margin/padding/sizes of elements etc.?

How long do you think it'll take you to get it done?

In answer to your first question, your guess is as good as mine. A concept is as good as anything, but whether it actually gets off the ground is a different thing.
As for the others, a JPG with the dimensions of the elements would be useful, as I can build it to be static first, and then adjust it to work fluidly as I go along.
With this, I wouldn't put anything in stone, but I could in theory get a usable demo down in maybe a week.
 
J

jayhusky

Guest
Cool.

I'll send you a link to an online demo of it on Monday, it won't be complete by then, but you'll be able to see it progress as I change it.
I've got a responsive header navigation and footer navigation down already, so I can spend a majority of the time on the actual content.
 

Mailylion

Comes in up to 4 boxes
There's a slightly updated Version of the main page design now. It's got an overall darker theme and I changed the FA Logo to meet, let's say, modern standards ;3):

fa_design_vers_011_darker_03.jpg

 

Dragoneer

Site Developer
Staff member
Site Director
Administrator
There are some great ideas here, some of which we're working to implement into the site to some degree. One of the things I want is for FA's front page to be a community hub, so in addition to things like recent art and submissions, it can also have a list of upcoming conventions and events, feature community concepts, monthly art challenges and more.
 

Mailylion

Comes in up to 4 boxes
There are some great ideas here, some of which we're working to implement into the site to some degree. One of the things I want is for FA's front page to be a community hub, so in addition to things like recent art and submissions, it can also have a list of upcoming conventions and events, feature community concepts, monthly art challenges and more.

That sounds great ^^ I am sure that would be a very useful addition. I very much believe that FA can absolutely be the furry art website that is loved by almost everybody again. There was a lot going on in the past that certainly scared a few users away and the slow progression of the BETA website design didn't help the overall mood either. But now is certainly the time to actually show what FA really can be!

I can try to come up with a more "elaborate" design, if you want me to. As mentioned further above, my goal was only to make the existing front page more appealing and easier to use with minimal effort on the coding side.
 
Last edited:

ItsNix

New Member
I like the theme a lot, and I tried implementing it myself using scripts but ran into some complications.
First: the navigation menu and reprogramming a script for the dropdown menus.
Second: how images are processed on Fur Affinity, which would require thumbnails to be reprocessed.
Third: Sorting through the front page would require changing how queries are made in PHP.
Other than that, I think it's pretty straight forward. Hopefully they can pull this off.
 
L

lockaboss

Guest
Hi everyone ^^

I've been hangin' around here for quite some time now and I've been watching you guys progressing with the new FA website design. You did a good job on most subpages of the current Design. I do however feel that the main page still has a lot of potential regarding user friendliness and the display of submissions in a more appealing fashion.

So I sat down and came up with a few changes that probably won't require too much effort to do but would greatly increase interactivity with the Site in general.

I could have put a few more "new" elements in there, but my goal wasn't to redesign the whole website, just the main page.

Before you continue, please save the preview picture on your computer and then drag and drop it into a new tab in your preferred browser.

Also: Sorry to all the random artists I stole pictures from. ;3 Rest assured they were only used as examples for this design and were not used in any other way anywhere else.

These are a few noteworthy changes I made:

Website Header and Navigation
I changed the overall appearance of the site's header. It is now bigger, now features the site news in a more noticable way and "Support" and "Community" were sepearted for more straightforward interaction. I also changed the profile summary to look a bit more appealing and space saving.

Four Art Main Sections (actually 3, wasn't sure if you admin guys would like the design, so Fursuiting & Crafts will be included later ;3)
They each feature a much bigger and more effective display method and are much more user friendly and interactive. All of the sections now feature a "popular" drop down menu and a "search by category" link which automatically links to the "browse" sub page. The scroll arrows on either sides of the categories make it much easier to quickly browse the latest submissions without going to the "browse" sub page.

Recent Artwork
All the recent artwork will be displayed here, as usual. There isn't too much to be said here. When designing this section I tried to imagine how an artist would want his pictures to be displayed. And especially as a site that features mostly visual art it is of utmost importance that pictures are being displayed in such a way that they are being noticed.

Recent Writing & Poetry
You can't really say the current beta website design really features writing & poetry in an appropriate fashion, now can you? So this section was in dire need of a revision. Now each new submission features a short excerpt of the writer's story while still having a custom thumbnail picture to draw attention. :3

Recent Music & Audio
This section has also been improved to draw more attention.

Footer
Only changed the layout of a few elements here.

What are you guys saying? Would it be possible to implement some of these features without too much effort on the coding side?

Once again I want to mention that I could've come up with an even more elaborate design. I do however know how time consuming it is to even implement just the few new features and designs I just suggested for the coders of FA, so I went with just a few slight changes for the main page which would still make the main page prettier and easier to use.



fa_home_design_prefinal_01.jpg
thats amazing this should be the new home thing
 

Mailylion

Comes in up to 4 boxes
I like the theme a lot, and I tried implementing it myself using scripts but ran into some complications.
First: the navigation menu and reprogramming a script for the dropdown menus.
Second: how images are processed on Fur Affinity, which would require thumbnails to be reprocessed.
Third: Sorting through the front page would require changing how queries are made in PHP.
Other than that, I think it's pretty straight forward. Hopefully they can pull this off.

Thanks for analysing the whole thing. Maybe there will be a work around for all these issues.

Unfortunately I couldn't test all of this yet since I have no clue about coding. I do know some CSS and HTML and can build very basic websites. But as soon as it comes to implementing databases and such I am completely clueless.Usually I work on work that is more graphic (since I am a graphic designer) in nature.

thats amazing this should be the new home thing

Thanks ^^ I do hope some of it will be implemented in a future design update. I am also interested in seeing what the new features @Dragoneer mentioned are going to look like.
 

Mailylion

Comes in up to 4 boxes
I am also working on a new profile subpage. I even got a little preview ready but I am still working on quite a few things.

Especially troublesome are certain infos like the profile stats. What should be more prominent? What should be less prominent? I do believe the watch lists and the shoutbox have been neglected a bit and maybe they should receive a bit more love in the future, especially if FA is to become a more social place again.That's why they are going to get an even more prominent space within the profile page. So that is certainly something I'll still be working on.

What's most important is of course the art and all the other submissions that need to be featured in a more noticable way. By adding a customisable header and by pushing the submission preview up a notch that goal is certainly achievable.

Anyway, what do you guys think so far? What are your thoughts and your needs for a better profile page?

profile_preview_01.jpg
 
J

jayhusky

Guest
@ItsNix I hope you don't mind, I've been working with your Experemental UI script and had some success with the nav, so far I've got the entire left side working (minus the dropdown features) and I'm just working on the right side now.
 

ItsNix

New Member
@ItsNix I hope you don't mind, I've been working with your Experemental UI script and had some success with the nav, so far I've got the entire left side working (minus the dropdown features) and I'm just working on the right side now.

Yeah, it's the dropdowns that were the problem. It always targets the nav/ul/li element at the top parent. I had it done on my end as well, but I trashed it since the dropdowns interfered no matter what. Shame. :\
 
Last edited:
J

jayhusky

Guest
Yeah, it's the dropdowns that were the problem. I had it done on my end as well, but I trashed it since the dropdowns interfered no matter what. Shame. :\
Ah I see, hopefully there is some form of workaround somewhere.
 
J

jayhusky

Guest
Here's my attempt at the dropdown menus (I had to blank out all the submissions as I don't have permission to show them, and some were marked Mature/Adult and not fit for viewing on the forums, I did leave a small sliver of them showing to show the menu's border however, but not enough to show anything of the submission.)

ExperimentalUI.png
 
Last edited by a moderator:

ItsNix

New Member
Ah, you made me realize just how much I was overthinking the problem. I guess that's what I get for working this late (and definitely not the fact that I'm not a web developer xP).
Here's the new script (again, my bad and thank you): greasyfork.org: Fur Affinity Experimental UI
I didn't test it with submissions, but hopefully it works. I don't have the beta notice, so I can't fool around with that.

I figured out how to post an image:
EkxPR81.png
 

ItsNix

New Member
No worries, I just looked at your script update and noticed we both went different ways about it, I was going to post my copy at GreasyFork but it kept denying me for some reason, so it's up on github. GitHub - jaysonhusky/FA---Experimental-UI: An Experimental Design For FA's UI

Let me know what you think.

Ah, yeah. I was going to recreate the menus as well. I ended up just removing the menu from the name and keeping it on the picture. It's far from perfect, but I think that's as close as we'll get.
 
Top