How do you create a single concept specified in the screen design?

Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
Greetings to all.

Here is the screen from the page:
As I understand it, there are CSS+SVG mixed. With all this control of light. Tell me, it's manually adjusted to one another (and kept in mind the final concept that you should have) or it can make a SINGLE tool?

I would like to understand how to create such things, using the correct gradients, the right light and the isometric (2.5 D).

Please help me with hint, indicating the desired direction for the study.
Thank you!

UPD:Thanks the tip Alex with the name of the editor Gravit Designer and search on YouTube I found this video lesson. Yet, this is the most realistic option on what you can do things like that. However, all the gradients there are manual and you need to clearly understand the physics of light (formation of shadows, reflections, etc.) for the correct choice of gradient.
by | 46 views

5 Answers

0 like 0 dislike
What kind of light? What 3D/CSS/SVG?
This is just an illustration in png. On the original website view.
0 like 0 dislike
If I understand correctly the question you have to ask, what was created the final layout, then, at first glance, used a few tools:

1. Adobe Illustrator - for creating vector illustrations
2. Adobe Photoshop - to edit these illustrations, and the quality of shadows and light
3. Adobe XD or Figma, or Sketch, for the layout of the site and collecting all the pictures and illustrations.

But it is not a panacea, then you can only use Illustrator or just Photoshop, but it will be less effective.

You need to decide exactly what you want? Illustrate or make models?
0 like 0 dislike
Consider the problem a bit. Dopustim, we are a team of developers(or one developer it does not matter) got the assignment to make a website according to the picture attached above, there might be a description of the behavior of elements, animations, or even split animle HR depending on user actions. Also, let us not have any limits, technology, etc. There is a task, zakazshik wants the result and then create. We have several options for further action.

1) In the forehead, from the perception of design. We understand that the elements of design is essentially a 3D scene with the perspective and the simple physics of light.

Then we can:
* Make all the graphics in a separate layer. Even in this case it will be canvas
* In another layer a lot just form content filling of the website

To work with 3D scene, we can either take an existing library or make your own solution which will masterservice us this scene on a plane which we can incorporate into the layout canvas. Let's say we decided not to waste my time and we are satisfied with our solution, we take biblioteku. For example, we took THREE.js. We position the canvas so to enter the future stage in the design. Using javascript and the solution we've chosen is drawn we need a 3D scene if you need added logic based on the reaction of the user (mouse movement etc). On top of canvas we position our static website (text buttons, etc.). For the implementation we used (in minimal version) html, css, js, maybe just the shaders and 3D models if you don't poluchilsa to do with primitives.

2) In the forehead, from the decomposition of logic components of the process.
We want to divide the project into components and implement component-wise, or we understand that every element of the interface should be completely independent. perhaps this will deal with different developers. Then most likely if there was pre-agreement. each developer will choose the most interesting or easiest method of implementation of the component. And in the end we get a hodgepodge of heaps of libraries and technology. The main thing then in the final stage to corodinate logic components. Used technologies (html + css + js + that we considered necessary in each individual component)

3) In the forehead by technology.
We say that we have a limited set of technologies that we can use. The minimum required set of technologies to implement such as the picture html and css. But more will be safe html, css, and svg. We have restricted the set of technologies and from primitive to more complex visual structures are involved. Using methods of deception of the perception of the user to achieve effects of three-dimensionality, the existence of the scene and lighting etc.

I very briefly described a variety of approaches to creating a unified concept of perception by the user. There are still infinitely many approaches and ways to implement processes of development. The choice and content of each specific zavisiat ofconcrete tasks, different conditions and the contractor. Why I was here. To give to understand a Single tool (silver bullet) in all cases no, always have to go from many factors. Just looking at the picture I would be purely a visual scene in the canvas using the same THREE.js and separately over the scene to position all the controls and text. If it's not static and if there is no spreading behavior of elements and display. there is already to think further.
0 like 0 dislike
People, it's isometric graphics. Flat. Vector editor is a grid with 30 degree tilt (eye determined) and binding objects. Play all gradient. Can vector editor to do without photoshop and the more figma!
0 like 0 dislike
1) Start to create a design with the illustration in Ai, here was a question about these illustrations With what program do you draw these pictures? And shadows and gradients in Ai are created.
here is an example lesson:

2) Next to design a web page, for example, in PS, you need (in layers, if necessary, or the whole picture) to transfer pictures from Ai, background, drawn in Ps, the text we type in Ps, the button is also in Ps and fill with gradient. The Saved Jpg.

3) Download Mockup, for example , laptop and insert the saved picture from the Ps. All this can also be done in Ps.

4) it turns out all that on your example :)

And yet there is a method for designing a Isometric view with the shadows in the 3D software, and then in PS it's all sketches are drawn in color:

Here is the program GRAVIT Designer lesson:

Related questions

110,608 questions
257,187 answers
40,796 users