{ "version": "https://jsonfeed.org/version/1", "user_comment": "This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL — https://grafiskjournal.com/feeds/feed.json — and add it your reader.", "title": "Grafisk Journal", "home_page_url": "https://grafiskjournal.com", "feed_url": "https://grafiskjournal.com/feeds/json", "items": [ {"id":"https://grafiskjournal.com/archive/weld","url":"https://grafiskjournal.com/archive/weld","title":"Interview: Weld the Visual Web Tool","content_html":"

[
\n{
\n\"attrs\": [],
\n\"content\": \"### Introduce us to Weld, how did you start working on it?\\n[Tom] Weld started as an idea way back in 2007, 2008. At the time I was still creating video games but I was starting to move towards web and app design. The video game industry had tools such as Unity and Flash that enables you to prototype and test quickly. There wasn't any similar tools available for designing apps, and this got me frustrated. That\\u2019s how the basic idea for Weld started to take shape; think about the impact we could make if people could easily do utility-applications with the help of similar tools. But it wouldn\\u2019t be until 2013 that we actually started to do something about it.\\n\\nRight from the start we used the lean startup methodology. We had a fika with about 10\\u201320 persons. The first round of interviews was strictly focused on understanding what digital creatives worked with and what their problems were. It was important not to have any preconceptions about how the end product would work or look. It wasn\\u2019t until the next phase that we showed pictures or smaller prototypes of the actual product. Soon we would have a demo version that we could let people try for themselves. This is about the time I met Henric.\\n\\n[Henric] Tom showed me an early prototype and I was struck by how great the idea was and how relatively good the prototype was for it\\u2019s early stage. I was a developer for MagineTV and had just started to look around for new opportunities when I met Tom. Weld seemed like a great product to work on. At that time Weld wasn\\u2019t a company, so we founded it together. There were a lot of other opportunities available but Weld seemed the most fun.\\n\\n[Tom] So we started the company in 2014. By the beginning of 2015 we had our first Weld product live. At the time, Weld was primarily a responsive wireframing tool.\\n\\nIt was when we launched Weld on Product Hunt in February 2015 that the product really started to gain traction. And we got a lot of new users. Weld 2.0 was released a couple of months later, in September. At that time it was more of a complete design tool that also had the ability to publish your designs as complete websites. We called it Weld Websites, and it\\u2019s the natural evolution of the first version. The third milestone is to enable the creation of interactive applications, we call it Weld Apps. This is the version we are hard at work with right now. We are also working on improving the general design tools as well. The end goal is to create a tool that let\\u2019s us create professional apps without code.\\n\\n

\"\"
Weld is built to run entirely in your web browser
\\n\\n### Weld is a web app designed to run in the browser. What are the benefits of this approach?\\nIt felt more future proof to build it to run directly in the browser. At the time, there were already a lot of rudimentary tools for converting websites to native apps. It is harder to build native apps and go the other way around. So we saw it as the best compromise to be able to offer the service both as a native app as well as a web based platform in the long run.\\n\\n### What are the challenges?\\n[Henric] Just as any other platform, the web has its fair share of problems. Often you think you\\u2019ve designed something that\\u2019s entirely waterproof but when you test it you find, for example, that there are some small bugs in Safari or Internet Explorer that ruins it. So we\\u2019ve spent quite a lot of time with that. And if you\\u2019re concerned about performance, there\\u2019s a lot to be careful about when building web apps. But the upside is that you only develop one product and that product works regardless of device. You can even fire up Weld on your iPad and it will work even thought we haven\\u2019t actually optimized for it.\\n\\n[Tom] With a couple of tweaks we could run Weld on most mobile devices too, but at the moment the application toolbar won\\u2019t fit.\\n\\n### What about the competition?\\n[Tom] There\\u2019re a lot of competitors, both within the prototyping sector but also within the web design sector. At the moment we consider Weld to be more of a web design tool, but about half of our paying customers still use Weld primarily as a prototyping tool. As you\\u2019ve written on Grafisk Journal; it really is an explosion of design tools right now. But within the web design sector Weld is much more of a free-form design tool. Weld is not just for the persons who are interested in creating a simple website, but for people who cares about the details and wants to go in and adjust stuff themselves. Weld is for entrepreneurs or designers with a clear vision of what to build but who aren\\u2019t interested in learning how to code.\\n\\n### You\\u2019ve written about Keynote a lot, what do you like about it?\\n[Tom] Keynote is easy to use and its pretty flexible, you can use it for creating presentations, animations, wireframes and even prototypes. I like that. And that philosophy translates to Weld. Weld is supposed to be a general purpose application where you either can do prototypes or finished websites or apps. And if you\\u2019ve learned to do one thing in Weld, it should be easy to do the other. All startup methodologies contradicts this. You\\u2019re told to simplify and be focused on solving just one problem. But when I did the early interviews I found that many people still preferred regular pen and paper but also tools such as Keynote that didn\\u2019t restrict them. I think there\\u2019s a lot of benefits in being a bit more free.\\n\\n### How do you work with user feedback?\\n[Tom] User feedback is really important. Both because we are still in a phase where we are still learning about the product but also because that\\u2019s one of the few things we actually can compete with as a small startup. Our competitors are often much larger, have a lot more money or have been building their product for several years already. But we can be much quicker and more personal and helpful towards our customers even thought we don\\u2019t have the same resources.\\n\\nAt the early stages we almost provoked a response from our first users. Like \\u201cHi, what are you doing\\u201d. Just to get them to speak with us. It\\u2019s always been really important for us to get feedback.\\n\\n[Henric] It\\u2019s uncommon for us to develop something that hasn\\u2019t already been requested or something that we haven\\u2019t already prototyped.\\n\\n[Tom] If we get a suggestion from a user that doesn\\u2019t fit with our vision for Weld we try to be as quick and transparent about it as possible thought. We use customer feedback to prioritize what features are the most important to work with next. So if we get a lot of requests for an already planned feature such as, for example, \\u201cgrouping\\u201d or some other design feature, we\\u2019ll prioritize it above other planned features. So we\\u2019re still very concerned not to loose sight of our long term product vision.\\n\\n[Tom] Now that we\\u2019ve started to get some numbers and statistics that will probably influence our prioritization a lot more too.\\n\\n
\"Tom
Tom S\\u00f6derlund [left] and Henric Malmberg [right]
\\n\\n### You (Tom) are also a dad, how does that mix with the startup world?\\n[Tom] My life is all about Weld and the family right now, there\\u2019s just not room for much else. And I have to adjust my life for the family, every second day I leave early to pick up the kid from daycare. And I usually avoid evening events, etc. But I don\\u2019t think it\\u2019s a problem for us, well, that depends on what you think Henric.\\n\\n[Henric] Yes, now is the time to admit\\u2026\\n\\n[Tom] Yeah, let it out.\\n\\n[Henric] It\\u2019s actually a huge problem.\\n\\n[Tom] Haha\\n\\n[Henric] Nah, I don\\u2019t think so. Sure you do leave early some days, but we are working together here and we both pull our weight. Tom is here early and I leave a bit later instead.\\n\\n[Tom] It forces you to be focused on your tasks. You get less hours to work, so you have to utilize every hour to its fullest. I don\\u2019t want to discourage entrepreneur parents. You don\\u2019t have to wait and put all your plans to rest until your kids grow old enough. It is possible to combine the two.\\n\\nMy wife sees Weld kind of like a mistress who takes a bit too much space at home, so there\\u2019s a balance. But that\\u2019s not because of the kids, it\\u2019s more a thing between me and her. How much should you involve your partner?\\n\\n[Henric] My girlfriend is also troubled by this sometimes, when I put too much time into the project. I\\u2019m happy to have her, otherwise I\\u2019d probably work too hard.\\n\\n[Tom] My mood is very dependent on the success of Weld, so I try to filter what news I share at home. I can\\u2019t tell her about everything. I\\u2019m happy to share all the positive stuff but the bad things tend to put a damper on the entire family situation.\\n\\n[Henric] Are you good at it? Because I find it difficult.\\n\\n[Tom] Nah, I have a really bad poker face.\\n\\n[Henric] You can tell when I come home from a really bad day at work. I have a hard time to get into another mindset. It negatively affects my girlfriend too off course. That\\u2019s something I have to get better at. That\\u2019s probably the worst thing about managing your own business.\\n\\n[Tom] My argument is that I wouldn\\u2019t be happier as an employee either. You can have good and bad days as an employee too.\\n\\n[Henric] That\\u2019s true, but I don\\u2019t think it affects you the same way when you\\u2019re an employee. I\\u2019ve had bad days at my previous jobs too and while it\\u2019s hard to entirely leave all the feelings at work, it was easier to deal with it.\\n\\n[Tom] As an employee it\\u2019s easy to blame it all on a boss or something like that. Now it\\u2019s more: I\\u2019m bad, I should feel bad. That\\u2019s what it boils down to, I have no one else to blame. Haha. It\\u2019s definitively high peaks and deep valleys, when everything goes well and according to plan it\\u2019s all because of myself, and that feels amazing.\\n\\n### Is Sweden a good country for startups?\\n[Tom] I think Sweden does a great job. I don\\u2019t have too much to compare with, but I think the atmosphere here is great. There\\u2019s a lot of optimism and a lot of knowledge shared amongst the startups. A lot has happened the last few years, it\\u2019s a lot more transparent and you get to know what\\u2019s happening and what other people are working on.\\n\\n[Henric] I totally agree, we\\u2019ve also received a lot of help from the government too. Sure, we pay a lot of tax in Sweden, but we\\u2019ve received both loans and funding so that\\u2019s almost entirely what we\\u2019ve been living off.\\n\\n[Tom] Not much to complain about there.\\n\\n[Henric] And the startup incubators and co-working spaces here are great as well, Sup46 etc.\\n\\n
\"\"
With Weld you can preview your application in real time on your actual devices
\\n\\n### Can you tell us about the future of Weld?\\n[Tom] Sure. Our ambition is to evolve the interactive bit, that part will help Weld stand out from other services such as Squarespace, that\\u2019s our main goal for 2016. Then we won\\u2019t have as many direct competitors either, there just won\\u2019t be as many players in that segment. Not just that, we are determined to grow and improve all parts of Weld.\\n\\nWe have a three step plan for the future of Weld. The first step is to allow programmers to build their own components for Weld. We call it Custom Objects in HTML and Javascript. If someone is looking for a Google Maps integration or a special slideshow that Weld isn\\u2019t supporting right now it should be possible to build it yourself. This feature is already available in the beta and will roll out soon to the regular version.\\n\\nThe next step is to create a visual scripting tool where you can use drag and drop to build your own logic. For example; if you press a button, information can be downloaded from another site and then be displayed in the box next to the button. This feature will help users who doesn\\u2019t know how to code. At the moment it\\u2019s being tested in our lab and we hope to release it as beta within the next couple of months. The idea is that you\\u2019ll be able to combine these features. You\\u2019ll be able to code your own components and than determine how it should function via the visual scripting language. Have you heard of Scratch? It\\u2019s a programming language for kids. That\\u2019s our inspiration for the visual scripting tool.\\n\\nThe third step is to integrate other services to let you log in and retrieve data. For example, you could use this to show your own Instagram pictures on your website or app. I\\u2019m not sure we\\u2019ll be able implement it this year thought.\\n\\nTry Weld at weld.io\",
\n\"id\": \"_px0pc573p\",
\n\"type\": \"kirbytext\"
\n}
\n]

","content_text":"\\[ \n{ \n\"attrs\": \\[\\], \n\"content\": \"### Introduce us to Weld, how did you start working on it?\\\\n*\\[Tom\\]* Weld started as an idea way back in 2007, 2008. At the time I was still creating video games but I was starting to move towards web and app design. The video game industry had tools such as Unity and Flash that enables you to prototype and test quickly. There wasn't any similar tools available for designing apps, and this got me frustrated. That\\\\u2019s how the basic idea for Weld started to take shape; think about the impact we could make if people could easily do utility-applications with the help of similar tools. But it wouldn\\\\u2019t be until 2013 that we actually started to do something about it.\\\\n\\\\nRight from the start we used the lean startup methodology. We had a fika with about 10\\\\u201320 persons. The first round of interviews was strictly focused on understanding what digital creatives worked with and what their problems were. It was important not to have any preconceptions about how the end product would work or look. It wasn\\\\u2019t until the next phase that we showed pictures or smaller prototypes of the actual product. Soon we would have a demo version that we could let people try for themselves. This is about the time I met Henric.\\\\n\\\\n*\\[Henric\\]* Tom showed me an early prototype and I was struck by how great the idea was and how relatively good the prototype was for it\\\\u2019s early stage. I was a developer for MagineTV and had just started to look around for new opportunities when I met Tom. Weld seemed like a great product to work on. At that time Weld wasn\\\\u2019t a company, so we founded it together. There were a lot of other opportunities available but Weld seemed the most fun.\\\\n\\\\n*\\[Tom\\]* So we started the company in 2014. By the beginning of 2015 we had our first Weld product live. At the time, Weld was primarily a responsive wireframing tool.\\\\n\\\\nIt was when we launched Weld on Product Hunt in February 2015 that the product really started to gain traction. And we got a lot of new users. Weld 2.0 was released a couple of months later, in September. At that time it was more of a complete design tool that also had the ability to publish your designs as complete websites. We called it Weld Websites, and it\\\\u2019s the natural evolution of the first version. The third milestone is to enable the creation of interactive applications, we call it Weld Apps. This is the version we are hard at work with right now. We are also working on improving the general design tools as well. The end goal is to create a tool that let\\\\u2019s us create professional apps without code.\\\\n\\\\n
![](https://grafiskjournal.com/media/pages/archive/weld/66f722ea95-1591785663/weld-presentation.png)
Weld is built to run entirely in your web browser
\\\\n\\\\n### Weld is a web app designed to run in the browser. What are the benefits of this approach?\\\\nIt felt more future proof to build it to run directly in the browser. At the time, there were already a lot of rudimentary tools for converting websites to native apps. It is harder to build native apps and go the other way around. So we saw it as the best compromise to be able to offer the service both as a native app as well as a web based platform in the long run.\\\\n\\\\n### What are the challenges?\\\\n*\\[Henric\\]* Just as any other platform, the web has its fair share of problems. Often you think you\\\\u2019ve designed something that\\\\u2019s entirely waterproof but when you test it you find, for example, that there are some small bugs in Safari or Internet Explorer that ruins it. So we\\\\u2019ve spent quite a lot of time with that. And if you\\\\u2019re concerned about performance, there\\\\u2019s a lot to be careful about when building web apps. But the upside is that you only develop one product and that product works regardless of device. You can even fire up Weld on your iPad and it will work even thought we haven\\\\u2019t actually optimized for it.\\\\n\\\\n*\\[Tom\\]* With a couple of tweaks we could run Weld on most mobile devices too, but at the moment the application toolbar won\\\\u2019t fit.\\\\n\\\\n### What about the competition?\\\\n*\\[Tom\\]* There\\\\u2019re a lot of competitors, both within the prototyping sector but also within the web design sector. At the moment we consider Weld to be more of a web design tool, but about half of our paying customers still use Weld primarily as a prototyping tool. As you\\\\u2019ve written on Grafisk Journal; it really is an explosion of design tools right now. But within the web design sector Weld is much more of a free-form design tool. Weld is not just for the persons who are interested in creating a simple website, but for people who cares about the details and wants to go in and adjust stuff themselves. Weld is for entrepreneurs or designers with a clear vision of what to build but who aren\\\\u2019t interested in learning how to code.\\\\n\\\\n### You\\\\u2019ve written about Keynote a lot, what do you like about it?\\\\n*\\[Tom\\]* Keynote is easy to use and its pretty flexible, you can use it for creating presentations, animations, wireframes and even prototypes. I like that. And that philosophy translates to Weld. Weld is supposed to be a general purpose application where you either can do prototypes or finished websites or apps. And if you\\\\u2019ve learned to do one thing in Weld, it should be easy to do the other. All startup methodologies contradicts this. You\\\\u2019re told to simplify and be focused on solving just one problem. But when I did the early interviews I found that many people still preferred regular pen and paper but also tools such as Keynote that didn\\\\u2019t restrict them. I think there\\\\u2019s a lot of benefits in being a bit more free.\\\\n\\\\n### How do you work with user feedback?\\\\n*\\[Tom\\]* User feedback is really important. Both because we are still in a phase where we are still learning about the product but also because that\\\\u2019s one of the few things we actually can compete with as a small startup. Our competitors are often much larger, have a lot more money or have been building their product for several years already. But we can be much quicker and more personal and helpful towards our customers even thought we don\\\\u2019t have the same resources.\\\\n\\\\nAt the early stages we almost provoked a response from our first users. Like \\\\u201cHi, what are you doing\\\\u201d. Just to get them to speak with us. It\\\\u2019s always been really important for us to get feedback.\\\\n\\\\n*\\[Henric\\]* It\\\\u2019s uncommon for us to develop something that hasn\\\\u2019t already been requested or something that we haven\\\\u2019t already prototyped.\\\\n\\\\n*\\[Tom\\]* If we get a suggestion from a user that doesn\\\\u2019t fit with our vision for Weld we try to be as quick and transparent about it as possible thought. We use customer feedback to prioritize what features are the most important to work with next. So if we get a lot of requests for an already planned feature such as, for example, \\\\u201cgrouping\\\\u201d or some other design feature, we\\\\u2019ll prioritize it above other planned features. So we\\\\u2019re still very concerned not to loose sight of our long term product vision.\\\\n\\\\n*\\[Tom\\]* Now that we\\\\u2019ve started to get some numbers and statistics that will probably influence our prioritization a lot more too.\\\\n\\\\n
![Tom and Henric in the studio](https://grafiskjournal.com/media/pages/archive/weld/364dc58e48-1591785663/tom-and-henric.jpg)
Tom S\\\\u00f6derlund \\[left\\] and Henric Malmberg \\[right\\]
\\\\n\\\\n### You (Tom) are also a dad, how does that mix with the startup world?\\\\n*\\[Tom\\]* My life is all about Weld and the family right now, there\\\\u2019s just not room for much else. And I have to adjust my life for the family, every second day I leave early to pick up the kid from daycare. And I usually avoid evening events, etc. But I don\\\\u2019t think it\\\\u2019s a problem for us, well, that depends on what you think Henric.\\\\n\\\\n*\\[Henric\\]* Yes, now is the time to admit\\\\u2026\\\\n\\\\n*\\[Tom\\]* Yeah, let it out.\\\\n\\\\n*\\[Henric\\]* It\\\\u2019s actually a huge problem.\\\\n\\\\n*\\[Tom\\]* Haha\\\\n\\\\n*\\[Henric\\]* Nah, I don\\\\u2019t think so. Sure you do leave early some days, but we are working together here and we both pull our weight. Tom is here early and I leave a bit later instead.\\\\n\\\\n*\\[Tom\\]* It forces you to be focused on your tasks. You get less hours to work, so you have to utilize every hour to its fullest. I don\\\\u2019t want to discourage entrepreneur parents. You don\\\\u2019t have to wait and put all your plans to rest until your kids grow old enough. It is possible to combine the two.\\\\n\\\\nMy wife sees Weld kind of like a mistress who takes a bit too much space at home, so there\\\\u2019s a balance. But that\\\\u2019s not because of the kids, it\\\\u2019s more a thing between me and her. How much should you involve your partner?\\\\n\\\\n*\\[Henric\\]* My girlfriend is also troubled by this sometimes, when I put too much time into the project. I\\\\u2019m happy to have her, otherwise I\\\\u2019d probably work too hard.\\\\n\\\\n*\\[Tom\\]* My mood is very dependent on the success of Weld, so I try to filter what news I share at home. I can\\\\u2019t tell her about everything. I\\\\u2019m happy to share all the positive stuff but the bad things tend to put a damper on the entire family situation.\\\\n\\\\n*\\[Henric\\]* Are you good at it? Because I find it difficult.\\\\n\\\\n*\\[Tom\\]* Nah, I have a really bad poker face.\\\\n\\\\n*\\[Henric\\]* You can tell when I come home from a really bad day at work. I have a hard time to get into another mindset. It negatively affects my girlfriend too off course. That\\\\u2019s something I have to get better at. That\\\\u2019s probably the worst thing about managing your own business.\\\\n\\\\n*\\[Tom\\]* My argument is that I wouldn\\\\u2019t be happier as an employee either. You can have good and bad days as an employee too.\\\\n\\\\n*\\[Henric\\]* That\\\\u2019s true, but I don\\\\u2019t think it affects you the same way when you\\\\u2019re an employee. I\\\\u2019ve had bad days at my previous jobs too and while it\\\\u2019s hard to entirely leave all the feelings at work, it was easier to deal with it.\\\\n\\\\n*\\[Tom\\]* As an employee it\\\\u2019s easy to blame it all on a boss or something like that. Now it\\\\u2019s more: I\\\\u2019m bad, I should feel bad. That\\\\u2019s what it boils down to, I have no one else to blame. Haha. It\\\\u2019s definitively high peaks and deep valleys, when everything goes well and according to plan it\\\\u2019s all because of myself, and that feels amazing.\\\\n\\\\n### Is Sweden a good country for startups?\\\\n*\\[Tom\\]* I think Sweden does a great job. I don\\\\u2019t have too much to compare with, but I think the atmosphere here is great. There\\\\u2019s a lot of optimism and a lot of knowledge shared amongst the startups. A lot has happened the last few years, it\\\\u2019s a lot more transparent and you get to know what\\\\u2019s happening and what other people are working on.\\\\n\\\\n*\\[Henric\\]* I totally agree, we\\\\u2019ve also received a lot of help from the government too. Sure, we pay a lot of tax in Sweden, but we\\\\u2019ve received both loans and funding so that\\\\u2019s almost entirely what we\\\\u2019ve been living off.\\\\n\\\\n*\\[Tom\\]* Not much to complain about there.\\\\n\\\\n*\\[Henric\\]* And the startup incubators and co-working spaces here are great as well, Sup46 etc.\\\\n\\\\n
![](https://grafiskjournal.com/media/pages/archive/weld/82cfbed792-1591785663/hero-image.jpg)
With Weld you can preview your application in real time on your actual devices
\\\\n\\\\n### Can you tell us about the future of Weld?\\\\n*\\[Tom\\]* Sure. Our ambition is to evolve the interactive bit, that part will help Weld stand out from other services such as Squarespace, that\\\\u2019s our main goal for 2016. Then we won\\\\u2019t have as many direct competitors either, there just won\\\\u2019t be as many players in that segment. Not just that, we are determined to grow and improve all parts of Weld.\\\\n\\\\nWe have a three step plan for the future of Weld. The first step is to allow programmers to build their own components for Weld. We call it Custom Objects in HTML and Javascript. If someone is looking for a Google Maps integration or a special slideshow that Weld isn\\\\u2019t supporting right now it should be possible to build it yourself. This feature is already available in the beta and will roll out soon to the regular version.\\\\n\\\\nThe next step is to create a visual scripting tool where you can use drag and drop to build your own logic. For example; if you press a button, information can be downloaded from another site and then be displayed in the box next to the button. This feature will help users who doesn\\\\u2019t know how to code. At the moment it\\\\u2019s being tested in our lab and we hope to release it as beta within the next couple of months. The idea is that you\\\\u2019ll be able to combine these features. You\\\\u2019ll be able to code your own components and than determine how it should function via the visual scripting language. Have you heard of Scratch? It\\\\u2019s a programming language for kids. That\\\\u2019s our inspiration for the visual scripting tool.\\\\n\\\\nThe third step is to integrate other services to let you log in and retrieve data. For example, you could use this to show your own Instagram pictures on your website or app. I\\\\u2019m not sure we\\\\u2019ll be able implement it this year thought.\\\\n\\\\nTry Weld at [weld.io](https://www.weld.io/)\", \n\"id\": \"\\_px0pc573p\", \n\"type\": \"kirbytext\" \n} \n\\]","date_published":"2024-02-14T11:21:45+00:00","date_modified":"2024-02-14T11:21:45+00:00","author":{"name":"Staff Writer","uri":"https://grafiskjournal.com"}}, {"id":"https://grafiskjournal.com/archive/the-complexities-of-global-web-fonts","url":"https://grafiskjournal.com/archive/the-complexities-of-global-web-fonts","title":"The complexities of global web\u00a0fonts","content_html":"

[
\n{
\n\"attrs\": [],
\n\"content\": \"Before the @font-face attribute got adopted by all of the major browsers there were no good way to make sure our visitors\u2019s computers would be able to render our web designs with the typeface we had intended. In worst case, the typeface displayed on the users\u2019s computers looked nothing like the typeface we\u2019ve designed for. To make sure all our users would get the right experience; we were forced to chose between typefaces that came preinstalled on most operating systems. Different operating systems came with different preinstalled fonts, so whatever we chose, we also had to have a backup typeface. Since good design and structure is dependent on typographic widths; we just couldn\u2019t make sure all our visitors would experience our website as we really intended it.\",
\n\"id\": \"_Aj1XWFQ8p\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"With the resurrection of the @font-face attribute about seven years ago, the ability to transfer our desired font file directly to the user revolutionized the web. This way, we could be sure every single user would experience our website the way we intended to. Finally we could approach web design as any other form of design and the actual content, the text, could be placed front and center without problem. Transferring fonts to the user isn\u2019t a hard task either, since most complete sets of typefaces aren\u2019t larger than your typical image and would only have to be sent to the user once.\",
\n\"id\": \"_xZhKiyJfM\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"The catch\",
\n\"id\": \"_irwl5i2h7\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Everything isn\u2019t that easy thought. As of now (2015), it is still technically complicated to provide web fonts for CJK-languages (primarily Japanese and Chinese) because of their sheer size in bytes. These languages are the primary language for a big part of the users online; Chinese is the native language for more than 20% of the people browsing the web. To send font files with support for just these languages alone via the regular @font-face attribute would require massive downloads of at least 16mb; this would increase load times enough to become unsuitable for any website.\",
\n\"id\": \"_fj6m8a1w2\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+the-complexities-of-global-web-fonts/files/global-typefacedownload.png\",
\n\"src\": \"https://grafiskjournal.com/media/pages/archive/the-complexities-of-global-web-fonts/61ee5087b5-1591868880/global-typefacedownload.png\",
\n\"id\": \"archive/the-complexities-of-global-web-fonts/global-typefacedownload.png\",
\n\"ratio\": 2.536327608982827,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_fivu16uhb\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Thankfully, there have cropped up workarounds to this problem provided by font suppliers such as <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://cn.justfont.com/fonts\\\">Justfont and <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://youziku.com/\\\">Youzuiku. These sites hosts and sends the font files in bite-sized chunks that doesn't choke the user's bandwidth. It works with the magic of a JavaScript snippet that checks for any character that doesn't already sit in the users cache and then requests the missing characters needed to fully render the rest of the page. Like this, the amount of data needed to be downloaded per page more closely resembles a typical image file, which is much more reasonable from the user\u2019s perspective.\",
\n\"id\": \"_K1JMLpiR4\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"The big western font hosting companies have been slow to address this issue, and to make matters worse providers such as Google fonts just isn't available in China because of <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://webdesign.tutsplus.com/articles/notes-from-behind-the-firewall-the-state-of-web-design-in-china--cms-22281\\\">the great firewall. But <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://blog.fonts.com/2010/12/web-font-language-support-a-global-solution/\\\">fonts.com has been leading the pack and has had great support for subsetting fonts all the way back in 2010 and <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://fontsubsetter.com/en-US\\\">Monotype has just rolled out a dynamic subset service.\",
\n\"id\": \"_cS1iIUHyR\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Thankfully, earlier this summer more western providers started to show their support: Adobe's Typekit released a mayor <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://blog.typekit.com/2015/06/15/announcing-east-asian-web-font-support/\\\">update so that their service now also provide support for subsetting fonts while at the same time adding better support for Asian languages!\",
\n\"id\": \"_7V3HC9tVK\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"As we can see, it is indeed possible to provide web fonts globally today but it still requires massive amounts of research and work. The @font-face property alone just won\u2019t cut it. As it stands today, most of us are forced to rely on paid font suppliers to provide us with their solution; this greatly contradicts the notion of \u201cthe open web\u201d as functions like this really should be handled directly in our browser if we care about net equality.\",
\n\"id\": \"_0ONvo7jQX\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Finally, even with this great technology at our hands it's still recommended to split the font file so that we don't work with a font file that encompasses several languages at once. A single file would be too large to process when most of the characters included aren\u2019t needed for every page or language. Global language support just doesn\u2019t come easy apparently!\",
\n\"id\": \"_eS7jiYcVI\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Truly Global\",
\n\"id\": \"_n1xwhfmbm\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"If we work with a global company and want take it all one step further we might consider opting for a typeface that has been designed for global usage; this would ensure brand consistency no matter the language. Sadly, there aren't that many typefaces of that kind, <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://www.urwpp.de/english/technology/globalfonts/ \\\">Nimbus Sans Global created by URW++ was originally based on Helvetica but has expanded to include support for a wide set of characters. Nimbus Sans and the two other <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://www.urwpp.de/english/home.html\\\">global fonts developed by URW++ are all solid options but they are almost the only options available, and they are quite pricey.\",
\n\"id\": \"_re1fljfe0\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+the-complexities-of-global-web-fonts/files/tumblr_inline_nfbc2uvydn1t2qdzm.jpg\",
\n\"src\": \"https://grafiskjournal.com/media/pages/archive/the-complexities-of-global-web-fonts/31b675e3b9-1591868880/tumblr_inline_nfbc2uvydn1t2qdzm.jpg\",
\n\"id\": \"archive/the-complexities-of-global-web-fonts/tumblr_inline_nfbc2uvydn1t2qdzm.jpg\",
\n\"ratio\": 1.5015015015015014,
\n\"caption\": \"Type designer, Ryoko Nishizuka, drawing some of the characters for Source Han Sans. Image from the typekit blog\"
\n},
\n\"content\": \"
That's why it's refreshing to see that Google and Adobe has joint efforts to release the first open source typeface that aims to support all the world\u2019s languages. The typeface is called Noto Sans popup: yes or Source Han Sans popup: yes and it's design goal is to achieve visual harmonization across languages. What's refreshing is also that the typefaces are available in several widths which typically isn't the case for typefaces that already features such an extraordinary character support!\",
\n\"id\": \"_wovfckh90\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"That's why it's refreshing to see that Google and Adobe has joint efforts to release the first open source typeface that aims to support all the world\u2019s languages. The typeface is called <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://www.google.com/get/noto/\\\">Noto Sans or <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://blog.typekit.com/2014/07/15/introducing-source-han-sans/\\\">Source Han Sans and its design goal is to achieve visual harmonization across languages. What's refreshing is also that the typefaces are available in several widths which typically isn't the case for typefaces that already features such an extraordinary character support!\",
\n\"id\": \"_p72jei2s6\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"src\": \"https://www.youtube.com/embed/gPdZxsL3Flw\",
\n\"caption\": \"\"
\n},
\n\"content\": \"
And Adobe and Google are not alone, several companies have realized the issue of not being able to provide the same visual appearance regardless of language. Most of them choose to tackle the issue by designing custom typefaces for themselves. Companies such as BMW have chosen to design their own variation of Nimbus Sans Global, and companies such as Sony popup: yes and Intel popup: yes have chosen to draw their own custom-tailored global typefaces from scratch.\",
\n\"id\": \"_20fr602s7\",
\n\"type\": \"video\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"And Adobe and Google are not alone, several companies have realized the issue of not being able to provide the same visual appearance regardless of language. Most of them choose to tackle the issue by designing custom typefaces for themselves. Companies such as BMW have chosen to design their own variation of Nimbus Sans Global, and companies such as <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://www.sony.net/SonyInfo/design/works/projects/sst-font/index.html\\\">Sony and <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://www.youtube.com/watch?v=gPdZxsL3Flw\\\">Intel have chosen to draw their own custom-tailored global typefaces from scratch.\",
\n\"id\": \"_v0l2ybdrj\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"But more notably: Intel has even made an open source version of their typeface called <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://01.org/clear-SANS\\\">Clear Sans that is free to use and download.\",
\n\"id\": \"_g0oj640yd\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"An open web\",
\n\"id\": \"_y3m8w5ry6\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Global typography is really hard, but companies have recently started to address the issues. Hopefully we will see greater support in the near future so that information really is equally accessible no matter where you live.\",
\n\"id\": \"_dpay0uvch\",
\n\"type\": \"paragraph\"
\n}
\n]

","content_text":"\\[ \n{ \n\"attrs\": \\[\\], \n\"content\": \"Before the @font-face attribute got adopted by all of the major browsers there were no good way to make sure our visitors\u2019s computers would be able to render our web designs with the typeface we had intended. In worst case, the typeface displayed on the users\u2019s computers looked nothing like the typeface we\u2019ve designed for. To make sure all our users would get the right experience; we were forced to chose between typefaces that came preinstalled on most operating systems. Different operating systems came with different preinstalled fonts, so whatever we chose, we also had to have a backup typeface. Since good design and structure is dependent on typographic widths; we just couldn\u2019t make sure all our visitors would experience our website as we really intended it.\", \n\"id\": \"\\_Aj1XWFQ8p\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"With the resurrection of the @font-face attribute about seven years ago, the ability to transfer our desired font file directly to the user revolutionized the web. This way, we could be sure every single user would experience our website the way we intended to. Finally we could approach web design as any other form of design and the actual content, the text, could be placed front and center without problem. Transferring fonts to the user isn\u2019t a hard task either, since most complete sets of typefaces aren\u2019t larger than your typical image and would only have to be sent to the user once.\", \n\"id\": \"\\_xZhKiyJfM\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"The catch\", \n\"id\": \"\\_irwl5i2h7\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Everything isn\u2019t that easy thought. As of now (2015), it is still technically complicated to provide web fonts for CJK-languages (primarily Japanese and Chinese) because of their sheer size in bytes. These languages are the primary language for a big part of the users online; Chinese is the native language for more than 20% of the people browsing the web. To send font files with support for just these languages alone via the regular @font-face attribute would require massive downloads of at least 16mb; this would increase load times enough to become unsuitable for any website.\", \n\"id\": \"\\_fj6m8a1w2\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+the-complexities-of-global-web-fonts/files/global-typefacedownload.png\", \n\"src\": \"\", \n\"id\": \"archive/the-complexities-of-global-web-fonts/global-typefacedownload.png\", \n\"ratio\": 2.536327608982827, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_fivu16uhb\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Thankfully, there have cropped up workarounds to this problem provided by font suppliers such as <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://cn.justfont.com/fonts\\\\\">Justfont](http://cn.justfont.com/fonts\\\">Justfont) and <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://youziku.com/\\\\\">Youzuiku](http://youziku.com/\\\">Youzuiku). These sites hosts and sends the font files in bite-sized chunks that doesn't choke the user's bandwidth. It works with the magic of a JavaScript snippet that checks for any character that doesn't already sit in the users cache and then requests the missing characters needed to fully render the rest of the page. Like this, the amount of data needed to be downloaded per page more closely resembles a typical image file, which is much more reasonable from the user\u2019s perspective.\", \n\"id\": \"\\_K1JMLpiR4\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"The big western font hosting companies have been slow to address this issue, and to make matters worse providers such as Google fonts just isn't available in China because of <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://webdesign.tutsplus.com/articles/notes-from-behind-the-firewall-the-state-of-web-design-in-china--cms-22281\\\\\">the](http://webdesign.tutsplus.com/articles/notes-from-behind-the-firewall-the-state-of-web-design-in-china--cms-22281\\\">the) great firewall. But <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://blog.fonts.com/2010/12/web-font-language-support-a-global-solution/\\\\\">fonts.com](http://blog.fonts.com/2010/12/web-font-language-support-a-global-solution/\\\">fonts.com) has been leading the pack and has had great support for subsetting fonts all the way back in 2010 and <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://fontsubsetter.com/en-US\\\\\">Monotype](http://fontsubsetter.com/en-US\\\">Monotype) has just rolled out a dynamic subset service.\", \n\"id\": \"\\_cS1iIUHyR\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Thankfully, earlier this summer more western providers started to show their support: Adobe's Typekit released a mayor <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://blog.typekit.com/2015/06/15/announcing-east-asian-web-font-support/\\\\\">update](http://blog.typekit.com/2015/06/15/announcing-east-asian-web-font-support/\\\">update) so that their service now also provide support for subsetting fonts while at the same time adding better support for Asian languages!\", \n\"id\": \"\\_7V3HC9tVK\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"As we can see, it is indeed possible to provide web fonts globally today but it still requires massive amounts of research and work. The @font-face property alone just won\u2019t cut it. As it stands today, most of us are forced to rely on paid font suppliers to provide us with their solution; this greatly contradicts the notion of \u201cthe open web\u201d as functions like this really should be handled directly in our browser if we care about net equality.\", \n\"id\": \"\\_0ONvo7jQX\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Finally, even with this great technology at our hands it's still recommended to split the font file so that we don't work with a font file that encompasses several languages at once. A single file would be too large to process when most of the characters included aren\u2019t needed for every page or language. Global language support just doesn\u2019t come easy apparently!\", \n\"id\": \"\\_eS7jiYcVI\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Truly Global\", \n\"id\": \"\\_n1xwhfmbm\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"If we work with a global company and want take it all one step further we might consider opting for a typeface that has been designed for global usage; this would ensure brand consistency no matter the language. Sadly, there aren't that many typefaces of that kind, <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\" \\\\\">Nimbus Sans Global created by URW++ was originally based on Helvetica but has expanded to include support for a wide set of characters. Nimbus Sans and the two other <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://www.urwpp.de/english/home.html\\\\\">global](http://www.urwpp.de/english/home.html\\\">global) fonts developed by URW++ are all solid options but they are almost the only options available, and they are quite pricey.\", \n\"id\": \"\\_re1fljfe0\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+the-complexities-of-global-web-fonts/files/tumblr\\_inline\\_nfbc2uvydn1t2qdzm.jpg\", \n\"src\": \"[https://grafiskjournal.com/media/pages/archive/the-complexities-of-global-web-fonts/31b675e3b9-1591868880/tumblr\\_inline\\_nfbc2uvydn1t2qdzm.jpg](https://grafiskjournal.com/media/pages/archive/the-complexities-of-global-web-fonts/31b675e3b9-1591868880/tumblr_inline_nfbc2uvydn1t2qdzm.jpg)\", \n\"id\": \"archive/the-complexities-of-global-web-fonts/tumblr\\_inline\\_nfbc2uvydn1t2qdzm.jpg\", \n\"ratio\": 1.5015015015015014, \n\"caption\": \"Type designer, Ryoko Nishizuka, drawing some of the characters for Source Han Sans. Image from the typekit blog\" \n}, \n\"content\": \" \nThat's why it's refreshing to see that Google and Adobe has joint efforts to release the first open source typeface that aims to support all the world\u2019s languages. The typeface is called [Noto Sans popup: yes](https://www.google.com/get/noto/) or [Source Han Sans popup: yes](http://blog.typekit.com/2014/07/15/introducing-source-han-sans/) and it's design goal is to achieve visual harmonization across languages. What's refreshing is also that the typefaces are available in several widths which typically isn't the case for typefaces that already features such an extraordinary character support!\", \n\"id\": \"\\_wovfckh90\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"That's why it's refreshing to see that Google and Adobe has joint efforts to release the first open source typeface that aims to support all the world\u2019s languages. The typeface is called <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://www.google.com/get/noto/\\\\\">Noto](https://www.google.com/get/noto/\\\">Noto) Sans or <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://blog.typekit.com/2014/07/15/introducing-source-han-sans/\\\\\">Source](http://blog.typekit.com/2014/07/15/introducing-source-han-sans/\\\">Source) Han Sans and its design goal is to achieve visual harmonization across languages. What's refreshing is also that the typefaces are available in several widths which typically isn't the case for typefaces that already features such an extraordinary character support!\", \n\"id\": \"\\_p72jei2s6\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"src\": \"\", \n\"caption\": \"\" \n}, \n\"content\": \" \nAnd Adobe and Google are not alone, several companies have realized the issue of not being able to provide the same visual appearance regardless of language. Most of them choose to tackle the issue by designing custom typefaces for themselves. Companies such as BMW have chosen to design their own variation of Nimbus Sans Global, and companies such as [Sony popup: yes](http://www.sony.net/SonyInfo/design/works/projects/sst-font/index.html) and [Intel popup: yes](https://www.youtube.com/watch?v=gPdZxsL3Flw) have chosen to draw their own custom-tailored global typefaces from scratch.\", \n\"id\": \"\\_20fr602s7\", \n\"type\": \"video\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"And Adobe and Google are not alone, several companies have realized the issue of not being able to provide the same visual appearance regardless of language. Most of them choose to tackle the issue by designing custom typefaces for themselves. Companies such as BMW have chosen to design their own variation of Nimbus Sans Global, and companies such as <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://www.sony.net/SonyInfo/design/works/projects/sst-font/index.html\\\\\">Sony](http://www.sony.net/SonyInfo/design/works/projects/sst-font/index.html\\\">Sony) and <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://www.youtube.com/watch?v=gPdZxsL3Flw\\\\\">Intel](https://www.youtube.com/watch?v=gPdZxsL3Flw\\\">Intel) have chosen to draw their own custom-tailored global typefaces from scratch.\", \n\"id\": \"\\_v0l2ybdrj\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"But more notably: Intel has even made an open source version of their typeface called <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://01.org/clear-SANS\\\\\">Clear](https://01.org/clear-SANS\\\">Clear) Sans that is free to use and download.\", \n\"id\": \"\\_g0oj640yd\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"An open web\", \n\"id\": \"\\_y3m8w5ry6\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Global typography is really hard, but companies have recently started to address the issues. Hopefully we will see greater support in the near future so that information really is equally accessible no matter where you live.\", \n\"id\": \"\\_dpay0uvch\", \n\"type\": \"paragraph\" \n} \n\\]","date_published":"2024-02-14T11:21:45+00:00","date_modified":"2024-02-14T11:21:45+00:00","author":{"name":"Staff Writer","uri":"https://grafiskjournal.com"}}, {"id":"https://grafiskjournal.com/archive/mario-nailed-web-design-kinda","url":"https://grafiskjournal.com/archive/mario-nailed-web-design-kinda","title":"Mario Nailed Web Design (Kinda)","content_html":"

[
\n{
\n\"attrs\": [],
\n\"content\": \"Stick to the point\",
\n\"id\": \"_2cr87quoo\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"The level design of Super Mario Bros has been analyzed to death as it\\u2019s still among the best. Partly due to technical constraints every asset had to be thoughtfully placed resulting in a minimalistic approach to the entire design. Unlike other games at the time, Super Mario Bros kept the screen deliberately uncluttered. If you\\u2019d take a screenshot every second of the game, every screenshot would contain just a few clear concepts, never more. This kept the players focused at the task at hand and prevents them from getting distracted with non-vital information. This is definitively an area we could learn more from when it comes to modern web design.\",
\n\"id\": \"_2uq4fyb5a\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"To be able to achieve this level of focus, Super Mario Bros relied heavily on scrolling. Super Mario Bros wasn\\u2019t the first side-scrolling platformer but it helped popularize the genre. The game\\u2019s popularity should be proof enough that the concept of scrolling was easy enough to understand already back then, but as a designer I still have to explain that \\\"the fold\\\" is a myth. Today, there\\u2019s substantial proof that scrolling is second nature to the general user. Check out Luke Wroblewski\\u2019s excellent <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://www.lukew.com/ff/entry.asp?1946\\\">article about the subject.\",
\n\"id\": \"_S9MkqUl2z\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"You don\\u2019t need onboarding screens\",
\n\"id\": \"_wt50wxqsk\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"The Mario games are an excellent example that it's possible to explain design mechanics without long tutorials. In the Mario games the onboarding is happening as the player progresses. Starting off with easy interactions and then gradually ramp up the complexity. Below is a video that breaks down of how Mario explains different concepts without text based tutorials:\",
\n\"id\": \"_ddc5b805x\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"src\": \"https://www.youtube.com/watch?v=dBmIkEvEBtA\",
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_q0v8tbpq2\",
\n\"type\": \"video\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Smooth animations is worth it\",
\n\"id\": \"_efwoy97j2\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"\\u201cArcade Quality\\u201d games run at a solid 50\\u201360hz. Mario also opted for a solid 60 fps for it\\u2019s scrolling as it keeps the players orientated. This is something that we continue to struggle with in modern web design as we often prioritize cool effects over performance. Sure, you could argue that we are pushing much more complex graphics for bigger screens. But if Nintendo could achieve butter smooth scrolling on a measly NES; we can do it too.\",
\n\"id\": \"_koec9z64o\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Learn more about web design and frame rate over at: <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://jankfree.org/\\\">Jankfree or check the video below for a quick explanation of the benefits with 60 fps:\",
\n\"id\": \"_5r57gpoy5\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"src\": \"https://vimeo.com/108331968\",
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_2kben64rz\",
\n\"type\": \"video\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Design at 100% zoom\",
\n\"id\": \"_iik3rg8m5\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Mario Maker presents its user created levels by providing a zoomed out overview. Appealing overviews doesn\\u2019t necessarily reflect the quality of the level. At their actual sizes, the levels are perceived entirely different. As a web designer I often tend to design my sites slightly zoomed out to get a better overview. I'll definitively try to break that habit going forward. Viewing a webpage in its original size gives a different perspective of the entire design.\",
\n\"id\": \"_0vu8mdn2q\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Conclusion\",
\n\"id\": \"_1gyqlodpp\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"While Mario or game design isn't the same as web design it's funny to think that we've struggled with these issues while Mario has been among us the whole time. Can we find inspiration from other successful principles from other games and apply it to the web?\",
\n\"id\": \"_a3yz6aqb4\",
\n\"type\": \"paragraph\"
\n}
\n]

","content_text":"\\[ \n{ \n\"attrs\": \\[\\], \n\"content\": \"Stick to the point\", \n\"id\": \"\\_2cr87quoo\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"The level design of Super Mario Bros has been analyzed to death as it\\\\u2019s still among the best. Partly due to technical constraints every asset had to be thoughtfully placed resulting in a minimalistic approach to the entire design. Unlike other games at the time, Super Mario Bros kept the screen deliberately uncluttered. If you\\\\u2019d take a screenshot every second of the game, every screenshot would contain just a few clear concepts, never more. This kept the players focused at the task at hand and prevents them from getting distracted with non-vital information. This is definitively an area we could learn more from when it comes to modern web design.\", \n\"id\": \"\\_2uq4fyb5a\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"To be able to achieve this level of focus, Super Mario Bros relied heavily on scrolling. Super Mario Bros wasn\\\\u2019t the first side-scrolling platformer but it helped popularize the genre. The game\\\\u2019s popularity should be proof enough that the concept of scrolling was easy enough to understand already back then, but as a designer I still have to explain that \\\\\"the fold\\\\\" is a myth. Today, there\\\\u2019s substantial proof that scrolling is second nature to the general user. Check out Luke Wroblewski\\\\u2019s excellent <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://www.lukew.com/ff/entry.asp?1946\\\\\">article](http://www.lukew.com/ff/entry.asp?1946\\\">article) about the subject.\", \n\"id\": \"\\_S9MkqUl2z\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"You don\\\\u2019t need onboarding screens\", \n\"id\": \"\\_wt50wxqsk\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"The Mario games are an excellent example that it's possible to explain design mechanics without long tutorials. In the Mario games the onboarding is happening as the player progresses. Starting off with easy interactions and then gradually ramp up the complexity. Below is a video that breaks down of how Mario explains different concepts without text based tutorials:\", \n\"id\": \"\\_ddc5b805x\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"src\": \"\", \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_q0v8tbpq2\", \n\"type\": \"video\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Smooth animations is worth it\", \n\"id\": \"\\_efwoy97j2\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"\\\\u201cArcade Quality\\\\u201d games run at a solid 50\\\\u201360hz. Mario also opted for a solid 60 fps for it\\\\u2019s scrolling as it keeps the players orientated. This is something that we continue to struggle with in modern web design as we often prioritize cool effects over performance. Sure, you could argue that we are pushing much more complex graphics for bigger screens. But if Nintendo could achieve butter smooth scrolling on a measly NES; we can do it too.\", \n\"id\": \"\\_koec9z64o\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Learn more about web design and frame rate over at: <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://jankfree.org/\\\\\">Jankfree](http://jankfree.org/\\\">Jankfree) or check the video below for a quick explanation of the benefits with 60 fps:\", \n\"id\": \"\\_5r57gpoy5\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"src\": \"\", \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_2kben64rz\", \n\"type\": \"video\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Design at 100% zoom\", \n\"id\": \"\\_iik3rg8m5\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Mario Maker presents its user created levels by providing a zoomed out overview. Appealing overviews doesn\\\\u2019t necessarily reflect the quality of the level. At their actual sizes, the levels are perceived entirely different. As a web designer I often tend to design my sites slightly zoomed out to get a better overview. I'll definitively try to break that habit going forward. Viewing a webpage in its original size gives a different perspective of the entire design.\", \n\"id\": \"\\_0vu8mdn2q\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Conclusion\", \n\"id\": \"\\_1gyqlodpp\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"While Mario or game design isn't the same as web design it's funny to think that we've struggled with these issues while Mario has been among us the whole time. Can we find inspiration from other successful principles from other games and apply it to the web?\", \n\"id\": \"\\_a3yz6aqb4\", \n\"type\": \"paragraph\" \n} \n\\]","date_published":"2024-02-14T11:21:45+00:00","date_modified":"2024-02-14T11:21:45+00:00","author":{"name":"Staff Writer","uri":"https://grafiskjournal.com"}}, {"id":"https://grafiskjournal.com/archive/illustrator-for-web-design-part-2","url":"https://grafiskjournal.com/archive/illustrator-for-web-design-part-2","title":"Illustrator for web design part\u00a02","content_html":"

[
\n{
\n\"attrs\": [],
\n\"content\": \"The problem with illustrator\",
\n\"id\": \"_k9x457ft4\",
\n\"type\": \"h2\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Illustrator could be a definitive choice for working with web design but it does come with a few weird quirks. Thankfully, most of the stuff is easily configured before jumping into production.\",
\n\"id\": \"_uo22ri89w\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Switch to RGB\",
\n\"id\": \"_i6lv3jsbv\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Right off the bat, switch your color space for monitor work, it appears global colors in Illustrator can generate unexpected results when working with RGB color profiles. For web design I\\u2019d suggest to switch off color management all together. Start off by switching to RGB if you haven\\u2019t already done so. Go to File/Document Color Mode/RGB color to switch color mode to RGB. Now go to Edit/Color Settings/ and switch working spaces to Monitor RGB - Display, close and go to Edit/Assign Profile... and select Don\\u2019t Color Manage This Document. Done!\",
\n\"id\": \"_wqkkks5p0\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/color-settings.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/illustrator-for-web-design-part-2/186109929-1591357279/color-settings.png\",
\n\"id\": \"archive/illustrator-for-web-design-part-2/color-settings.png\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_uu62h9wlz\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Align to pixel grid\",
\n\"id\": \"_u2qbm1ylq\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"While align to the pixel grid is a great idea to prevent blurred edges; it doesn\\u2019t work as you\\u2019d expect in Illustrator. If you draw a shape containing an odd numbered stroke Illustrator will \\u201chelp\\u201d you by placing your shape in-between two pixels, and you can\\u2019t fix it until you either remove the stroke, align it to the inside, or turn off the align to pixel grid option all together. Illustrators take on the pixel grid just isn\\u2019t meant for the web.\",
\n\"id\": \"_bhehkv2z5\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"To turn off align to pixel grid: Deselect any shape, go to Window/Transform/ click on the \\u201cmore options\\u201d button in the transform panel and uncheck the \\u201calign new objects to pixel grid\\u201d-button. For all shapes already drawn while the option was turned on you\\u2019ll need to manually uncheck the \\u201calign to pixel grid\\u201d checkbox in the transform panel for every object that was created with it.\",
\n\"id\": \"_qyylltw2y\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/align-to-pixel-grid-setting.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/illustrator-for-web-design-part-2/217293319-1591357279/align-to-pixel-grid-setting.png\",
\n\"id\": \"archive/illustrator-for-web-design-part-2/align-to-pixel-grid-setting.png\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_6oeqxf9h6\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Snapping to grid\",
\n\"id\": \"_cktjif0z9\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"With the \\u201calign to pixel grid\\u201d option turned off we now face a new problem. Illustrator is a vector program and it isn\\u2019t created with pixels in mind, therefore; all our objects can be drawn in-between pixels. This obviously isn\\u2019t ideal when creating web design. To solve this first go to Illustrator/Preferences/Units and choose pixels. Then go to Illustrator/Preferences/Guides & Grids/ and set Gridlines to 10px and subdivisions to 10 (that will equal one pixel). Now, go to Window/ and turn off snap to point, and turn on Snap to Grid. Your shapes will now snap to full pixels as you draw them!\",
\n\"id\": \"_6w7vq1294\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/grid-settings.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/illustrator-for-web-design-part-2/881967272-1591357279/grid-settings.png\",
\n\"id\": \"archive/illustrator-for-web-design-part-2/grid-settings.png\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_w6vwpqlcx\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Keyboard increments\",
\n\"id\": \"_bsozk87q8\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"We've almost configured our grid, just set the keyboard increments in Preferences/General to 1px and we should do alright, however, you\\u2019ll notice that manually moving objects with the keyboard arrows might result in a 2px jump instead of the desired 1px when used in combination with your custom pixel grid. Furthermore, holding shift should result in a 10px jump but sometimes gives you 11px. This is probably because Illustrator doesn\\u2019t natively work with pixels and always converts your number in order to process it. This leads your 1px keyboard increment into something more along the lines of 1,0001px, and that value can easily turn into a 2px since Illustrator rounds the new value up or down in order to ensure snapping always ends up on a new grid line. The solution is simply to set the Keyboard Increments setting a bit off like 0,99px for example; our pixel grid will then round it to full pixels. (arrived at this solution after a huge amount of testing, and so far it's been working every time)\",
\n\"id\": \"_16tc7ifpe\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/keyboard-increments.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/illustrator-for-web-design-part-2/2417282624-1591357279/keyboard-increments.png\",
\n\"id\": \"archive/illustrator-for-web-design-part-2/keyboard-increments.png\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_m1voaz6qw\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"New symbol alignment\",
\n\"id\": \"_l7k9fyuy6\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Adding a shape to the symbols library causes it to loose alignment to the pixel grid. To ensure that the shape stays on the pixel grid uncheck the \\u201cuse registration point for symbol\\u201d option under the Transform panel before creating the symbol. Also, in the symbol creation dialog, make sure to uncheck the box \\u201calign to pixel grid\\u201d.\",
\n\"id\": \"_ftvg0mac4\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/symbols.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/illustrator-for-web-design-part-2/3120005572-1591357279/symbols.png\",
\n\"id\": \"archive/illustrator-for-web-design-part-2/symbols.png\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_977xecu13\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Cumbersome gridding\",
\n\"id\": \"_66u1i7dvz\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"We've set up the pixel grid and it works perfectly, all we need now is to start designing! One of the first things I usually do is setting up a layout grid to work with. It is indeed much easier to create grids manually in Illustrator compared to Photoshop, but the grid plugins available for Photoshop is far more user friendly than Illustrators \\u201cmake grid\\u201d-option. Too bad there aren't any similar grid plugins for Illustrator. Or are there? I decided to make one myself, after all that setup I didn't want to throw in the towel for such a small bump!\",
\n\"id\": \"_i8z3wxkwt\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/gridscript.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/illustrator-for-web-design-part-2/83522466-1591357279/gridscript.png\",
\n\"id\": \"archive/illustrator-for-web-design-part-2/gridscript.png\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_ad1nqp0f1\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"<a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://github.com/erikfriberg/Illustrator-web-design-plugins\\\">Download the script\",
\n\"id\": \"_94VktanKY\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"All set up!\",
\n\"id\": \"_gog4ngep5\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"When you've finally configured Illustrator to behave the way to want it, it's smart to save all your custom settings as a template. If you then place it in the programs template folder you can quickly start a new web project without needing to set anything up again even if you switch and do a print project in between!\",
\n\"id\": \"_p40ugukdf\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"If you are interested in learning more about Illustrator for Web Design, definitively check out <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://mds.is/\\\">Matt Griffin\\u2019s upcoming <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://mds.is/releasing-an-aiux-sneak-peek/\\\">AIUX courses!\",
\n\"id\": \"_sU28xWitY\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Design is not about programs, but programs can absolutely make us much more productive; the right program can even make us more willing to experiment. At the moment, Illustrator is actually the most reliable tool for web design as its stable and entirely vector based. But there is some relearning to do, and it might just be more sensible to wait for programs like Sketch to fully mature. It's up to you!\",
\n\"id\": \"_xDar6moIc\",
\n\"type\": \"paragraph\"
\n}
\n]

","content_text":"\\[ \n{ \n\"attrs\": \\[\\], \n\"content\": \"The problem with illustrator\", \n\"id\": \"\\_k9x457ft4\", \n\"type\": \"h2\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Illustrator could be a definitive choice for working with web design but it does come with a few weird quirks. Thankfully, most of the stuff is easily configured before jumping into production.\", \n\"id\": \"\\_uo22ri89w\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Switch to RGB\", \n\"id\": \"\\_i6lv3jsbv\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Right off the bat, switch your color space for monitor work, it appears global colors in Illustrator can generate unexpected results when working with RGB color profiles. For web design I\\\\u2019d suggest to switch off color management all together. Start off by switching to RGB if you haven\\\\u2019t already done so. Go to *File/Document Color Mode/RGB color* to switch color mode to RGB. Now go to *Edit/Color Settings/* and switch working spaces to *Monitor RGB - Display*, close and go to *Edit/Assign Profile...* and select *Don\\\\u2019t Color Manage This Document*. Done!\", \n\"id\": \"\\_wqkkks5p0\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/color-settings.png\", \n\"src\": \"\", \n\"id\": \"archive/illustrator-for-web-design-part-2/color-settings.png\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_uu62h9wlz\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Align to pixel grid\", \n\"id\": \"\\_u2qbm1ylq\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"While align to the pixel grid is a great idea to prevent blurred edges; it doesn\\\\u2019t work as you\\\\u2019d expect in Illustrator. If you draw a shape containing an odd numbered stroke Illustrator will \\\\u201chelp\\\\u201d you by placing your shape in-between two pixels, and you can\\\\u2019t fix it until you either remove the stroke, align it to the inside, or turn off the align to pixel grid option all together. Illustrators take on the pixel grid just isn\\\\u2019t meant for the web.\", \n\"id\": \"\\_bhehkv2z5\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"To turn off align to pixel grid: Deselect any shape, go to *Window/Transform/* click on the \\\\u201cmore options\\\\u201d button in the transform panel and uncheck the \\\\u201calign new objects to pixel grid\\\\u201d-button. For all shapes already drawn while the option was turned on you\\\\u2019ll need to manually uncheck the \\\\u201calign to pixel grid\\\\u201d checkbox in the transform panel for every object that was created with it.\", \n\"id\": \"\\_qyylltw2y\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/align-to-pixel-grid-setting.png\", \n\"src\": \"\", \n\"id\": \"archive/illustrator-for-web-design-part-2/align-to-pixel-grid-setting.png\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_6oeqxf9h6\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Snapping to grid\", \n\"id\": \"\\_cktjif0z9\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"With the \\\\u201calign to pixel grid\\\\u201d option turned off we now face a new problem. Illustrator is a vector program and it isn\\\\u2019t created with pixels in mind, therefore; all our objects can be drawn in-between pixels. This obviously isn\\\\u2019t ideal when creating web design. To solve this first go to *Illustrator/Preferences/Units* and choose pixels. Then go to *Illustrator/Preferences/Guides & Grids/* and set Gridlines to 10px and subdivisions to 10 (that will equal one pixel). Now, go to *Window/* and turn off snap to point, and turn on Snap to Grid. Your shapes will now snap to full pixels as you draw them!\", \n\"id\": \"\\_6w7vq1294\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/grid-settings.png\", \n\"src\": \"\", \n\"id\": \"archive/illustrator-for-web-design-part-2/grid-settings.png\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_w6vwpqlcx\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Keyboard increments\", \n\"id\": \"\\_bsozk87q8\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"We've almost configured our grid, just set the keyboard increments in *Preferences/General* to 1px and we should do alright, however, you\\\\u2019ll notice that manually moving objects with the keyboard arrows might result in a 2px jump instead of the desired 1px when used in combination with your custom pixel grid. Furthermore, holding shift should result in a 10px jump but sometimes gives you 11px. This is probably because Illustrator doesn\\\\u2019t natively work with pixels and always converts your number in order to process it. This leads your 1px keyboard increment into something more along the lines of 1,0001px, and that value can easily turn into a 2px since Illustrator rounds the new value up or down in order to ensure snapping always ends up on a new grid line. The solution is simply to set the Keyboard Increments setting a bit off like 0,99px for example; our pixel grid will then round it to full pixels. (arrived at this solution after a huge amount of testing, and so far it's been working every time)\", \n\"id\": \"\\_16tc7ifpe\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/keyboard-increments.png\", \n\"src\": \"\", \n\"id\": \"archive/illustrator-for-web-design-part-2/keyboard-increments.png\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_m1voaz6qw\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"New symbol alignment\", \n\"id\": \"\\_l7k9fyuy6\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Adding a shape to the symbols library causes it to loose alignment to the pixel grid. To ensure that the shape stays on the pixel grid uncheck the \\\\u201cuse registration point for symbol\\\\u201d option under the Transform panel before creating the symbol. Also, in the symbol creation dialog, make sure to uncheck the box \\\\u201calign to pixel grid\\\\u201d.\", \n\"id\": \"\\_ftvg0mac4\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/symbols.png\", \n\"src\": \"\", \n\"id\": \"archive/illustrator-for-web-design-part-2/symbols.png\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_977xecu13\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Cumbersome gridding\", \n\"id\": \"\\_66u1i7dvz\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"We've set up the pixel grid and it works perfectly, all we need now is to start designing! One of the first things I usually do is setting up a layout grid to work with. It is indeed much easier to create grids manually in Illustrator compared to Photoshop, but the grid plugins available for Photoshop is far more user friendly than Illustrators \\\\u201cmake grid\\\\u201d-option. Too bad there aren't any similar grid plugins for Illustrator. Or are there? I decided to make one myself, after all that setup I didn't want to throw in the towel for such a small bump!\", \n\"id\": \"\\_i8z3wxkwt\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-2/files/gridscript.png\", \n\"src\": \"\", \n\"id\": \"archive/illustrator-for-web-design-part-2/gridscript.png\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_ad1nqp0f1\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"<a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://github.com/erikfriberg/Illustrator-web-design-plugins\\\\\">Download](https://github.com/erikfriberg/Illustrator-web-design-plugins\\\">Download) the script\", \n\"id\": \"\\_94VktanKY\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"All set up!\", \n\"id\": \"\\_gog4ngep5\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"When you've finally configured Illustrator to behave the way to want it, it's smart to save all your custom settings as a template. If you then place it in the programs template folder you can quickly start a new web project without needing to set anything up again even if you switch and do a print project in between!\", \n\"id\": \"\\_p40ugukdf\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"If you are interested in learning more about Illustrator for Web Design, definitively check out <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://mds.is/\\\\\">Matt](http://mds.is/\\\">Matt) Griffin\\\\u2019s upcoming <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://mds.is/releasing-an-aiux-sneak-peek/\\\\\">AIUX](http://mds.is/releasing-an-aiux-sneak-peek/\\\">AIUX) courses!\", \n\"id\": \"\\_sU28xWitY\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Design is not about programs, but programs can absolutely make us much more productive; the right program can even make us more willing to experiment. At the moment, Illustrator is actually the most reliable tool for web design as its stable and entirely vector based. But there is some relearning to do, and it might just be more sensible to wait for programs like Sketch to fully mature. It's up to you!\", \n\"id\": \"\\_xDar6moIc\", \n\"type\": \"paragraph\" \n} \n\\]","date_published":"2024-02-14T11:21:45+00:00","date_modified":"2024-02-14T11:21:45+00:00","author":{"name":"Staff Writer","uri":"https://grafiskjournal.com"}}, {"id":"https://grafiskjournal.com/archive/illustrator-for-web-design-part-1","url":"https://grafiskjournal.com/archive/illustrator-for-web-design-part-1","title":"Illustrator for web design part\u00a01","content_html":"

[
\n{
\n\"attrs\": [],
\n\"content\": \"So here\\u2019s the deal. Photoshop has been the number one tool for designing websites for about as long as it's been a profession. But compared to Sketch, Photoshop has grown big and tired and its wide palette of tools actually makes it harder to edit and be creative. Even Adobe themselves recognise this and recently released <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://adobe-photoshop.github.io/\\\">design space for Photoshop but it still needs some work before it can start to compete.\",
\n\"id\": \"_2b05supbn\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Turns out Illustrator has been around all along just waiting to be used. Many web designers have been using Illustrator for a long time, but for those of you who are at the fence about converting to a vector-only workflow, Illustrator might be the perfect stepping stone. Since it's a vector program, it actually enjoys most of the benefits that Sketch has over Photoshop. Unlike Sketch Illustrator isn't made for web design, but it's extremely flexible and you can tame it by configuring it properly. You can even create your own toolsets and hide what you don't need. In this first post, we'll start by exploring some of the benefits you'll enjoy when switching to Illustrator.\",
\n\"id\": \"_h1txzpswk\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"The good things about illustrator\",
\n\"id\": \"_x2muaafbm\",
\n\"type\": \"h2\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Vector native\",
\n\"id\": \"_7fhs76i8t\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"The more we work with responsive, scalable designs, the more we can benefit from working with vector graphics. Vectors are also much closer to how CSS works so it's easier to translate our designs to actual stylesheets when we are done designing. Color management, modularity, reusability and scalability are all concepts much closer to real world web development. Furthermore, as soon as we need to do adjustments to our designs a vector toolset can do so without loosing quality. This is the main reason why both Illustrator and Sketch is so much more usable for web design than Photoshop.\",
\n\"id\": \"_58k6yumwo\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-vector.gif\",
\n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-vector.gif\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_l8dg6duhh\",
\n\"type\": \"image\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Exact positioning\",
\n\"id\": \"_zs4f4xmpy\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Quickly view the exact position directly in the program. With the transform panel it's super easy to set the position of the object or adjust its size. How wide is an object? Too wide? Just use mathematical expressions, subtract or divide it's width directly in the input-box. With the powerful alignment tools it's also easy to distribute several objects with exact spacing; perfect if you want to stick with your 17px gutter without having to count every single pixel by hand.\",
\n\"id\": \"_xw1i29on9\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-align.gif\",
\n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-align.gif\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_rx8z7oaaj\",
\n\"type\": \"image\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Document linked Swatches\",
\n\"id\": \"_486o3vr23\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Swatches are great if you are working with brand colors. With Illustrator you can quickly tweak colors for all objects, including texts, that uses the same global swatch. Unlike photoshop, swatches is also associated only with the current workfile meaning that you won\\u2019t be bothered with accidentally picking swatches associated with another client or project; this also keeps the palette nice and clean. Combined with paragraph styles and text styles it becomes super easy to adjust your designs.\",
\n\"id\": \"_tdfgsyrbm\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-global-colors.gif\",
\n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-global-colors.gif\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_nyxqdhwti\",
\n\"type\": \"image\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Symbols & 9 Slice-grids\",
\n\"id\": \"_6pki2zxan\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Like Sketch, Illustrator also lets you use symbols. And like global colors, edit one symbol and all linked instances will be updated. Illustrator handles symbols even better than Sketch as its harder to accidentally change a symbol, something that could be disastrous if you're working with large projects . Illustrator also supports 9 Slice-grids, which prevents the symbols from getting distorted when performing non symmetric scaling; this is great for reoccurring modules such as search bars and forms.\",
\n\"id\": \"_5q0mbsqim\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-symbols.gif\",
\n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-symbols.gif\",
\n\"ratio\": 2,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_biyvf3d0n\",
\n\"type\": \"image\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Rounded Corners\",
\n\"id\": \"_tmudu716c\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"If you change your mind about your rounded corners it\\u2019s no problem changing them; Illustrator can round any corner, not just corners on a rectangle, it intelligently handles almost any shape!\",
\n\"id\": \"_bwx8nh9tj\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-round.gif\",
\n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-round.gif\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_lyanh8mkm\",
\n\"type\": \"image\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"SVG-export, and import\",
\n\"id\": \"_ocitsp8zn\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"While Photoshop has finally gotten SVG-export; Illustrator has enjoyed SVG-export for a long time now, and it imports it too!\",
\n\"id\": \"_1elxpuxk2\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-svg.jpg\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/illustrator-for-web-design-part-1/1511406910-1591355545/illustrator-svg.jpg\",
\n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-svg.jpg\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_zdl6j6ia4\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Cross platform\",
\n\"id\": \"_3motw3bt1\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Here's for all those who doesn't want to be stuck with just using one system. Unlike Sketch, Illustrator is available on Windows too. Sometimes this makes all the difference, especially if you or someone around you prefer to use it.\",
\n\"id\": \"_4qew3hmkc\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/windows-apple.jpg\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/illustrator-for-web-design-part-1/729661004-1591355545/windows-apple.jpg\",
\n\"id\": \"archive/illustrator-for-web-design-part-1/windows-apple.jpg\",
\n\"ratio\": 1.9166666666666667,
\n\"caption\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_5z9j7bbfu\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Speed\",
\n\"id\": \"_dm47zq2g4\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"When handling larger projects, Illustrator is still faster than Sketch (but to be fair, Sketch is really picking up)!\",
\n\"id\": \"_mk3he93ru\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"src\": \"https://www.youtube.com/embed/bdUbxk2iZrM\",
\n\"caption\": \"\",
\n\"css\": \"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_hfblj055d\",
\n\"type\": \"video\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Not perfect\",
\n\"id\": \"_g89xhqtz4\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Illustrator isn't perfect but it's about as good as the alternatives while also being the most stable of the bunch, this makes illustrator the most responsible vector program you can design in when working with real clients. Illustrator is still pretty far from \\\"ready\\\" out of the box; in the next part I'll go through the worst part of it when starting out: the setup.\",
\n\"id\": \"_ss70tltjd\",
\n\"type\": \"paragraph\"
\n}
\n]

","content_text":"\\[ \n{ \n\"attrs\": \\[\\], \n\"content\": \"So here\\\\u2019s the deal. Photoshop has been the number one tool for designing websites for about as long as it's been a profession. But compared to Sketch, Photoshop has grown big and tired and its wide palette of tools actually makes it harder to edit and be creative. Even Adobe themselves recognise this and recently released <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://adobe-photoshop.github.io/\\\\\">design](http://adobe-photoshop.github.io/\\\">design) space for Photoshop but it still needs some work before it can start to compete.\", \n\"id\": \"\\_2b05supbn\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Turns out Illustrator has been around all along just waiting to be used. Many web designers have been using Illustrator for a long time, but for those of you who are at the fence about converting to a vector-only workflow, Illustrator might be the perfect stepping stone. Since it's a vector program, it actually enjoys most of the benefits that Sketch has over Photoshop. Unlike Sketch Illustrator isn't made for web design, but it's extremely flexible and you can tame it by configuring it properly. You can even create your own toolsets and hide what you don't need. In this first post, we'll start by exploring some of the benefits you'll enjoy when switching to Illustrator.\", \n\"id\": \"\\_h1txzpswk\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"The good things about illustrator\", \n\"id\": \"\\_x2muaafbm\", \n\"type\": \"h2\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Vector native\", \n\"id\": \"\\_7fhs76i8t\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"The more we work with responsive, scalable designs, the more we can benefit from working with vector graphics. Vectors are also much closer to how CSS works so it's easier to translate our designs to actual stylesheets when we are done designing. Color management, modularity, reusability and scalability are all concepts much closer to real world web development. Furthermore, as soon as we need to do adjustments to our designs a vector toolset can do so without loosing quality. This is the main reason why both Illustrator and Sketch is so much more usable for web design than Photoshop.\", \n\"id\": \"\\_58k6yumwo\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-vector.gif\", \n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-vector.gif\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_l8dg6duhh\", \n\"type\": \"image\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Exact positioning\", \n\"id\": \"\\_zs4f4xmpy\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Quickly view the exact position directly in the program. With the transform panel it's super easy to set the position of the object or adjust its size. How wide is an object? Too wide? Just use mathematical expressions, subtract or divide it's width directly in the input-box. With the powerful alignment tools it's also easy to distribute several objects with exact spacing; perfect if you want to stick with your 17px gutter without having to count every single pixel by hand.\", \n\"id\": \"\\_xw1i29on9\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-align.gif\", \n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-align.gif\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_rx8z7oaaj\", \n\"type\": \"image\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Document linked Swatches\", \n\"id\": \"\\_486o3vr23\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Swatches are great if you are working with brand colors. With Illustrator you can quickly tweak colors for all objects, including texts, that uses the same global swatch. Unlike photoshop, swatches is also associated only with the current workfile meaning that you won\\\\u2019t be bothered with accidentally picking swatches associated with another client or project; this also keeps the palette nice and clean. Combined with paragraph styles and text styles it becomes super easy to adjust your designs.\", \n\"id\": \"\\_tdfgsyrbm\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-global-colors.gif\", \n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-global-colors.gif\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_nyxqdhwti\", \n\"type\": \"image\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Symbols & 9 Slice-grids\", \n\"id\": \"\\_6pki2zxan\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Like Sketch, Illustrator also lets you use symbols. And like global colors, edit one symbol and all linked instances will be updated. Illustrator handles symbols even better than Sketch as its harder to accidentally change a symbol, something that could be disastrous if you're working with large projects . Illustrator also supports 9 Slice-grids, which prevents the symbols from getting distorted when performing non symmetric scaling; this is great for reoccurring modules such as search bars and forms.\", \n\"id\": \"\\_5q0mbsqim\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-symbols.gif\", \n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-symbols.gif\", \n\"ratio\": 2, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_biyvf3d0n\", \n\"type\": \"image\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Rounded Corners\", \n\"id\": \"\\_tmudu716c\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"If you change your mind about your rounded corners it\\\\u2019s no problem changing them; Illustrator can round any corner, not just corners on a rectangle, it intelligently handles almost any shape!\", \n\"id\": \"\\_bwx8nh9tj\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-round.gif\", \n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-round.gif\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_lyanh8mkm\", \n\"type\": \"image\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"SVG-export, and import\", \n\"id\": \"\\_ocitsp8zn\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"While Photoshop has finally gotten SVG-export; Illustrator has enjoyed SVG-export for a long time now, and it imports it too!\", \n\"id\": \"\\_1elxpuxk2\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/illustrator-svg.jpg\", \n\"src\": \"\", \n\"id\": \"archive/illustrator-for-web-design-part-1/illustrator-svg.jpg\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_zdl6j6ia4\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Cross platform\", \n\"id\": \"\\_3motw3bt1\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Here's for all those who doesn't want to be stuck with just using one system. Unlike Sketch, Illustrator is available on Windows too. Sometimes this makes all the difference, especially if you or someone around you prefer to use it.\", \n\"id\": \"\\_4qew3hmkc\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+illustrator-for-web-design-part-1/files/windows-apple.jpg\", \n\"src\": \"\", \n\"id\": \"archive/illustrator-for-web-design-part-1/windows-apple.jpg\", \n\"ratio\": 1.9166666666666667, \n\"caption\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_5z9j7bbfu\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Speed\", \n\"id\": \"\\_dm47zq2g4\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"When handling larger projects, Illustrator is still faster than Sketch (but to be fair, Sketch is really picking up)!\", \n\"id\": \"\\_mk3he93ru\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"src\": \"\", \n\"caption\": \"\", \n\"css\": \"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_hfblj055d\", \n\"type\": \"video\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Not perfect\", \n\"id\": \"\\_g89xhqtz4\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Illustrator isn't perfect but it's about as good as the alternatives while also being the most stable of the bunch, this makes illustrator the most responsible vector program you can design in when working with real clients. Illustrator is still pretty far from \\\\\"ready\\\\\" out of the box; in the next part I'll go through the worst part of it when starting out: the setup.\", \n\"id\": \"\\_ss70tltjd\", \n\"type\": \"paragraph\" \n} \n\\]","date_published":"2024-02-14T11:21:45+00:00","date_modified":"2024-02-14T11:21:45+00:00","author":{"name":"Staff Writer","uri":"https://grafiskjournal.com"}}, {"id":"https://grafiskjournal.com/archive/envisioning-the-perfect-design-app","url":"https://grafiskjournal.com/archive/envisioning-the-perfect-design-app","title":"Envisioning the Perfect Design App","content_html":"

[
\n{
\n\"attrs\": [],
\n\"content\": \"To understand what new features could enhance productivity, we need to define the main purpose of design mockups. A question that often pops up when discussing new applications is whatever we really need them. Wouldn\\u2019t good old Photoshop suffice? Yes, probably.\",
\n\"id\": \"_4MoG0gDik\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"New tools won\\u2019t make your designs better and they won\\u2019t fix your broken workflow. It doesn\\u2019t matter how well your design mockups are kerned if that kerning doesn\\u2019t end up in the end-users browsers. High level prototypes won\\u2019t ease the production more than good communication or detailed spec-sheets. If we are going to spend hours on higher level prototypes it better benefit the end project by offering more than static design sketches, communication, spec-sheets and live coding can do today. New design applications need to offer a way to iterate design ideas much quicker and more freely than what\\u2019s possible with code to make the entire process worth it.\",
\n\"id\": \"_8En4elaGW\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"What better applications can do\",
\n\"id\": \"_tujryjit6\",
\n\"type\": \"h2\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Design has always been constrained to the proportions of its canvas, but with responsive design we\\u2019re dealing with something entirely new. While front end developers have an updated set of tools for these new conditions, there simply hasn\\u2019t been any similar alternatives for visual designers. This creates a large gap between the designer produced mockups and the real world applications. It has been argued that this gap is what\\u2019s causing our responsive designs to become homogenized. The gap has also sparked a lot of discussions whatever designers should just get over it and learn to code. While it\\u2019s always a benefit to understand how the applications actually work; the primary responsibility of a designer should always be to put the end users first. Code shouldn\\u2019t need to occupy the designers attention more than necessary. Tools that better reflect the end result not only gives a better understanding of the medium but also quickly gives us an idea of the implications a given solution has under different circumstances.\",
\n\"id\": \"_zm15nxdyd\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"There are several refreshing ideas in many of the recent design applications, but how do you judge whatever a new application will prove itself useful and worth learning? Successful new apps such as Sketch proves that productivity is an important factor while inVision proves that bridging the gap between interaction and design could be a winning formula. In just the past year the offering has exploded and competition is getting really though. Most new apps offer a couple of unique features. The problem is that a lot of the apps have a hard time synchronizing with the other apps already in your workflow, which results in a lot of manual setup. For new apps to really compete with the big ones they have to either present a suite of useful features that makes the initial setup worth it or provide easy methods for synchronization between other apps. This is probably one of the reasons why <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html\\\">Project Comet has gained so much attention as it seemingly handles several interesting features at once.\",
\n\"id\": \"_07IAaAllM\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"So what features would be in the ultimate-killer-of-all-design-apps? I\\u2019ve putted together a list of the most promising features that we\\u2019ve seen in recent web design apps. All of the features chosen solves some of the productivity gaps that exists today compared to code.\",
\n\"id\": \"_riy75urI5\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Vector tools and artboards\",
\n\"id\": \"_0wf1fp5lr\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Since the web is vector based your design has to work with vector shapes. <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://www.sketchapp.com/\\\">Sketch has managed to attract a strong user base by providing a vector based toolset focused on web design. Vector tools also have the benefit of allowing adjustable or even programmable shapes. But there are times where good old pixels just can\\u2019t be replaced. Put simply, no design workflow is complete without access to a complementary bitmap-editor. <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://affinity.serif.com/en-us/designer/\\\">Affinity Designer manages to seamlessly combine a vector based tool with a bitmap-editor by providing different context settings. Depending on context the available tools changes and the app behaves differently which allows for an uncluttered workspace for every scenario. A perfect web design application would either provide seamless integration to a bitmap-editor, or in best case: the app would provide both types of editors inside the same application just like Affinity Designer.\",
\n\"id\": \"_hdisqb4ps\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/affinity.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/envisioning-the-perfect-design-app/3757084130-1591357505/affinity.png\",
\n\"id\": \"archive/envisioning-the-perfect-design-app/affinity.png\",
\n\"ratio\": 1.7786259541984732,
\n\"caption\": \"Affinity Designer adapts the interface based on the selected \\\"persona\\\"\"
\n},
\n\"content\": \"\",
\n\"id\": \"_va4f51vuo\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Interactivity\",
\n\"id\": \"_d4i30z6l7\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Prototyping tools lets us build reusable prototypes for user testing. Simple prototypes lets us validate the intended structure and user flow early on and remove bumps before they even get implemented. <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://www.invisionapp.com/\\\">InVision has become one of the strongest competitors in this category. Thanks to its syncing capabilities; creating prototypes in InVision is pretty straight forward. But there\\u2019s still room for improvement here; the better our design applications are integrated with our prototyping tools the less rework will ultimately be necessary. The perfect design app would instantly reflect design updates in our prototypes, to allow for quicker iterations.\",
\n\"id\": \"_e5rcdjel8\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/invision.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/envisioning-the-perfect-design-app/419300993-1591357505/invision.png\",
\n\"id\": \"archive/envisioning-the-perfect-design-app/invision.png\",
\n\"ratio\": 1.7786259541984732,
\n\"caption\": \"Invision can instantly sync with your design sketches thanks to it\\u2019s mac app\"
\n},
\n\"content\": \"\",
\n\"id\": \"_6uoiabgr4\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Animations and transitions\",
\n\"id\": \"_qoefmik82\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"To enable more designers to design compelling animations our tools need a workflow that lets us quickly set up our vector shapes for animation. Most of todays professional animation tools needs every component to be reassembled before animation is possible which greatly limits the flexibility. Integrating an animation workflow into our design applications should in theory let us test animations with the already existing vector shapes. Tools such as <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://framerjs.com/\\\">Framer lets us access every object in our design mockups directly and apply animations to them non destructively. Our perfect app would probably provide animation tools directly inside the app, sidestepping the problem altogether.\",
\n\"id\": \"_4457k7fn1\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/framer.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/envisioning-the-perfect-design-app/4036580827-1591357505/framer.png\",
\n\"id\": \"archive/envisioning-the-perfect-design-app/framer.png\",
\n\"ratio\": 1.7786259541984732,
\n\"caption\": \"Framer can directly import and access existing layers without additional setup\"
\n},
\n\"content\": \"\",
\n\"id\": \"_b0ln2aeda\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Object Oriented Components\",
\n\"id\": \"_xssd3wm2k\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"In Web design it's common to build designs around constructions of repeating components and shapes with variable content. A common example of this are cards. Cards are relatively easy to manage in CSS but they are unnecessarily cumbersome in design applications. Some design applications lets designers create symbols of components that mirrors the properties of a reference object. But most of those implementations also fails to let the user define what parts should mirror the original construction and what parts should be variable. <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://helpx.adobe.com/illustrator/atv/cs5-tutorials/using-9slice-scaling-options-with-symbols.html\\\">Illustrator, <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://helpx.adobe.com/flash/using/scaling-caching-symbols.html\\\">Flash and good old <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00d277-7ff4.html\\\">Fireworks have capabilities for reusable symbols that also allows certain areas of the symbol to remain static during resize.\",
\n\"id\": \"_4fg0ughu3\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"The perfect design app would hopefully allow for per property syncing, allowing everything to be adjusted while still inheriting selected features from the parent object.\",
\n\"id\": \"_YowsRbzqy\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/illustrator-symbols.gif\",
\n\"id\": \"archive/envisioning-the-perfect-design-app/illustrator-symbols.gif\",
\n\"ratio\": 2,
\n\"caption\": \"Illustrator provides smart symbols that can be set up to allow for quick variations\"
\n},
\n\"content\": \"\",
\n\"id\": \"_302pxuiwd\",
\n\"type\": \"image\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Reflow\",
\n\"id\": \"_r1pwjen2b\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"If a designer would like to switch place of two components things gets messy quickly. In HTML this is easy as pie but design applications require designers to manually readjust the entire layout. Automatic reflows isn\\u2019t easy to implement since it\\u2019s hard to programatically judge what element should go where. But pure HTML/CSS solutions such as <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://webflow.com/\\\">Webflow handles reflows elegantly. Conventional vector applications could definitively improve the current workflow by adding support for less automatic variations of reflow. A possible solution could be to let users cut out a part of the artboard/canvas and insert the piece anywhere. Such a solution would make it easier to reorder entire sections without needing to realign every element beneath it.\",
\n\"id\": \"_vv9lreqzx\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Our fictive design application would have solved this and automagically reflow all our content correctly of course ;-)\",
\n\"id\": \"_ept4O8NRK\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/webflow-optimized.gif\",
\n\"id\": \"archive/envisioning-the-perfect-design-app/webflow-optimized.gif\",
\n\"ratio\": 1.7772511848341233,
\n\"caption\": \"Webflow automatically reflows the content when you switch place or add new content\"
\n},
\n\"content\": \"\",
\n\"id\": \"_6qe4bniac\",
\n\"type\": \"image\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Responsive layout\",
\n\"id\": \"_mt7pytqov\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"A responsive module look different depending on the available screen size. There are several ways our tools could ease our workflow for experimenting with responsive layouts. One of the most basic implementations is to let objects snap to a defined corner of its parent container. Another implementation would be to help designers manage different versions of the same designs depending on artboard settings. The same set of components/symbols or paragraph styles could have different modifiers when mobile mode is enabled etc. Sketch has <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://github.com/matt-curtis/Fluid-for-Sketch\\\">several plugins that experiment with <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://github.com/bouchenoiremarc/Sketch-Constraints\\\">corner constraints and the now defunct <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://www.adobe.com/products/edge-reflow.html\\\">Edge Reflow was a great example of what we can expect from the future of design applications. It\\u2019s definitively worth keeping an eye on Figma here, as they have implemented a <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://medium.com/figma-design/grid-systems-for-screen-design-46d86ea9fd48#.949t8mz9n\\\">similar feature natively into their tool.\",
\n\"id\": \"_sl7wbur5e\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/updatelayout.gif\",
\n\"id\": \"archive/envisioning-the-perfect-design-app/updatelayout.gif\",
\n\"ratio\": 1.7777777777777777,
\n\"caption\": \"The Sketch constraints plugin automatically adjusts the layout based on parent container size\"
\n},
\n\"content\": \"\",
\n\"id\": \"_62lmy60ok\",
\n\"type\": \"image\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Better versioning and collaboration\",
\n\"id\": \"_wituxshk8\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"This is something that\\u2019s been plaguing design applications since the beginning. If you want to work in a bigger design team with shared assets there\\u2019s very few options. Every file needs to be synced to another computer for others to participate and if someone jumps in while someone else is working we end up with conflicting copies. Furthermore few applications lets us save and review older versions of our designs. If we\\u2019ve had chosen to work directly in code we could easily handle all this with Git. Is it time for design tools to adopt a few cues from Google Docs or switch to a file format that can support versioning such as SVG? <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://www.figma.com\\\">Figma is one of few applications that tries to tackle this issue. The perfect web design app would definitively take a hint from Figma.\",
\n\"id\": \"_xubjfx5du\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/figma.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/envisioning-the-perfect-design-app/1682531725-1591357505/figma.png\",
\n\"id\": \"archive/envisioning-the-perfect-design-app/figma.png\",
\n\"ratio\": 1.5003750937734435,
\n\"caption\": \"Figma will allow several people to jump in and design at the same time\"
\n},
\n\"content\": \"\",
\n\"id\": \"_mz87zqbla\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Specifications\",
\n\"id\": \"_g8ltksmbj\",
\n\"type\": \"h3\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"The dream among design applications is of course to be able to design and publish production ready code directly from the application. However, it\\u2019s proven to be much harder to create in practice than we might have thought. Automatically generated code can\\u2019t simply replace handwritten counterparts. But there are applications out there that are indeed getting better and better at this. <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"https://webflow.com/\\\">Webflow is the application that\\u2019s closest to that dream of production ready exports. In the meantime applications that can export usable CSS snippets or compile a specification sheet for developers will be highly beneficial.\",
\n\"id\": \"_efjb7b42c\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Would the perfect design application also replace web developers? Maybe. But <a target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\" href=\\\"http://www.adobe.com/se/products/dreamweaver.html\\\">Dreamweaver proved early on that apps always have a tendency to be a few steps back in terms of features compared to whats actually available on the web. To provide the most up to date experience, the perfect web design app should prioritize a flexible environment for designers rather than fully functioning exports. In the future I wouldn\\u2019t be surprised if web design apps are powerful enough to export fully functioning sites though, and Webflow might just be closer to that future than we might think.\",
\n\"id\": \"_dTEoHQQsV\",
\n\"type\": \"paragraph\"
\n},
\n{
\n\"attrs\": {
\n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/webflow2.png\",
\n\"src\": \"http://localhost/grafiskjournal/dist/media/pages/archive/envisioning-the-perfect-design-app/4213695973-1591357505/webflow2.png\",
\n\"id\": \"archive/envisioning-the-perfect-design-app/webflow2.png\",
\n\"ratio\": 1.7786259541984732,
\n\"caption\": \"Webflow can export fully functional sites directly from the application\"
\n},
\n\"content\": \"\",
\n\"id\": \"_7wg213764\",
\n\"type\": \"srcset\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"Conclusion\",
\n\"id\": \"_jpau82uxk\",
\n\"type\": \"h2\"
\n},
\n{
\n\"attrs\": [],
\n\"content\": \"There\\u2019s even more ways to innovate design applications, but these are some examples where new features could help us bridge the gap between static mockups and actual code. For design mockups and prototypes to continue to be a relevant step in web development we need tools that enables us to do our work and focus less on the stuff that already comes automatically for the developers. Sure, with coding knowledge we can intentionally leave out stuff from our design sketches. But then we also lose the ability to judge our designs properly before implementation.\",
\n\"id\": \"_270gamqt1\",
\n\"type\": \"paragraph\"
\n}
\n]

","content_text":"\\[ \n{ \n\"attrs\": \\[\\], \n\"content\": \"To understand what new features could enhance productivity, we need to define the main purpose of design mockups. A question that often pops up when discussing new applications is whatever we really need them. Wouldn\\\\u2019t good old Photoshop suffice? Yes, probably.\", \n\"id\": \"\\_4MoG0gDik\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"New tools won\\\\u2019t make your designs better and they won\\\\u2019t fix your broken workflow. It doesn\\\\u2019t matter how well your design mockups are kerned if that kerning doesn\\\\u2019t end up in the end-users browsers. High level prototypes won\\\\u2019t ease the production more than good communication or detailed spec-sheets. If we are going to spend hours on higher level prototypes it better benefit the end project by offering more than static design sketches, communication, spec-sheets and live coding can do today. New design applications need to offer a way to iterate design ideas much quicker and more freely than what\\\\u2019s possible with code to make the entire process worth it.\", \n\"id\": \"\\_8En4elaGW\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"What better applications can do\", \n\"id\": \"\\_tujryjit6\", \n\"type\": \"h2\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Design has always been constrained to the proportions of its canvas, but with responsive design we\\\\u2019re dealing with something entirely new. While front end developers have an updated set of tools for these new conditions, there simply hasn\\\\u2019t been any similar alternatives for visual designers. This creates a large gap between the designer produced mockups and the real world applications. It has been argued that this gap is what\\\\u2019s causing our responsive designs to become homogenized. The gap has also sparked a lot of discussions whatever designers should just get over it and learn to code. While it\\\\u2019s always a benefit to understand how the applications actually work; the primary responsibility of a designer should always be to put the end users first. Code shouldn\\\\u2019t need to occupy the designers attention more than necessary. Tools that better reflect the end result not only gives a better understanding of the medium but also quickly gives us an idea of the implications a given solution has under different circumstances.\", \n\"id\": \"\\_zm15nxdyd\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"There are several refreshing ideas in many of the recent design applications, but how do you judge whatever a new application will prove itself useful and worth learning? Successful new apps such as Sketch proves that productivity is an important factor while inVision proves that bridging the gap between interaction and design could be a winning formula. In just the past year the offering has exploded and competition is getting really though. Most new apps offer a couple of unique features. The problem is that a lot of the apps have a hard time synchronizing with the other apps already in your workflow, which results in a lot of manual setup. For new apps to really compete with the big ones they have to either present a suite of useful features that makes the initial setup worth it or provide easy methods for synchronization between other apps. This is probably one of the reasons why <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html\\\\\">Project](http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html\\\">Project) Comet has gained so much attention as it seemingly handles several interesting features at once.\", \n\"id\": \"\\_07IAaAllM\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"So what features would be in the ultimate-killer-of-all-design-apps? I\\\\u2019ve putted together a list of the most promising features that we\\\\u2019ve seen in recent web design apps. All of the features chosen solves some of the productivity gaps that exists today compared to code.\", \n\"id\": \"\\_riy75urI5\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Vector tools and artboards\", \n\"id\": \"\\_0wf1fp5lr\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Since the web is vector based your design has to work with vector shapes. <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://www.sketchapp.com/\\\\\">Sketch](https://www.sketchapp.com/\\\">Sketch) has managed to attract a strong user base by providing a vector based toolset focused on web design. Vector tools also have the benefit of allowing adjustable or even programmable shapes. But there are times where good old pixels just can\\\\u2019t be replaced. Put simply, no design workflow is complete without access to a complementary bitmap-editor. <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://affinity.serif.com/en-us/designer/\\\\\">Affinity](https://affinity.serif.com/en-us/designer/\\\">Affinity) Designer manages to seamlessly combine a vector based tool with a bitmap-editor by providing different context settings. Depending on context the available tools changes and the app behaves differently which allows for an uncluttered workspace for every scenario. A perfect web design application would either provide seamless integration to a bitmap-editor, or in best case: the app would provide both types of editors inside the same application just like Affinity Designer.\", \n\"id\": \"\\_hdisqb4ps\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/affinity.png\", \n\"src\": \"\", \n\"id\": \"archive/envisioning-the-perfect-design-app/affinity.png\", \n\"ratio\": 1.7786259541984732, \n\"caption\": \"Affinity Designer adapts the interface based on the selected \\\\\"persona\\\\\"\" \n}, \n\"content\": \"\", \n\"id\": \"\\_va4f51vuo\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Interactivity\", \n\"id\": \"\\_d4i30z6l7\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Prototyping tools lets us build reusable prototypes for user testing. Simple prototypes lets us validate the intended structure and user flow early on and remove bumps before they even get implemented. <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://www.invisionapp.com/\\\\\">InVision](http://www.invisionapp.com/\\\">InVision) has become one of the strongest competitors in this category. Thanks to its syncing capabilities; creating prototypes in InVision is pretty straight forward. But there\\\\u2019s still room for improvement here; the better our design applications are integrated with our prototyping tools the less rework will ultimately be necessary. The perfect design app would instantly reflect design updates in our prototypes, to allow for quicker iterations.\", \n\"id\": \"\\_e5rcdjel8\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/invision.png\", \n\"src\": \"\", \n\"id\": \"archive/envisioning-the-perfect-design-app/invision.png\", \n\"ratio\": 1.7786259541984732, \n\"caption\": \"Invision can instantly sync with your design sketches thanks to it\\\\u2019s mac app\" \n}, \n\"content\": \"\", \n\"id\": \"\\_6uoiabgr4\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Animations and transitions\", \n\"id\": \"\\_qoefmik82\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"To enable more designers to design compelling animations our tools need a workflow that lets us quickly set up our vector shapes for animation. Most of todays professional animation tools needs every component to be reassembled before animation is possible which greatly limits the flexibility. Integrating an animation workflow into our design applications should in theory let us test animations with the already existing vector shapes. Tools such as <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://framerjs.com/\\\\\">Framer](http://framerjs.com/\\\">Framer) lets us access every object in our design mockups directly and apply animations to them non destructively. Our perfect app would probably provide animation tools directly inside the app, sidestepping the problem altogether.\", \n\"id\": \"\\_4457k7fn1\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/framer.png\", \n\"src\": \"\", \n\"id\": \"archive/envisioning-the-perfect-design-app/framer.png\", \n\"ratio\": 1.7786259541984732, \n\"caption\": \"Framer can directly import and access existing layers without additional setup\" \n}, \n\"content\": \"\", \n\"id\": \"\\_b0ln2aeda\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Object Oriented Components\", \n\"id\": \"\\_xssd3wm2k\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"In Web design it's common to build designs around constructions of repeating components and shapes with variable content. A common example of this are cards. Cards are relatively easy to manage in CSS but they are unnecessarily cumbersome in design applications. Some design applications lets designers create symbols of components that mirrors the properties of a reference object. But most of those implementations also fails to let the user define what parts should mirror the original construction and what parts should be variable. <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://helpx.adobe.com/illustrator/atv/cs5-tutorials/using-9slice-scaling-options-with-symbols.html\\\\\">Illustrator](https://helpx.adobe.com/illustrator/atv/cs5-tutorials/using-9slice-scaling-options-with-symbols.html\\\">Illustrator), <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://helpx.adobe.com/flash/using/scaling-caching-symbols.html\\\\\">Flash](https://helpx.adobe.com/flash/using/scaling-caching-symbols.html\\\">Flash) and good old <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://help.adobe.com/en\\_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00d277-7ff4.html\\\\\">Fireworks](http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00d277-7ff4.html\\\">Fireworks) have capabilities for reusable symbols that also allows certain areas of the symbol to remain static during resize.\", \n\"id\": \"\\_4fg0ughu3\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"The perfect design app would hopefully allow for per property syncing, allowing everything to be adjusted while still inheriting selected features from the parent object.\", \n\"id\": \"\\_YowsRbzqy\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/illustrator-symbols.gif\", \n\"id\": \"archive/envisioning-the-perfect-design-app/illustrator-symbols.gif\", \n\"ratio\": 2, \n\"caption\": \"Illustrator provides smart symbols that can be set up to allow for quick variations\" \n}, \n\"content\": \"\", \n\"id\": \"\\_302pxuiwd\", \n\"type\": \"image\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Reflow\", \n\"id\": \"\\_r1pwjen2b\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"If a designer would like to switch place of two components things gets messy quickly. In HTML this is easy as pie but design applications require designers to manually readjust the entire layout. Automatic reflows isn\\\\u2019t easy to implement since it\\\\u2019s hard to programatically judge what element should go where. But pure HTML/CSS solutions such as <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://webflow.com/\\\\\">Webflow](https://webflow.com/\\\">Webflow) handles reflows elegantly. Conventional vector applications could definitively improve the current workflow by adding support for less automatic variations of reflow. A possible solution could be to let users cut out a part of the artboard/canvas and insert the piece anywhere. Such a solution would make it easier to reorder entire sections without needing to realign every element beneath it.\", \n\"id\": \"\\_vv9lreqzx\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Our fictive design application would have solved this and automagically reflow all our content correctly of course ;-)\", \n\"id\": \"\\_ept4O8NRK\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/webflow-optimized.gif\", \n\"id\": \"archive/envisioning-the-perfect-design-app/webflow-optimized.gif\", \n\"ratio\": 1.7772511848341233, \n\"caption\": \"Webflow automatically reflows the content when you switch place or add new content\" \n}, \n\"content\": \"\", \n\"id\": \"\\_6qe4bniac\", \n\"type\": \"image\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Responsive layout\", \n\"id\": \"\\_mt7pytqov\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"A responsive module look different depending on the available screen size. There are several ways our tools could ease our workflow for experimenting with responsive layouts. One of the most basic implementations is to let objects snap to a defined corner of its parent container. Another implementation would be to help designers manage different versions of the same designs depending on artboard settings. The same set of components/symbols or paragraph styles could have different modifiers when mobile mode is enabled etc. Sketch has <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://github.com/matt-curtis/Fluid-for-Sketch\\\\\">several](https://github.com/matt-curtis/Fluid-for-Sketch\\\">several) plugins that experiment with <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://github.com/bouchenoiremarc/Sketch-Constraints\\\\\">corner](https://github.com/bouchenoiremarc/Sketch-Constraints\\\">corner) constraints and the now defunct <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://www.adobe.com/products/edge-reflow.html\\\\\">Edge](http://www.adobe.com/products/edge-reflow.html\\\">Edge) Reflow was a great example of what we can expect from the future of design applications. It\\\\u2019s definitively worth keeping an eye on Figma here, as they have implemented a <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://medium.com/figma-design/grid-systems-for-screen-design-46d86ea9fd48#.949t8mz9n\\\\\">similar](https://medium.com/figma-design/grid-systems-for-screen-design-46d86ea9fd48#.949t8mz9n\\\">similar) feature natively into their tool.\", \n\"id\": \"\\_sl7wbur5e\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/updatelayout.gif\", \n\"id\": \"archive/envisioning-the-perfect-design-app/updatelayout.gif\", \n\"ratio\": 1.7777777777777777, \n\"caption\": \"The Sketch constraints plugin automatically adjusts the layout based on parent container size\" \n}, \n\"content\": \"\", \n\"id\": \"\\_62lmy60ok\", \n\"type\": \"image\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Better versioning and collaboration\", \n\"id\": \"\\_wituxshk8\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"This is something that\\\\u2019s been plaguing design applications since the beginning. If you want to work in a bigger design team with shared assets there\\\\u2019s very few options. Every file needs to be synced to another computer for others to participate and if someone jumps in while someone else is working we end up with conflicting copies. Furthermore few applications lets us save and review older versions of our designs. If we\\\\u2019ve had chosen to work directly in code we could easily handle all this with Git. Is it time for design tools to adopt a few cues from Google Docs or switch to a file format that can support versioning such as SVG? <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://www.figma.com\\\\\">Figma](https://www.figma.com\\\">Figma) is one of few applications that tries to tackle this issue. The perfect web design app would definitively take a hint from Figma.\", \n\"id\": \"\\_xubjfx5du\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/figma.png\", \n\"src\": \"\", \n\"id\": \"archive/envisioning-the-perfect-design-app/figma.png\", \n\"ratio\": 1.5003750937734435, \n\"caption\": \"Figma will allow several people to jump in and design at the same time\" \n}, \n\"content\": \"\", \n\"id\": \"\\_mz87zqbla\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Specifications\", \n\"id\": \"\\_g8ltksmbj\", \n\"type\": \"h3\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"The dream among design applications is of course to be able to design and publish production ready code directly from the application. However, it\\\\u2019s proven to be much harder to create in practice than we might have thought. Automatically generated code can\\\\u2019t simply replace handwritten counterparts. But there are applications out there that are indeed getting better and better at this. <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[https://webflow.com/\\\\\">Webflow](https://webflow.com/\\\">Webflow) is the application that\\\\u2019s closest to that dream of production ready exports. In the meantime applications that can export usable CSS snippets or compile a specification sheet for developers will be highly beneficial.\", \n\"id\": \"\\_efjb7b42c\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Would the perfect design application also replace web developers? Maybe. But <a target=\\\\\"\\_blank\\\\\" rel=\\\\\"noopener noreferrer\\\\\" href=\\\\\"[http://www.adobe.com/se/products/dreamweaver.html\\\\\">Dreamweaver](http://www.adobe.com/se/products/dreamweaver.html\\\">Dreamweaver) proved early on that apps always have a tendency to be a few steps back in terms of features compared to whats actually available on the web. To provide the most up to date experience, the perfect web design app should prioritize a flexible environment for designers rather than fully functioning exports. In the future I wouldn\\\\u2019t be surprised if web design apps are powerful enough to export fully functioning sites though, and Webflow might just be closer to that future than we might think.\", \n\"id\": \"\\_dTEoHQQsV\", \n\"type\": \"paragraph\" \n}, \n{ \n\"attrs\": { \n\"guid\": \"/pages/archive+envisioning-the-perfect-design-app/files/webflow2.png\", \n\"src\": \"\", \n\"id\": \"archive/envisioning-the-perfect-design-app/webflow2.png\", \n\"ratio\": 1.7786259541984732, \n\"caption\": \"Webflow can export fully functional sites directly from the application\" \n}, \n\"content\": \"\", \n\"id\": \"\\_7wg213764\", \n\"type\": \"srcset\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"Conclusion\", \n\"id\": \"\\_jpau82uxk\", \n\"type\": \"h2\" \n}, \n{ \n\"attrs\": \\[\\], \n\"content\": \"There\\\\u2019s even more ways to innovate design applications, but these are some examples where new features could help us bridge the gap between static mockups and actual code. For design mockups and prototypes to continue to be a relevant step in web development we need tools that enables us to do our work and focus less on the stuff that already comes automatically for the developers. Sure, with coding knowledge we can intentionally leave out stuff from our design sketches. But then we also lose the ability to judge our designs properly before implementation.\", \n\"id\": \"\\_270gamqt1\", \n\"type\": \"paragraph\" \n} \n\\]","date_published":"2024-02-14T11:21:45+00:00","date_modified":"2024-02-14T11:21:45+00:00","author":{"name":"Staff Writer","uri":"https://grafiskjournal.com"}}] }