# FA New Home Design Suggestion



## Mailylion (Oct 21, 2016)

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.


----------



## jayhusky (Oct 22, 2016)

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 (Oct 22, 2016)

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.)


----------



## jayhusky (Oct 22, 2016)

@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 (Oct 22, 2016)

quoting_mungo said:


> 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. ^^



jayhusky said:


> 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".


----------



## jayhusky (Oct 22, 2016)

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


----------



## Mailylion (Oct 22, 2016)

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

Just a few more questions:



jayhusky said:


> 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?


----------



## jayhusky (Oct 22, 2016)

Mailylion said:


> Alright, then I guess we'll get the show on the road. ^^
> 
> Just a few more questions:
> 
> ...



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.


----------



## Mailylion (Oct 22, 2016)

Alright, I'll send you a jpg with the individual measurements a bit later. ^^


----------



## jayhusky (Oct 22, 2016)

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 (Oct 23, 2016)

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):


----------



## Dragoneer (Oct 24, 2016)

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 (Oct 24, 2016)

Dragoneer said:


> 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.


----------



## ItsNix (Oct 25, 2016)

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.


----------



## lockaboss (Oct 25, 2016)

Mailylion said:


> 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.
> 
> ...


thats amazing this should be the new home thing


----------



## Mailylion (Oct 25, 2016)

ItsNix said:


> 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.



lockaboss said:


> 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 (Oct 25, 2016)

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?


----------



## ItsNix (Oct 25, 2016)

Well, here's the script if it interests you. Maybe it sort-of demonstrates what you want to do here... minus the nav and new features for now. Also, I love the cover banner idea on the profile page. <3

greasyfork.org: Fur Affinity Experimental UI


----------



## jayhusky (Oct 26, 2016)

@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 (Oct 26, 2016)

jayhusky said:


> @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. :\


----------



## jayhusky (Oct 26, 2016)

ItsNix said:


> 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.


----------



## jayhusky (Oct 26, 2016)

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.)_


----------



## ItsNix (Oct 26, 2016)

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:


----------



## jayhusky (Oct 26, 2016)

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.


----------



## ItsNix (Oct 26, 2016)

jayhusky said:


> 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.


----------



## jayhusky (Oct 26, 2016)

ItsNix said:


> 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.


Hmm, true, well we've achieved a lot in a short amount of time, that counts for something.


----------



## jayhusky (Oct 26, 2016)

As for the beta note, I am guessing you refer to the news item? Part of the modification I made to mine, was if you dismissed the news item it would change the text to "No News", it was supposed to hide the content, but it returns "undefined" instead. Although I plan to edit the css for it so when the news is dismissed it melds into the background instead of sticking out like a sore thumb.


----------



## ItsNix (Oct 26, 2016)

Ah, ok. It's a hidden element. I'll see what I can do to that then as well, but tomorrow. It's late. 
Thanks for the tip.


----------



## jayhusky (Oct 26, 2016)

ItsNix said:


> Ah, ok. It's a hidden element. I'll see what I can do to that then as well, but tomorrow. It's late.
> Thanks for the tip.


Not so much a hidden element as a element that is controlled by javascript and a certain cookie. but yes, you go rest, you've put in a lot of hard work on this and I'll say it on behalf of everyone else, it's very much appreciated.


----------



## jayhusky (Oct 26, 2016)

Made some tweaks, now it looks reasonable on a mobile device (user menu not visible at the moment)

*Disclaimer: *_Had to blank a submission as it was rated adult. (Submissions were left in this screenshot to show the menu, otherwise it would just look like a dark slab of links)_


----------



## Mailylion (Oct 26, 2016)

Wow! This is really coming along nicely! ^^Great work you two! Keep it up and let me know if you need any further info on the design or certain graphics. I can't wait to see if the new display method for new artwork/fursuits/crafts/writing/poetry is going to work as well.


----------



## ItsNix (Oct 28, 2016)

It's your design, so as long as you keep it up, I can implement it (to the extent at which it allows me, at least).
I added the site news box, but accidentally dismissed the message before getting the new button working... so that's a bug.
It's there though. Take my word for it since I can't take a picture either! 
I couldn't test mobile, so I'll assume it's broken with that message.

greasyfork.org: Fur Affinity Experimental UI


----------



## jayhusky (Oct 28, 2016)

Sent you a little tip on how to bring back the news message if you need to test it further.
I haven't tested mobile per se, but shrank the chrome browser window to a very small resolution to imitate it.

I'll grab your update a little later and see how things are getting on


----------



## jayhusky (Oct 29, 2016)

Looks nice, I like your implementation of the news better than mine. Looks more professional.

Made some extra bits to it and it works on the staff page and browse pages too now. (needs some work to fix responsiveness on the staff page) but it's getting there.


----------



## ItsNix (Oct 31, 2016)

Alright, I updated it. You can now dismiss news notifications.
greasyfork.org: Fur Affinity Test UI Homepage


----------



## jayhusky (Nov 1, 2016)

ItsNix said:


> Alright, I updated it. You can now dismiss news notifications.
> greasyfork.org: Fur Affinity Test UI Homepage


Nice. Does it stay dismissed after the user has dismissed it?

Also, I noticed, since we both had different methods of how to implement the design, that there was a small bug in my version thanks to Bootstrap, which caused all the ad's to be offset by as much as 100px to the right or down from their placement.

I've just managed to fix the ad's issue, and also taken the time to add support for a few extra pages (most of the control pages & login are supported too).
All the sidebar ad's are fixed so they work. Even though I personally do not allow the googleads, i'm working to make those supported so they look ok in the new design.

Here's how the footer looks now for me. ( I blanked the ad's to avoid content issues)



I did think, since we've pretty much got the homepage down, should we have a go at bringing @Mailylion's profile design to life?


----------



## TheKC (Nov 10, 2016)

Just wanted to come on here and say I love the profile page. It's just missing the Profile information, the area you get to type thing in. I like advertising Links and groups there. 

Everything looks really slick! I hope they use it. =3


----------



## jayhusky (Nov 10, 2016)

TheKC said:


> Just wanted to come on here and say I love the profile page. It's just missing the Profile information, the area you get to type thing in. I like advertising Links and groups there.
> 
> Everything looks really slick! I hope they use it. =3


I don't think it would be too difficult to add the profile text, its just a case of where. I have some ideas, but I'll check them with the designer to see if they think it would work.


----------



## jayhusky (Nov 17, 2016)

Since FA posted a small batch of updates, some of the work I had done on the profile/staff and notes pages need reworking as they're partially broken.
However I do have a browse page to share. This projects not dead yet...




_*Submissions blanked due content and permissions_


----------



## jayhusky (Nov 24, 2016)

Alright last one from me for a little while, but here's a updated journals page.



 

_Eagle-eyed users will note I chopped out a large number of the journals that are showing in the sidebar, as with every journal showing in the preview pane, the page is over 20K pixels in length, and that's without the Userscripts by ItsNix and myself running.._


----------



## ruffyyoshi (Oct 13, 2017)

Hi,
I have been using the beta for a little while and overall like the direction. I'd like to chime in my two cents on how they could further improve the experience, since I used to work as a graphic/UI designer full time a few months ago. ^^
Here's a mockup I made:



 
It overall retains the current beta layout, with some enhancements. My current issue is links mostly: some are colored yellow, light yellow and even white. So it's hard to distinguish what can be interacted with and what can't. In my mockup, I colored every object that can be interacted with the same yellow as the logo, so you can tell right off the bat by looking at it. I also gave buttons the same shape as the logo for kicks.
I'm also not too much of a fan of total square-ish layouts hence why I rounded everything a little, but that's just a personal taste question. ^^ I welcome feedback!


----------

