Scitech
Corporate website with a ticket booking system
Me:
WEB-DESIGN
Team:
JS
METEOR
FIREBALL (CUSTOM FRAMEWORK)
BACK OFFICE
Presentation
Work Process
Swiss typography
Strict grid, lines, emphasis on typography
Each project has its own color
Discussing features
Personal account and registration
Registration is not required on a simple website, because we do not provide any data for a personal account. This functionality will be useless for the user.
"Lead magnets"
These are things that offer something useful in exchange for user contact. We do not like it, because it creates the feeling that you are in the bazaar and you are being scammed: first pay, and then decide whether it suits you. Marketers like such approach, but I prefer an honest variation of it: first give something useful, and then, if users like it, offer them to subscribe to the newsletter.
Carousel on the first screen
UX research doesn't provide any insights in that area: all projects are different. Therefore, we decided for ourselves: just never use any of sliders carousel. There is only one reason: some information is always hidden. So we prefer to show it as a simple list out of harm's way.
Site search
An ambiguous feature. We assume that site admins need that more than users. Let's figure it out later.
A draft from a client is a very useful thing to start a dialogue
Making a prototype of the structure
I always make prototypes in Figma instead of the sitemap, because:
- the structure is constantly changing,
- the client can click on everything.
- the structure is constantly changing,
- the client can click on everything.
We start with three pages: home, projects, project page. After the conversation we realised that the project page is not necessary, because there are few of them
Discussing the design
The website color palette should be based on client's logo: black and white with colored accents
This means that the site will be in the style of Swiss typography: a strict grid, an emphasis solely on text, contrasting colors.
I prepared references in order to agree in advance with the client whether we understood each other correctly.
I prepared references in order to agree in advance with the client whether we understood each other correctly.
Discussing the design with the client
The client did not like the color of the page. And they wanted to see a red line on a page
We were thinking about navigation: we need to snap to the grid regardless of the number of menu items
We decided to abandon such a chaotic arrangement of the photos, despite the fact that they are on the grid
It seems that the issue with the grid in the menu was solved: I divided the entire body into aside and container
The red lines that the client asked for looks too vague. Need to be more spot on
Then we think about how to show the block with projects and found out that we have gradients in the logo. It can be transferred to the design of the entire site.
P.S.: The black color in the project is specially made to attract attention.
P.S.: The black color in the project is specially made to attract attention.
Also I've talked to another designer to get an outside view. She prepared me a dock with comments
Putting everything together
Distinct lines 2px thick instead of 1px, turn red on hover
Photo aligned, without chaos, on the grid
Each project has its own color. Inherited this idea from the logo
Added project faces to entertain site users
And here is the development of the idea with project gradients
Another projects
