<p>Published on <a href="https://blog.prototypr.io/your-next-web-page-with-css-grid-421c9fa50c37?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Erkan Kerti </p>
<p>Ready for the beautiful web</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3C36tOvsUeAXa6_2-XKyTg.png">Let’s make things beautiful. Photo by <a href="https://unsplash.com/photos/aWBPk_GBaCk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Koushik Chowdavarapu</a></p>
<p>Since the foundation of Bootstrap, Web became a different place. Before Bootstrap, everyone was doing different pages and these pages’ look were different. People didn’t care about the user experience as we know it today. Definition of experience for the web was thought to be good at animating things only, with <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Adobe Flash</a>.</p>
<p>Numerous things happened since then. Web became more application related with the help of the Ajax. In addition to that, mobile platforms became widely available. Too many applications needed different sizes instead of only one. Designing and coding a responsive web site became the ultimate aim over the years. And than bootstrap came in. It contains basic design values and easy codes for development. Basically, it helps developers to make a web page without a designer. So they did not care about the design so much while focusing on developing the backend. Framework for the web have become like an apple candy for developers since then (Well it’s not the case today, design and experience is too important to leave it to a framework today).</p>
<p>Time passed and making bootstrapped applications became an industry standard for web, even developers aren’t using the actual Bootstrap. Maintaining and scaling a product are the essential agents to grow your business today, so, designers and developers design and build their own CSS frameworks. They make reusable components for tons of different pages or application forms.</p>
<p>If you are a designer and work for a company that grows, you have to maintain the user interface. It’s more likely to make new features every day. You need to build reusable components. While you want to try some exciting things for these (if you have enough time, obviously), you also have to think about the CSS and JS structure of the applications. Design should be consistent with these structures.</p>
<h4>Follow the orders or ask where is the Deus Ex?</h4>
<p>Designers have to follow the orders to maintain design system while there are too many requests coming from customer success team, sales team, and CTO. You need to care about the system you build with the new improvements and features. There are rules and timeframes for developing new features, remaking the old ones, and improving another (to make your business grow). So, let me put these into different words: You need to stay creative while following the orders that frameworks enforce. (This is where you ask the ‘<a href="https://www.britannica.com/art/deus-ex-machina">Deus ex machina</a>’, to resolve the puzzle). This leads designers to create designs for the frameworks’s sake, not for the sake of creativity. They need an appropriate tool to reveal their creativity. As I pointed out <a href="https://medium.com/@erkankerti/why-do-you-need-to-use-css-grid-12e387a24679">before</a>, frameworks provide grids that actually works horizontal, not vertical. It has boundaries that stops designers creativity. This is where I say that CSS Grid will provide new juice for this. So if the designers want to think differently, they need to understand the new boy in town first: CSS Grid.</p>
<h4>Think out of the box, literally</h4>
<p>Design systems are trapped in horizontal structure, so vertical thinking for developing components was hard to do. This is not a bad thing, they provide strong modular systems but maintaining them is hard. Doing something that CSS doesn’t have can be a headache. But, with using grid it’s easy. Connecting two rows and make a vertical division can create a new type of component for our design systems. I don’t say that grid provides a game like graphics. What I say is, we have a new magnificent tool to use in our interfaces to build beautiful design systems. It may not happen in one day, maybe will take lots of experimentation but it has a potential to morph our design system thinking for the web.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*flDdfnbTssV57LCogEWAMQ.jpeg">Grid Menu from <a href="https://tympanus.net/codrops/">Codrops</a>.</p>
<h4>Experiment and joy</h4>
<p>Experiments are happening already. Look at these examples: G<a href="https://github.com/codrops/GridMenu">rid menu</a> from Codrops or inVision’s <a href="https://www.invisionapp.com/enterprise/design-genome">Design Genome Project</a> web page. See? Things are easy and fun now.</p>
<p>The more we experiment on new things, the closer we are to build different and beautiful things. Our way of designing UI’s automatically adjusts our thoughts to the current coding. But tomorrow, it will be different. CSS Grid doesn’t have thresholds (or have other thresholds that we haven’t experienced yet).</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/568/1*0IB2g1xKZKPe6lLQTB0FIQ.jpeg">Swiss Graphic Design, Einspuren — Spur Halten</p>
<h4>Bring real graphic Design to web</h4>
<p>So we think with the grid while thinking of enhancement of the looks, enhancement of placing content and data. This leads us to think the depths of the graphic design. Because we didn’t have the right tools, we couldn&#8217;t bring it to the web table easy, yesterday. Think about <a href="https://tr.pinterest.com/sub88/swiss-graphic-design/?autologin=true">Swiss Graphic Design</a>. It seems so basic, yet so tasty. It’s the real simplicity that we love. When looking the grid perspective Swiss poster like layouts and design systems can be possible. CSS Grid provides graphical context for a frontend. Another example, Medium did a magnificent job at the first part of the main page. Now we can see different articles asymmetrically. Think about the good old column design, we can offer that kind of design with the printed media but not on the web before there is a CSS Grid.</p>
<p>Let’s make it happen, unite design system with the graphic design. But not only with the same layout but many. Let’s offer our users really good examples of graphic and if possible, art. Yes really, let’s add art to usability. We don’t know yet how to bring art to the table but I guess we have a lucky clue for the beginning. The more we try, the more we find new things.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=421c9fa50c37" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/your-next-web-page-with-css-grid-421c9fa50c37">Your next web page, with CSS Grid</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Your next web page, with CSS Grid

Top Stories