Units and Techniques

Nils Binder

06-Mar-2024

To Blog!
Nils binder

 

About Nils

Nils is the head of the webdevelopment team at 9elements. He also helped our class by teaching us some things. besides webdevelopment nils like to create origami.

 


9elements

At 9elements there are 3 units:

 

Communication Design:

The communication design unit mostly focusses on the corporate stuff and creating logo's and branding. They can be seen as non-coding developers.

 

Product Development:

The Product development unit works on designing products and apps. for example: 

They made the Schalke app, this is the app for a quite famous soccer club.

 

Web development:

The webdevelopment unit focusses on creating websites and webapps. This is also a bit divided in a few category's:

Nils works in this unit. and has shown us some of the things he works on. I really like what they do and most projects look awesome.

 

Wrapper Element

Nils knew a lot about css and js, he taught us a bit about the wrapper element that everybody uses. He has its own way of creating a properly responsive wrapper element. For this element he does this:

Here is the code for how to build it:

.wrapper {
  max-width: 100rem;
  margin: 0 auto; padding: 0 1.5rem;
}

.wrapper {
  width: min(100%, -3rem, 85rem);
  margin-inline: auto;
}

.wrapper {
  margin-inline: max(1.5rem, ((100% - 75rem) / 2));
}

 

Figma

Nils also talked about figma for a bit and he told us how it looks a lot like css. 

 

Units

In figma there are almost thesame units as css, with css you just have a few extra

Figma:

Css:

Design flexibel

Nils told us to always design flexible. Because you never know when a client wants another feature or another technology comes out that changes the viewport or something. If you design flexible and have responsiveness in the back of your head then this won't be an issue.

Optional column technique

Whenever you use grid you should look for fractional values instead of hard set px or em. This is also beter than percentages since fraction only uses the space it has and won't ever grow outside of its space.

 

Reflection

Looking back on this presentation i found it really awesome. Nils understood what we liked and how we coded. Since we are still studying we won't always know what the best way to do something is and it is really nice to then have someone explain to us how to do it. Besides the learning we did the presentation itsself was also done very well.

 

For my selfimprovement

Nils taught me a lot of things. For example the wrapper element usage. I now consistently use the code he gave us with some small adjustments. This has helped me out tremendously. I also use the ch unit a lot more. I never knew an unit like that existed.