FreeCAD Website Design

A forum for research and development of the user interface of FreeCAD

Moderator: agryson

User avatar
regis
Posts: 655
Joined: Sun Jul 12, 2015 8:17 am
Contact:

FreeCAD Website Design

Postby regis » Thu Jul 05, 2018 3:54 am

Hey since there was already a Freecad Logo Design,
I thought perhaps we can have one for FreeCAD Website Design.
What do you guys think?

Was in a rush and couldn't find out if we had a FreeCAD Website Design
dicussion already ongoing and couldn't find any in a quick search.
Attachments
Screenshot from 2018-07-04 23-47-30.png
Screenshot from 2018-07-04 23-47-30.png (131.6 KiB) Viewed 2518 times
User avatar
regis
Posts: 655
Joined: Sun Jul 12, 2015 8:17 am
Contact:

Re: FreeCAD Website Design

Postby regis » Thu Jul 05, 2018 2:31 pm

Let's Brainstorm Something Together

What I like to do sometimes is just go around shopping,
Shop for, ideas, inspiration, what is out there and what is not out there, etc
I would go and check out what the "pros/big" players are up to.
How they dress up their stuff, and how it generally makes you feel.
I try to collect as many a "General Impression" as I can.
Then I'll begin to point out what I thing is good, what I think is not good.

I would say something like this for example:

- The negatives:- nothing is ever made perfect, so criticising helps fish those
poor attributes and qualities out, and provide us with a general idea of what could be improved.

- The positives:- How ever they might have done something good at various levels,
so criticising helps with noticing the good things to get inspired from
(saves time as we do not need to reinvent new wheels)

the mental chat can go something like this :- this screen bleeds too much and becomes an eye sore,
how do we make it generally better, maybe a way to make it better will be to un-clutter,
to shrink some pictures, add something here, add something there,......
"I don't know, anything, for now it's just" a general brainstorm.

The hurricane cloud
To avoid getting too caught into that frame of thinking, because you may never be satisfied with your decisions,
today you might and then 3 days when you look at it again you are not satisfied.
So a guiding help is to remember:-
-We are doing this for fun,
-There is no right or wrong approach,
-We are not pros at website design and it's a good thing because
-What we do will also be friendly to those who are not pros at anything.

Natural Essence of Open Source
That's the nice an interesting thing about open source,
It is kept simple and elegant while at the same time having functionalities and great diversified though process behind it.
So what we will do we shall still emulate this idea in some naturally intuitive way.

Stage one:
So the first part of this exercise is to first find out what makes the fine pros have that fine touch,
"how do we give the fine touch to free-cad"?
Why do we want to know this?
Unless we haven't analysed what's out there, we can't know what is the current bench mark,
and therefore we can't know what is the value and quality of what we are about to make.
We are also looking for places where our creative potential will be mostly valued and
well expressed in a way that always promotes open source.

Certainly this is open source, and although we are not here to hunt the numbers,
we can certainly make this dangerously appealing/useful to other potential enthusiasts and skeptics
so as to provide a bigger thriving open source community.
I always look at blender as a success story in this regard, they claimed their spot amongst the Titans.

What do you guys think?
User avatar
regis
Posts: 655
Joined: Sun Jul 12, 2015 8:17 am
Contact:

Re: FreeCAD Website Design

Postby regis » Thu Jul 05, 2018 3:21 pm

Here are a few examples,
For now since this is a first round a few observations we can start from
let's take a look at revit, Dassault systems, Archicad, Bently just to get started with, i'm sure others can provide more great axamples as we embark on this design.
https://3dexperience.3ds.com/3dexperien ... iQQAvD_BwE
http://www.graphisoft.com/archicad/
https://www.autodesk.com/products/inven ... 7c0a240612
https://www.bentley.com/en/solutions

There can be more but these are a few screen captures highlights for an immediate brainstorming lunch.
Attachments
Screenshot from 2018-07-04 23-29-47.png
Screenshot from 2018-07-04 23-29-47.png (752.93 KiB) Viewed 2461 times
Screenshot from 2018-07-04 23-28-54.png
Screenshot from 2018-07-04 23-28-54.png (296.48 KiB) Viewed 2461 times
Screenshot from 2018-07-04 23-27-23.png
Screenshot from 2018-07-04 23-27-23.png (334.27 KiB) Viewed 2461 times
Screenshot from 2018-07-04 23-17-07.png
Screenshot from 2018-07-04 23-17-07.png (796.22 KiB) Viewed 2461 times
Screenshot from 2018-07-04 23-40-52.png
Screenshot from 2018-07-04 23-40-52.png (724.64 KiB) Viewed 2461 times
User avatar
regis
Posts: 655
Joined: Sun Jul 12, 2015 8:17 am
Contact:

Re: FreeCAD Website Design

Postby regis » Thu Jul 05, 2018 3:33 pm

Well this is where I would be a bit biased or selective,
There is a good sense of creative spice from Yorik's website that also helps with inspiration and picking out qualities.
So i'll also drop it in the mix for general observation.
There is a good sense of playfulness which embodies Open Source in contrast to the overly commercial examples.
There are more examples on the internet that one can recommend so do not hesitate to show an example of such websites that speak to you.
https://yorik.uncreated.net/index.html
https://yorik.uncreated.net/guestblog.php?2018=502
Attachments
Screenshot from 2018-07-05 11-29-10.png
Screenshot from 2018-07-05 11-29-10.png (1014.25 KiB) Viewed 2458 times
Screenshot from 2018-07-05 11-25-42.png
Screenshot from 2018-07-05 11-25-42.png (949.37 KiB) Viewed 2458 times
User avatar
bejant
Posts: 5933
Joined: Thu Jul 11, 2013 3:06 pm

Re: FreeCAD Website Design

Postby bejant » Thu Jul 05, 2018 5:29 pm

I'm not so sure we need to (or should) copy the big players have done. I like what AR795 has already done here:
https://forum.freecadweb.org/viewtopic. ... 10#p242350


Image


rockn used the look from another FOSS website (I don't remember which one - maybe the GIMP) to create a similar vibe for the FreeCAD website, and I thought that came out very nicely too:
https://wood-galaxy.github.io/Homepage/
AR795
Posts: 180
Joined: Fri May 25, 2018 11:55 pm

Re: FreeCAD Website Design

Postby AR795 » Thu Jul 05, 2018 5:43 pm

regis wrote:
Thu Jul 05, 2018 3:21 pm
Here are a few examples,
For now since this is a first round a few observations we can start from
let's take a look at revit, Dassault systems, Archicad, Bently just to get started with, i'm sure others can provide more great axamples as we embark on this design.
https://3dexperience.3ds.com/3dexperien ... iQQAvD_BwE
http://www.graphisoft.com/archicad/
https://www.autodesk.com/products/inven ... 7c0a240612
https://www.bentley.com/en/solutions

There can be more but these are a few screen captures highlights for an immediate brainstorming lunch.
I personally like the website of solidworks (https://www.solidworks.com/), and their motto, "Accelerate Innovation". Quite neatly designed. Its a good idea to look at these websites, occasionally they provide some unique design ideas.
User avatar
regis
Posts: 655
Joined: Sun Jul 12, 2015 8:17 am
Contact:

Re: FreeCAD Website Design

Postby regis » Thu Jul 05, 2018 6:39 pm

bejant wrote:
Thu Jul 05, 2018 5:29 pm
I'm not so sure we need to (or should) copy the big players have done. I like what AR795 has already done here:
https://forum.freecadweb.org/viewtopic. ... 10#p242350


Image


rockn used the look from another FOSS website (I don't remember which one - maybe the GIMP) to create a similar vibe for the FreeCAD website, and I thought that came out very nicely too:
https://wood-galaxy.github.io/Homepage/
Looking at what's done well else where isn't copying. But I think it is more useful to provide an explanation for why we like something. This provides a context and start building a frame and consensus. Woody galaxy is another good stuff so all we are doing is collective what is good and why it is good.
User avatar
regis
Posts: 655
Joined: Sun Jul 12, 2015 8:17 am
Contact:

Re: FreeCAD Website Design

Postby regis » Thu Jul 05, 2018 6:56 pm

AR795 wrote:
Thu Jul 05, 2018 5:43 pm
regis wrote:
Thu Jul 05, 2018 3:21 pm
Here are a few examples,
For now since this is a first round a few observations we can start from
let's take a look at revit, Dassault systems, Archicad, Bently just to get started with, i'm sure others can provide more great axamples as we embark on this design.
https://3dexperience.3ds.com/3dexperien ... iQQAvD_BwE
http://www.graphisoft.com/archicad/
https://www.autodesk.com/products/inven ... 7c0a240612
https://www.bentley.com/en/solutions

There can be more but these are a few screen captures highlights for an immediate brainstorming lunch.
I personally like the website of solidworks (https://www.solidworks.com/), and their motto, "Accelerate Innovation". Quite neatly designed. Its a good idea to look at these websites, occasionally they provide some unique design ideas.
Solid work is pretty sleek aswell, I would say they have a good way of creating a vibrant combination of the Red color with the rest of the page in fullscreen mode picture.
The reason I like yorik's web page is on the side of readability, the viewer is focused on everything that is center page. and this transfers well to mobile and tablet viewing aswell. It just makes it simple to scroll down while reading and you don'g get too distracted by the edges of the page.
Reason I pulled out the autodesk, is because they have too many products, so how do you organise all these products in a good way, in the same manner free-cad has too many workbenches and functionalities, so it also requires a clever break down of how to present the page. Archicad, is a good example of what not to do, pictures are just dropped anywhere and feels very tacky like collage. This doesn't help focus your attention on what is essential to be seen and read.

Also those motto's like "Accelerate Innovation", these are the kinds of small wording I was referring to, about little bits of inspiration comes by i'll drop a few texts. So wordings that work well with open source.
Your website is on a good start, however if no one speaks of it, to it, at it, as well it might stay where it is and we will not get the chance to improve it and instead dwell on website comparisons.
What does it look like if we had one main colour, or a colour gradient for the entire background of the page? Current, the jumps from hard blue, to hard Red etc, is too strong on the eye. It breaks the fluidity and makes it feel more like a Netflix type style of presenting.
What do you think?
AR795
Posts: 180
Joined: Fri May 25, 2018 11:55 pm

Re: FreeCAD Website Design

Postby AR795 » Fri Jul 06, 2018 12:06 pm

So here's v2 of the mock-up website design. In this version the cover page is replaced and designed from scratch to fit the website and I have added a few more sections. I have also added some details to the background to prevent it from being too plain. Let me know if something needs tweaking.
Attachments
freecad_home_page_design_2.jpg
freecad_home_page_design_2.jpg (974.82 KiB) Viewed 2378 times
AR795
Posts: 180
Joined: Fri May 25, 2018 11:55 pm

Re: FreeCAD Website Design

Postby AR795 » Fri Jul 06, 2018 12:16 pm

regis wrote:
Thu Jul 05, 2018 6:56 pm

What does it look like if we had one main colour, or a colour gradient for the entire background of the page? Current, the jumps from hard blue, to hard Red etc, is too strong on the eye. It breaks the fluidity and makes it feel more like a Netflix type style of presenting.
What do you think?
Ah yes, I forgot to mention about the color gradients I used. I have attached a diagram to help better understand what I mean. Well my plan was to make complete use of colors in a color wheel, going clockwise from cyan color and back. As you can see each section has a gradient and starting from the top left the gradient moves in a zigzag manner top to bottom covering the entire color wheel.

Having one or two main colors for the background can also work and I will create a version with more simpler backgrounds later to see how it fits together.
Attachments
color_wheel.png
color_wheel.png (90.68 KiB) Viewed 2375 times