Rss Bot
-
Content Count
15,250 -
Joined
-
Last visited
Never -
Feedback
N/A
Posts posted by Rss Bot
-
-
With web components, developers now have the ability to create their own HTML elements. In this ultimate guide, you'll learn everything you need to know. On this page, we'll cover what exactly web components are, the benefits of using them, and the elements that make them up.
Then you'll learn how to build your own components in two short tutorials – on page 2 you'll learn how to building a component with the HTML templates and shadowDOM APIs, and on page 3 you'll got one step further and learn how to build a customised, built-in element.
Finally on page 4 you'll find some frameworks and tools to get you started, and examples of existing elements to try to today.
While you're here, you might also want to take a look at our guide to the top HTML APIs, and how to use them.
What are web components?
Developers love components. They are a great way to define blocks of code that can be dropped in and reused anywhere they are required. Over the years, there have been a few attempts to convey this idea on the web, with varying degrees of success.
Mozilla's XML Binding Language and Microsoft's HTML Component specifications date back all the way to Internet Explorer 5 almost 20 years ago. Unfortunately, both attempts proved unwieldy, failed to gain traction in other browsers, and ultimately were removed. While they may not be around today, their concepts formed the basis of the modern approaches in use.
JavaScript frameworks such as React, Vue or Angular follow a similar approach. One of the main reasons for their success is the ability to contain common logic in an easily shareable pattern in one form or another.
While these frameworks can improve the developer experience, they do so at a cost. Language features such as JSX need to be compiled, and many frameworks rely on a runtime to manage all of their abstractions. Wouldn't it be easier if there was a way to get the benefit without all that heavy weight? Web components allow us to do just that.
The 4 pillars of web components
The concept of a web component consists of three APIs – Custom elements, HTML templates and the shadow DOM – with JavaScript modules gluing them together. By combining the benefits that these technologies provide, it's possible to start building custom HTML elements that look and behave just like their native counterparts.
Using a web component is much like using any other existing HTML element. They can be configured using attributes, queried for using JavaScript, and even styled through CSS. As long as the browser knows they exist, they are treated no differently.
This also allows web components to play well with other frameworks and libraries. By using the same communication mechanisms as any other element, they can be used alongside any framework that exists today or in the future.
Most importantly of all, these are all built upon web standards. The web is built on a concept of backwards compatibility, and by building a web component today, it will carry on working for years to come.
But before going any further, we should take a look at what makes up these specifications, and how you can get creating and using one today.
There are four main elements that make up web components
01. Custom Elements
Key features:
- Define an element's behaviour
- React to attribute changes
- Augment existing elements
When you hear people talk about 'web components,' quite often they are referring to the workings underneath – the custom elements API.
With this API, it is possible to create classes that power the inner workings of an element. They detail exactly what to do when an element is added, updated or removed.
Each custom element has a similar structure. They extend an existing HTMLElement class, which provides the groundwork for how an element should behave.
Inside, there are a few methods called reactions that are called in response to something about that element changing. For example, connectedCallback will be called when the new element appears on screen. These work similarly to the lifecycle methods found in most JavaScript frameworks.
Updating the attributes on an element can change how it behaves. When an update happens, the attributeChangedCallback reaction will fire, which details the change. This will only happen for an attribute that is defined inside the observedAttributes array.
An element needs to be defined before the browser can do anything with it. The define method here takes two arguments – the tag name, and the class it should use. All tag names must contain a - character to avoid any clashes with any future native elements.
The element can then be written anywhere in the page as a regular HTML tag. Once a browser has an element defined, it then finds any of these matching tags and links up their behaviour to the class in a process known as 'upgrading'.
There are two types of custom element – 'autonomous' or 'customised built-in'. Autonomous custom elements, which have been covered up until now, are not related to any existing element. Much like a <div> or <span> they do not provide any meaning to their content.
A customised built-in element – as the name implies – can enhance an existing element with new functionality. They maintain that element's normal semantic behaviours, while also being open to change. If an <input> element was customised, for example, it would still be picked up and submitted as part of a form.
The class of customised built-in component extends the class of the element it is customising. The definition also needs to define the tag of that element through its third argument.
They are also used slightly differently. Instead of a new tag, they extend the existing tag by using the is attribute. The browser can read this, and upgrade them in the same way as it can an autonomous component.
While most browsers support autonomous custom elements, Only Chrome and Firefox support customised built-in elements. If used in a browser that does not support them, they will fall back to the regular versions of the elements they customise, which can make them safe to use.
02. HTML Templates
- Create ready-made structures
- Inert until called upon
- Contains HTML, CSS and JS
Historically, browser-based templating involved stitching strings together in JavaScript, or using a library like Handlebars to parse a block special markup. More recently, the HTML templates specification defined the <template> tag, which can contain anything likely to be reused.
On its own, it has no appearance and remains inert, meaning nothing inside is parsed or executed until told to, including requests for external media such as images or video. JavaScript cannot query the contents either, as browsers will only see it as an empty element.
A regular query will pick up the <template> element itself. The importNode method creates a copy of its contents, with the second argument telling it to take a deep copy of everything. Finally, it can be added to the document like any other element.
Templates can contain anything an HTML page can, including CSS and JavaScript. As soon as the element is applied to the page, those styles apply and the scripts execute. Bear in mind that these will run globally and so can override styles and values if care isn't taken.
The best part about templates is that they are not just limited to web components. The examples here apply to any web page, but become particularly powerful when paired with web components, in particular the shadow DOM.
03. Shadow DOM
- Avoid styles leaking out
- Naming becomes simpler
- Keep implementation logic inside
The Document Object Model – or 'DOM' – is how the browser interprets the structure of a page. By reading through the HTML, it builds up an idea on what elements in the page contain what content, and uses that to decide what to show. When using something like document.getElementById() the browser is actually looking through the DOM.
That may be okay for the layout of a page, but what about the implementation details inside an element? Pages shouldn't need to worry about what makes up the interface inside a <video> element for example. That is where the shadow DOM comes in.
A shadow DOM is created when applied to an element. Any content can be added to the shadow DOM just like the regular – or 'light' – DOM, but it has no effect on what's happening outside of it. Likewise, nothing in the light DOM can access the shadow DOM directly. This means we can add classes, styles and scripts anywhere in the shadow DOM without worrying about clashes.
The best use of the shadow DOM with web components comes when coupled with a custom element. By having a shadow DOM in charge of the content, any time this component is reused, its styles and structure will not affect the rest of the page.
04. ES and HTML Modules
- Add in where needed
- No build step requirement
- Keep everything in one place
While the previous three specifications have had relatively straightforward paths to success, the packaging and reusability of them has long been a sticking point.
Originally, the HTML Imports specification defined a way for browsers to include HTML documents, much like CSS or JavaScript is already today. This would allow custom elements, along with their templates and shadow DOM, to live elsewhere and imported as needed.
Firefox chose not to implement HTML Imports in its browser, and instead favoured a newer specification around JavaScript module importing.
Modules do not apply their content globally by default. By marking certain variables, functions or classes as exported, they can then be imported by anything that needs them and used as if they were local.
This is a great help to web components, as a custom element containing a template and a shadow DOM can be exported from one file and added to another. As long as it gets defined somewhere along the line, it is ready to use.
An extension to this specification has been proposed to bring back some of the ease of HTML imports, alongside module imports. They will allow web components to be written using declarative and semantic HTML. Spearheaded by Microsoft, this feature is soon coming to Chrome and the Chromium-powered Edge browser.
Next page: How to build you own components
While there are a lot of complicated things you can achieve with web components, simply getting up and running actually involves very little code. Take your first steps into web components with a couple of short examples.
This component enables you to display user comments, using the HTML templates and shadow DOM APIs
This first tutorial (below) focuses on building a component to display user comments by making use of the HTML templates and shadow DOM APIs.
Jump to page 3 to learn how to save yourself time by using custom elements.
01. Provide a template
The component needs a generic template it can copy in order to generate its markup. This can live anywhere that the custom element class itself can access through its unique ID.
Add the <template> element directly in the HTML of the page. Any styles written here will only affect the component.
02. Add in markup
Along with the styles, the template contains the structure of the component's internals. In this case, it is set of <div> containers for layout purposes.
All dynamic content is passed in through slots. Add in slots for the user's avatar, name and message, and give them appropriate names to reference later.
03. Default slot content
Fallback content will appear when no information is supplied for a slot
The data passed into the slot will override whatever sits inside it in the template. If there is nothing supplied for that slot, it displays the fallback content instead.
In this case, if no username is supplied, the comment will display a 'no name' message in its place.
04. Create the class
Custom elements start life as a class that extends the generic HTMLElement class. As part of the setup process, it creates its own shadow root to render its content into. Keep it open in order to access it in the next step.
Finally, tell the browser about the new UserComment component class.
05. Apply shadow content
When the browser finds a <user-comment> element, it is going to populate the shadow root with the content of the template. The second argument tells the browser to copy all of the template, not just the first layer.
Add that markup to the shadow root, which will immediately update the visuals of this component.
06. Use the component
Back in the HTML, the component is now ready to use. Add the <user-comment> tag and add any relevant data inside.
As all slots are named, anything else that is passed through outside of a slot will be ignored. Everything inside those slots is copied in exactly as supplied, including related styling.
Next page: How to create a customised built-in element
Custom elements can also extend existing ones. It helps to save time by not having to recreate some of the behaviour that's already in the browser. This tutorial shows you how to extend the <time> element to display relative times that machines can understand.
Extend the <time> element to display relative times that machines can understand
01. Create the class
Custom built-in elements start life exactly the same as autonomous ones, but instead of extending HTMLElement, they use an existing element as a starting point.
This component uses HTMLTimeElement – the class that <time> elements use. It includes all the behaviour around the datetime attribute, including the format it expects that data to be supplied in.
02. Define the element
Again, much like autonomous custom elements, these also need to be registered with the browser using the define method. One added detail is the third argument, which takes an options object.
For now, this object only has one key, which is used to define exactly which built-in element it customises. It takes the tag name, and will cause an error if it doesn't exist.
03. Set the time
As the components set the value of the element in multiple places, it should have a method to call that contains that logic. Inside that method, the component tells the timeago library what that time is and sets its return value as the contents of that element.
Finally, set the title attribute, which allows users to hover their cursor over the text to see the exact time being referenced.
04. Update on connection
The component can use that new method to set the time on the element as soon as it appears on the page. Customised built-in elements cannot have an attached shadow DOM. As there is no other setup required, the component does not need any constructor.
05. Check attribute changes
At the moment, if the page wanted to update the time programmatically, our component would not react. It does not know it should be watching for changes to the datetime attribute.
By defining observed attributes, the attributeChangedCallback will run each time one of them changes. In this case, the component can run the setTime method again.
06. Add to the page
The final result
As this element is an extension of a built-in element, the implementation is a little different. To use our new element, create a <time> tag with an extra is attribute. This should match the name given when defining the component. For browsers that do not support customised built-in elements, they will display the fallback content that is inside instead.
Next page: Tools and frameworks to try
01. LitElement
LitElement provides helper methods and classes to create web components
Spearheaded by Justin Fagnani at Google, LitElement aims to supersede Polymer Classic as the premier approach to web components. It provides helper methods and classes to create web components, without the required boilerplate setup. It has dramatically increased in popularity since its first stable release in February 2019.
02. Stencil
Stencil is a compile-time tool from the Ionic framework team. It will analyse each component, optimise it as best as it can, and return a version that can be used across different browsers and frameworks. It includes added behaviour such as JSX, which handles data binding like a React project.
03. Vue web component wrapper
While the Vue framework can work with web components without issue, using an existing Vue component as a web component elsewhere is trickier. This library will wrap the single-file component and map all the necessary bindings automatically, or the Vue CLI can take care of all the heavy lifting.
04. Angular Elements
Similar to Vue, there is another wrapper to allow web components to be created using the power of Angular. The createCustomElement function links the APIs used with custom elements with the equivalent Angular syntax. Add this as part of the application bootstrap process and the rest is taken care of.
05. Skate
Skate works with other templating languages
By providing guidance alongside a thin layer on top of existing native functionality, Skate can provide great benefit with a smaller footprint than other libraries. Much of this comes from the ability to work with other templating languages like Preact, and drop in modules for additional functionality, such as server-side rendering.
06. Svelte
Svelte compiles its components into regular JavaScript and avoids shipping a runtime like other frameworks, which results in smaller files. While not required, Svelte components can be built as web components without needing any external tools. Define a tag name in the module configuration and Svelte will do the rest.
07. X-Tag
X-Tag is useful for tying components with those in other frameworks
The X-Tag project has gone through many iterations over the years. Now, this Microsoft-backed library mirrors much of the custom element specification, with its own approaches to style and templating. It is particularly useful when needing to support older browsers, or when tying components together with those in other frameworks.
08. Slim
While Slim is a relatively unknown library, it provides added functionality, such as one-way data binding and automatic re-rendering out of the box. It's fast and small too – weighing in at only 3.4Kb gzipped. Other directives can be dropped in as and when they are needed to keep things lean.
Feel the benefits of web components right away with these elements.
01. Wired
Wired can help you mock up a page quickly
Most sites and applications go through several iterations before becoming a finished product. A lot of these start life as a prototype sketched on a notepad, or created inside a graphical application. Wouldn't it be better if these lived inside the browser to get an idea of how it works in the real world?
Wired is a set of web components that generate an interface with a hand drawn look using rough.js under the hood. Buttons, inputs and more are ready to be dropped in where needed and linked up for basic interactions to mock up a page in no time.
02. Material Components
These components are a work in progress
The team behind Google's Material Design pattern already have an implementation for the web. Currently, they're working to have them consumable through web components to be dropped in without extra configuration. Complex patterns such as tabs and drawers have been created with more on the way.
03. Brightspace UI
The company behind the Brightspace learning tool has made a set of its components open source for all to use. These include buttons, tables and inputs all with a focus on performance and accessibility. Any bugs the team come across are fixed and pushed out to help anyone else using them.
04. Vaadin
These pre-built components can help get you started
The Vaadin platform is a set of pre-built UI components ready to be used to create an entire application. There's plenty available to help you get off the ground, including grid layouts, tooltips and progress bars. The paid-for pro components also include charts and text editors, configurable for all needs.
05. Animated Content Placeholder
Skeleton loading is a great way to improve perceived loading times. They act as a placeholder for incoming content that may take a while, such as a news feed or gallery. This component builds out a skeleton by using web components as the building blocks to mimic the loaded state.
06. Gluon-font-awesome
This is a lightweight wrapper around the popular Font Awesome icon library. Icons can be dropped in using a <font-awesome> tag, while the component handles the importing and loading of the font awesome library. It is built using Gluon – a lightweight framework providing convenience on top of native custom elements.
This article was originally published in creative web design magazine Web Designer. Buy issue 287 or subscribe.
Read more:
-
You're reading Startup – 40 New Ecommerce Designs, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook!
One of the most asked-for feature requests is e-commerce predesigned blocks, so we immediately started work. Here we have 40 absolutely new designed blocks that are ready to use in the Startup app! We tried to create every type of …
-
Intel issued patches for a high-severity flaw in its processor diagnostic tool as well as a fix for a medium-severity vulnerability in its data center SSD lineup.
-
Amazon Prime Day is now just days away, but as the company get set to release some epic Prime Day deals, Walmart is already spoiling us with some incredible offers. And this Corel PaintShop Pro 2019 deal is no exception.
A professional photo editing tool, PaintShop Pro is a quality and affordable Photoshop alternative for creatives working with the Windows OS. Each feature in PaintShop Pro has been inspired by user ideas to help deliver a set of highly productive image editing tools. Now just $40 for the entire suite, PaintShop Pro is a great option for novices or creatives who want to create attention-grabbing imagery but don't require the complexity found in (or want the subscription rates of) Photoshop.
Key features of PaintShop Pro include:
- Enhanced performance, speed and quality
- New brushes, colour palettes, gradients, patterns
- Picture to painting presets
- Retro and vintage tools
- Photo restoration
- Graduated filter tool
If you're not in a region with access to Walmart deals, never fear, here are the best PaintShop Pro prices in your area:
Read more:
-
The software giant also addressed 15 critical flaws and advised on the recently disclosed Linux Kernel "SACK Panic" bug.
-
The vulnerability can be exploited on a drive-by basis by a malicious website.
-
When you think of street art, chances are you imagine eye-catching images sprayed onto the side of a building. However, an Italian design agency has given the medium a technological twist by using a team of drones to spray-paint a giant mural in Turin.
We've seen plenty of stunning murals over the years, but none of the masterpieces on our list of inspirational street art has been created by a swarm of drones. And while this isn't the first ever piece of street art to be painted by drones, it's certainly one of the most impressive.
Curated by innovation and design firm Carlo Ratti Associati as part of the brilliantly named Urban Flying Opera (or, to use its acronym, UFO), this project relied on over 1,000 sketches contributed by artists from the local community.
These artists were asked to illustrate their hopes and ideas regarding what cities should look like, and their thoughts were whittled down to the 100 drawings that would eventually get spray-painted onto the mural by the flying graffiti machines.
Measuring in at 46 feet wide and 39 feet tall, the mural features drawings in three different colours that are layered one on top of the other.
The drones, which were supplied by Tsuru Robotics, were carefully controlled by multiple position monitoring systems to ensure that they didn't fly into one another and ruin the mural.
As for the sketches, these were uploaded to a central computer before being relayed as controls for the drones to follow. The result is a unique piece of street art that took 12 hours to complete.
"The city is an open canvas, where people can inscribe their stories in many ways," Carlo Ratti Associati founder, Professor Carlo Ratti, told New Atlas. "Such processes have always been happening; however, with UFO we tried to accelerate them, using drone technology to allow for a new use of painting as a means of expression."
Related articles:
-
Creating creature designs and art in general is like a sport. You need to practise and train if you want to improve. When you draw every day and have thousands of used sheets of paper and sketchbooks, you learn some tricks to make the process a little easier.
Draw everything: you’ll get faster and your brain will become a database full of references. There are also a few basic tips you already may know, but it’s good to go over them again: things like contrast, shapes, lines of action, movement, perspective. Put all of these techniques together and your creatures will look alive and be full of personality. For more on process, see our post on art techniques. Read on for my top 15 tips for creating better creature designs.
And if you want to read more about characters in general, check out our character design tips post.
01. Draw quick thumbnails
Create simple silhouettes to get started with your creature design
Drawing quick and simple thumbnails is a helpful warm-up exercise. There are a few things to bear in mind, though. I always try to keep the design simple; the silhouette needs to be easy to read. I use a solid colour and sometimes I draw over it with a darker colour tone. In this case I’m concentrating on creatures, which means I’m free to create different shapes, combining object, animal and human elements.
02. Don't forget references
References are vital to designing creatures
If I don’t feel inspired to draw then I’ll look around for some references. In this case, I’ll search for objects that I can either use as part of a creature, or just act as a launch point to galvanise me into action. My main reference sources are mythology, animals and nature and so I’ll draw some objects (African masks, runes, a cauldron…) and some animals. My sketchbooks are full of such doodles and they can easily end up being part of a figure design.
Need a new sketchbook? Check out our guide to the best sketchbooks.
03. Use basic shapes
Simple shapes can become complex characters
What if I start with basic shapes to create my character? All of them can turn into a creature, right? You might think this is a limitation, but it also forces you to be extra creative. This approach can be a good method for designing a squad of characters that work together, like superheroes. These shapes are just one way to start your designs. Sometimes I break the silhouette by adding elements, or I leave some empty spaces.
04. Combine basic shapes
How a basic shape design can develop into a creature
This approach can lead to interesting results. One of my previous thumbnails is a blend of triangles, circles and a rectangle. When I sketch over this basic form I can see immediately that it’s a one-eyed warrior hare carrying a shield and a candle. I start with a very simple doodle in greyscale and then add some details in the colour drawing. This breaks up the symmetry and make this character more visually appealing.
05. Draw without purpose
Put your references away and just start sketching
Another useful starting exercise is to simply draw without a specific purpose. And it’s important to me to do this without references. I don’t expect to create my greatest piece of art this way, but this can inspire future projects. Maybe I’ll pay attention to these sketches someday and fresh ideas will come to mind. It’s also a good exercise to banish the dreaded artist’s block.
06. Think about body language
Body language can convey a lot about a character
If you want your creatures to be expressive then it’s crucial to understand anatomy and body language. Combine these two key topics and your creation will feel more alive. I believe it’s vital to understand how bodies can express an emotion. You can obtain references from plenty of sources: study films, friends and model sessions; look in the mirror; or take some photos of interesting poses. This step is crucial. As a cartoon character designer, I tend to exaggerate these body expressions with more pronounced curves or shapes.
For more on anatomy and figures, see our guide to figure drawing.
07. Use lines of action
Straight lines can look dull, so experiment with curves and contrast
Using simple lines will define the movement of the creature. These are called lines of action. They’ll vary depending on the creature’s mood and activity. Straight lines can make your figure look boring or static, so I often use curved and contrasting lines because they result in more eye-catching body positions. It’s crucial to draw a range of dynamic poses, because they’re a useful way of testing your creature’s proportions and anatomy.
08. Keep experimenting
Try a number of different variants of a creature before settling on your final design
Maintain your creativity by revisiting older designs and producing variants that will work in that universe. Here I’m keeping the same basic shapes and proportions for the different versions. Colours and materials have an important role to play, too. What if, instead of leaves, he has crystal hair? Or maybe there’s a constant flame on the top of his head? These variations can enrich your original concept. Other options include changing the size, age or sex of the character.
09. Add contrast
Contrast is a basic concept that you need to bear in mind when designing a creature. This contrast can be between colours, shapes, objects and more. I make sure that I think about contrast in every stage of my designs.
At the sketching stage, when I draw some basic shapes, any contrast between them will be most obvious during this stage. One creature will be curvy, the other straight. This can be very rough – there’s no need for details.
Next, I work more on the sketch, adding details like the ropes and plants. You can enhance the personality of your creature by adding contrast to the attitude. In this case, a monster is happy carrying a very serious stone head. I’m also using contrasting colours for them, increasing the visual effect and making them complementary characters.
Colour and texture can also enhance contrast
The final step is adding additional details such as texture, shadows and a background. It’s time to paint them all. Texture will enhance personality and give the figures the spirit of adventure. The background is part of the story, so I add a path and some mountains inspired by Chinese art.
10. Add an object
You can tell a lot about a creature from the objects it's holding
An object can be a good way to further strengthen a creature’s design. These props can boost their personality and charisma, and can also enrich their back story. What are they carrying? And why? Maybe they’re carrying luggage, or they’re holding a lantern to light the path into a mysterious forest. Depending on what they have on their back or in their hands you can define their jobs or roles in your narrative.
11. Try different facial expressions
Use your own face as a reference when trying out facial expressions on a creature design
Body poses are of vital importance when showing a creature’s emotion, but so are their facial expressions. Both work together. Try some basic emotions like happiness or anger, then try less-common ones. By placing a small mirror close to your work area, or using your camera phone, you can use yourself as reference. Study how the facial muscles move. Essentially, eyebrows and mouth will do the most amount of work for basic fantasy creatures. Consider adjusting the ears while squashing or stretching the main shape of the head to accentuate these emotions.
12. Use perspective
Avoid symmetry if you can, as it's often dull
Another way to improve your creature designs is adding some perspective. Symmetry can be very boring, and a simple pose viewed from the front may fail to resonate with the viewer. So it’s important to work with depth and space, to give your creature a strong feeling of movement. Try different angles when you sketch your characters, and look for references if you’re struggling. With this creature, I’ve increased the stroke width in some areas that are close to the viewer to boost the feeling of depth.
13. Create a point of interest
With some simple lines defining a direction, you can create a point of interest in your drawing where you can focus the viewer’s attention. This visual flow leads the viewer’s eyes in the direction you want. You can even create different entry points and there are a lot of ways to achieve this. Faces and hands are very expressive, so concentrate your efforts here. Colour and lighting can also help. Increase the brightness or ramp up the saturation of the area that you want the viewer to focus on.
14. Tell a story
Props and details add context to your creature design
Does this creature have a back story? And how can you tell? The attitude and action of the creature will play an important role, even if they’re standing still or looking at something. The environment plays an important role, too. It helps to explain what’s happening to your creature. Adding some props and details in the background will support the story and give context to the figure’s personality.
15. Create an atmosphere
The colours in this piece add something extra
Lighting and colour are key tools to use when painting creature concepts. You must play with lights and shadows to create interesting and atmospheric environments. This will focus the viewer’s eyes to some areas of the drawing. Selecting a source light and applying the correct shades will enable you to highlight key parts of your design. Keep in mind that colour, lighting and shadows are only part of the story. Make the choices that will enhance rather then detract from your narrative. Carry out colour tests to see which ones work best.
This article originally appeared in ImagineFX, the world's leading magazine for digital artists. Subscribe here.
Read more:
-
When it first aired, The Simpsons was a groundbreaking piece of subversive pop culture. But even in its heyday the show never went as far as this fan's dark version of the programme's intro, which sees the famous family reimagined as downtrodden citizens in a rather depressing-looking Russia.
Thanks to its never-ending repeats, The Simpsons intro is probably one of the most well-known TV title sequences of all time. This makes it a perfect vehicle for parody, as viewers will be able to draw comparisons between imitations and the real deal.
This clip though, created by YouTube animator Lazy Square, takes things to a grim new level. Each beat of the title sequence is followed, but everything's off.
The contrast can be seen immediately. Gone are the distinctive silhouettes that were Simpsons creator Matt Groening's shortcut to good character design. Instead, Marge's tall beehive is tied down, and the jagged outlines of Lisa and Maggie are replaced with utilitarian, close-cropped haircuts.
The vibrant colours of Springfield are also gone, Marge berates the cashier in a dank convenience store, and Lisa is threatened by armed policemen for blowing her sax. Check it out below.
There are plenty of little details that will make you re-watch this video. Is that Bart getting beaten up by bullies in the beginning? And just where does Lisa disappear to in the end? As far as fan films go, this one is bleak.
Of course, the programme itself never shied away from taking a pop at Russia. Who could forget the scene where Lenin bursts out of his mausoleum growling "must, crush, capitalism"? Or the Eastern European version of Itchy and Scratchy, called Worker and Parasite?
However, The Simpsons has also come under fire in recent years for its stereotypical depiction of different ethnicities, such as the Kwik-E-Mart's tireless manager, Apu. Even a fumbled apology didn't get the show off the hook in the eyes of some fans.
So does this violent parody also cross the line? It's hard to tell from comments, most of which are written in Cyrillic characters. But if the 'like' bar is anything to go by (currently it stands at 32,000 thumbs up to 2,000 thumbs down), it looks like Lazy Square has hit a home run.
Related articles:
-
If you need to get serious in your designs, it's good to have a selection of great-looking serif fonts. Serifs are the sensible wing of typography; almost always pulled out for books and newspapers where long tracts of printed text need to be easy to read, they have a look and feel that we automatically associate with authority and class.
That doesn't make them boring, though; the variety of serif fonts available is absolutely huge, and while some of them are definitely suited to quietly maintaining readability in lengthy body text, others are a lot more visually arresting with plenty of potential for exciting font pairings. Here are ten of our favourite new serifs; they're all free to use on personal projects, and some can be used in commercial work too. For more fonts of different types, see our post on the best free fonts.
01. Grenze
Grenze is a full type system with nine weight plus italics
Created by Renata Polastri and Omnibus-Type and with a name that derives from the German for 'frontier', Grenze is a really useful typeface system consisting of nine weights, from Thin through to Black, with matching italics. It's designed as a cross between Roman and blackletter fonts, combining visual impact with classical readability, and while it's envisaged as a font for magazines, it could be put to all manner of creative uses. It's published under the SIL Open Font Licence, so it's free to use in all projects.
02. Isle Headline
Isle Headline has a sister font to take care of the body text
A clear and sharp serif type family in four weights plus italics, Isle Headline was designed between 2018 and 2019 by Måns Grebäck. It's intended for large-scale use such as headlines and titles; if you want the same look for body text then look no further than its sister font, Isle Body, which uses the same basic structure but with a softer look. Both fonts are free for personal use; head to Måns' site for commercial licences and to see his other fonts.
03. Saonara
Just the thing for those classy fashion spreads
For those projects that require a luxury look that positively drips class, get a load of Saonara, designed by Maxim and Denis Schepin of MADE Type. Inspired by the world of fashion, it's a gloriously elegant font with strokes that veer between whip-thin and super-chunky, with razor-sharp serifs to finish off the look. It's free for personal use, while a standard licence will cost you just $16.
04. Coachella
Coachella's full of contrast and quirky touches
Another font from MADE Type that's free for personal use, Coachella is a contrasting serif font family in six weights from Thin to Black. In the heavier weights the contrast between line widths across the font is even more extreme than in Saonara, but the look's a lot more approachable; we love some its quirky touches such as the terminal on the lower-case 'a' and the triangular tail on the upper-case 'Q'.
05. Red Delicious
Red Delicious is a tasty, full-bodied font
Dan Zadorozny is a designer who's been creating fonts for the past 20 years, all of them free for personal use and available for commercial use in return for a $20 donation. His site's well worth looking through for typographic goodies; a recent offering that caught our eye is Red Delicious, Zadorozny's take on the classic varsity font often used on sweatshirts and the like. It features slightly rounded serifs to give the characters a full-bodied feel and weight, and comes in 25 different versions, each with an extended Latin character set.
06. Melisande Sharp
For a less formal serif, try Melisande Sharp's hand-drawn style
Serif fonts are often used as a visual shorthand for authority and gravitas, but Melisande Sharp, a hand-drawn serif by Brittney Murphy, is one that's a lot more fun to be around. It has some really eye-catching touches to it, such as the pot belly-shaped bowl on the lower-case 'a' and the incredibly high crossbar on the 'f', all of which combine to give this font a fantastically lively feel. It's free for personal use; for most commercial uses there's a standard licence that'll cost you just $8.
07. Halibut Serif
Halibut's serif's look like they might bite
There's nothing fishy about Halibut Serif, an open-source display and paragraph font from Colllettivo. It's another lively free serif font that comes in three weights – Regular, Expanded and Condensed – each packing in 234 glyphs. We particularly love Halibut's sharp, toothy serifs, which look like they could bite your hand off. Like all of Colllettivo's fonts, it's free to use on any project.
08. Libertinus Serif
Here's a great all-rounder in plenty of styles and weights
Linux fans will have doubtless noticed the resemblance between Libertinus Serif and Linux's Libertine and Biolinum fonts, and there's a good reason for that. Libertinus Serif is a fork of those fonts that addresses some of their bugs, and it's a classic-looking serif that comes in 14 styles to suit all manner of uses. Published under the SIL Open Font Licence, it's good for all applications.
09. Adega Serif
Adega Serif is beautifully old-style
Created by Brazilian designer Anísio Dega, Adega Serif is a print-focused font designed with books, newspapers and magazines in mind, and shaped to give maximum comfort to the reader. Coming on like a softer alternative to something like Book Antiqua, it features wonderfully tall ascenders and some beautifully hand-drawn quirks, and it comes in regular and bold weights with matching italics. It's available as donationware; if you get good use out of it then be sure to send Dega some money.
10. Afterglow
Dial the elegance up to 11 with Afterglow
To finish our round-up of 2019's best free serif fonts, here's Afterglow, a modern and classic serif typeface by Vintage Voyage. Full of contrast lines and with plenty of stylistic alternates, it's just the thing for retro-looking headlines with a bit of a 1970's feel, and it's free for personal use while a commercial licence is available for $14.
Related articles:
-
Instead of looking to the future, invoking the feeling of days gone by seems to be many brands' favourite way to engage customers. Brands are looking to associate themselves with the warm, fuzzy feeling that many get when thinking of their childhoods, and of course, capitalising on these feelings to get us to spend money.
Nostalgic branding doesn't mean relying on old forms of advertising, such as print campaigns, though (see our favourite print ads here). Brands can use cutting-edge technology to invoke the past.
Can nostalgic branding ever go too far? Will customers eventually see through it? While there are many examples of brands who've looked to the past when creating their logos and branding (see our how to reawaken a brand's heritage post). Here, we take a look at five brands that hit nostalgia hard through their adverts, and evaluate their success.
01. Hovis
Hovis has taken nostalgia to the next level by re-running a much-loved advert from 1973. The 'Boy on the Bike' advert has been voted Britain's most iconic and much-loved advert, and recently returned to TV screens after 46 years. The advert was directed by Ridley Scott and has been remastered for a 2019 audience.
This seems like a smart move from Hovis. If your greatest advert is still so popular and loved almost 50 years later, then why not rerun it? Those who remember it from the first time round will enjoy reliving it, and it'll also reach a new audience.
02. GWR
If Enid Blyton's books felt old-fashioned to many 20 years ago, they're arguably now at peak nostalgia. To invoke this spirit, adam&eveDDB created this campaign for Great Western Railway, which shows Blyton's Famous Five having an adventure across the South West's rail network. The campaign won a Graphite Pencil at D&AD Awards 2018.
It's beautifully illustrated, and animated. Sadly, it's hard to feel very nostalgic or warm and fuzzy when your train's delayed for the third time in a week. Still, at least the illustrations are nice to look at.
03. Halifax
Before Halifax's recent rebrand, the bank had a series of adverts focused on characters from the past, including Scooby-Doo, Ghostbusters, Top Cat, The Wizard of Oz and The Flintstones.
These ads were created by adam&eveDDB and showed the characters interacting with people at Halifax bank. The Top Cat ad, in particular, was mocked, as in the ad, the character gets a mortgage in order to live in a slightly bigger bin than before – a pretty odd living situation for a bank to be advocating.
It does make sense that a bank would try to tap into feelings of nostalgia, particularly when high-street banks are increasingly being left behind by 'millennial banks' such as Monzo, and the threat of crypto currency looms.
Post-rebrand, Halifax is still drawing on nostalgia, albeit in a slightly different way. Its latest ad involves a slinky. So looking to the past is clearly still working for it.
04. Microsoft
When your product feels a little outdated, and people associate it with the '90s, it is it best to just roll with it? Microsoft seemed to think so when they released this '90s-tastic advert for Internet Explorer in 2013. It had the tagline: 'You grew up. So did we. Reconnect with the new Internet Explorer,' and invited people to visit thebrowseryoulovedtohate.com (now defunct).
The ad above has all the '90s paraphernalia you forgot you loved, including Trolls, tamagotchis and wallets on chains. So far, so nostalgic. The catch? With this sort of association, it's easy to lump IE in the same category as all the other long-gone products. If IE is as grown-up as it says, why does it want to place itself in the same category as pogs?
05. 7UP
Another brand bringing back an old character is 7UP. Its latest campaign involves Fido Dido, 'the original chiller', and encourages people to 'put the chill' back in their lives.
Fido Dido was created in 1985 and reached popularity in the '90s, and is one of those characters that a lot of people had pretty much forgotten, until now. The ad above shows Fido Dido trying to interact with the modern world, only to find that everyone in it is so busy looking at their phones they don't notice him. This focus on how we've lost real-life interactions is an interesting one for brands to tap into, and we've already seen it subverted by the likes of mobile company Three. Although this 7UP ad is pretty cheesy, it gets the message across well.
Read more:
-
Around the start of this decade, a round-up of "best website designs" would have be dominated by big budget creations, full of clever tricks, beautiful animations and wow-factor effects. But the world has moved on since then.
With so much of the internet's commercial activity having shifted from websites to social media, innovative web design is less about showing off and more about quietly delivering great user experiences. And this more often to be found in smaller projects, online experiments, and sites built for fun, than in slick and polished corporate work.
In this post, we look at six websites, all launched this year, which may have gone under your radar, but which nonetheless showcase some inspired and innovative approaches to web design. Plus we hear from their creators about how they were put together, and what they've learned as a result.
01. Phil Coffman
Coffman has redesigned his blog to look more like a traditional journal
If we had a pound for every time we’ve heard a web designer say “I really need to get around to redesigning my blog,” we’d be millionaires. So hats off to Phil Coffman, a designer living in Austin, Texas, for actually dong so. But a bonus, he’s done a spectacularly inventive and original job of it too.
Combining handwriting and newspaper cutout-style type, with an earthy background that resembles ageing, physical paper, this is one of the best blog designs we’ve seen in years. And that’s partly a testament to the amount of work Coffman put into it.
“This design follows many previous failed attempts,” he admits. “Designing for myself is possibly my least favourite thing to do. as I struggle massively from indecision and unrealistic expectations I place on myself. In the end, this concept won out because I wanted to dive back into textures, hand-drawn elements, and an overall art direction that’s more of a personal journal than a polished publication.”
"Once I learned Neue Haas Grotesk was available from Adobe, Miller came quickly after as the two fonts pair really well together," says Coffman
Putting the concept into action also involved some technical challenges, he adds. “It took a bit of trial and error to get the textured effect looking the way I wanted on the post titles and black lines,” Coffman explains. “I knew CSS had the ability to use text as a clipping mask but I hadn’t spent much time digging into how to properly pull it off.”
Once he’d worked through the steps of applying the correct combination of CSS declarations, he faced the challenge of sourcing and prepping the right mix of textures. “This required finding textures with the right amount of wear and personality without causing issues with text legibility," he notes.
The image lock-ups were also a "fun challenge" for Coffman. "I landed on using CSS Grid to establish the skeleton for the markup, fiddling with the grid template to give me enough flexibility with positioning the figure and figure caption, while maintaining the same aspect ratio from the mobile layout to desktop.”
Coffman chose Professor as the handwriting font. "It's legible but also has great ligatures and looks like it could’ve been written with a blue pen in a journal", he explains.
For the typography, he settled on Neue Haas Grotesk for the titles and smaller sans-serif elements, Miller for the body text and Professor for the hand-written script.
“The key to this concept is the interplay between the hand-written font and sans and serif fonts,” he explains. “I felt that in order for the hand-written font to work I needed a sans and serif which were more straightforward or familiar, rather than ones which had a lot of personality of their own.”
02. The Boolean Game
This fun game teaches you how to use boolean operations in Adobe Illustrator and other vector tools
The Boolean Game is a fun browser game that teaches you how to use boolean operations in Adobe Illustrator, Sketch, Figma, and other vector editors. Creator Mark MacKay explains how it came about.
“I've been building design games for some years now, and I subconsciously collect things which I find challenging to convert into educational games,” he says. “This idea had been floating around for some time, and then I saw paper.js had a library to perform them: mathematically it's well beyond my ability. So I did a quick test and saw that it could be fun.”
While paper.js does the heavy lifting of the vector work for the site, MacKay also used anime.js for the animations, growler.js for the sound, and d3-color to manage the colour scheme.
MacKay used paper.js, anime.js, growler.js and d3-color to build the site
The main technical challenge was making it work on all devices, from phones to desktop, he continues. “This proved to be immensely challenging because you have to resize vectors and change the layout depending on the orientation. If I had chosen a fixed seen size, it would have probably taken me one month instead of three to get the project out the door.”
And interestingly, those three months taught him some important lessons about using dev tools.
The main challenge was making the game work on all devices
“The development ecosystem is optimised for very different things than what a solo creative designer-developer needs,” he explains. “It's as if you had the task of building a bridge and it's just assumed you'll have crane operators, pre-built concrete structures, steamrollers and so on. But if you simply need people to cross a stream, a simple hand build wooden structure will do.
“I say this because I used to feel inadequate for not knowing React, NPM, testing, ‘best practices’, etc. Now I understand I must optimise for my own flow and enjoyment. Dev tools and practices tend to be oriented towards reliability, collaboration and modularity, which are very different constraints.”
03. The Gyllenhaal Experiment
This site uses Reddit data to visualise how bad we are at spelling celebrity names
One of the best examples of data visualisation we’ve seen in some time, The Gyllenhaal Experiment is the brainchild of Russell Goldenberg and Matt Daniels of digital publication The Pudding.
“We’d seen this story about Colin Morris' analysis of self-identified Reddit misspelling,” explains Goldenberg. “And thought there was more that could be done with the idea of visualising the flow of how people spell.”
“We honed in on using celebrity names such as Jake Gyllenhaal, since they were quite prominent and not something in your typical spelling bee. We also knew we wanted to make something interactive to see real-time feedback of the spelling flows, so we fused those thoughts together to create a spelling bee-esque interactive visualisation."
The creators want to make something interactive, that showed real-time feedback of spelling flows
The pair relied on JavaScript and primarily the D3.js library for most of the visualisation, as well as using Firebase for the storage of user results.
“The biggest challenge by far was rendering the flow diagrams,” says Goldenberg. “Although it is technically a sankey diagram, we had to do a lot of custom stuff to get the paths rendering properly and not overlapping.”
There were lots of user flows to consider, from different ways to answer a question, to handling different states
In the course of building the site, the biggest surprise was learning quite how many different ways people spell names. “There were over 800 ways people tried to spell Matthew Mcconaughey for instance.
"From a development standpoint, there were lots of user flows to consider, from all sorts of variations to how they could answer a question, to handling different states (eg. did they return to the site having already answered?). Knowing all the possible states ahead of time was crucial to the development and design going smoothly.”
04. JSConf 2019
This conference site focuses on the fundamentals, and does them brilliantly
It's a real headache for web conference organisers. You don't want to spend your whole time working on your website when you could be focusing your energies on planning your event and making it the best you can be. But stick up a simple cookie cutter site, and people are going to wonder how much you know about the subject your conference is discussing.
Somehow, the organisers of JSConf EU seem to have squared that circle. Because not only is their conference universally praised and admired, but their website, which is built on the static site generator wintersmith, is pretty amazing too. Not because it's full of clever tricks - it isn't - but because it focuses on the fundamentals and delivers on every front, from ease of use to the relevance of its content.
Malte Ubi has putting everything into making this "the fastest conference website in the world"
Plus it's fast – super-fast. As Malte Ubl explains in this blog post: "I’ve spent a completely unreasonable amount of time trying to make it be the fastest conference website in the world." (He's not sure if he's succeeded, but so far no one has invalidated his claim).
It helps that Ubi is the creator of AMP, a web component library for making reliably fast websites. He's used the jSConf website as his playground to try out new techniques; and they certainly seem to have worked; the site works beautifully on every device we've tried it on.
You can take a deep dive into the clever ways Ubi has achieved this, from optimising font performance to dead code elimation, here.
05. Design Titles
This hilarious site parodied nonsense job titles with effortless precision
Who says web design can’t be fun? Not Xtian Miller and Boris Crowther, who’ve created this hilarious job title generator, Design Titles, which parodies some of the sillier monickers some web designers seem to go under these days.
Design-wise, it’s not a complex site: it does one thing and does it very well, and there’s an awful lot to be said for that.
“It really started as an inside joke,” explains Miller. “For better or worse, titles within the creative industry have developed a mercurial nature, causing inconsistency in their definition as they continually evolve.
The site was built on a foundation of static HTML, CSS, JS, Gulp and Sass
"As a result, many designers have gotten creative with their titles to sound more relevant or to avoid being pigeon-holed. The official titles don’t cut it, so they’ll come up with pseudo ones for their portfolios and social bios. The real goal of the website was to create a visual, fun way of getting this long-standing joke out of our system.”
The site was built with static HTML, CSS and JS, with Gulp for development workflow automation and Sass for CSS preprocessing. The generator function and algorithm were made entirely from scratch in Vanilla JavaScript.
The biggest technical challenge was getting the algorithm of the shuffle function just right, adds Miller. “We had to continually tweak it to a point where it wasn't too repetitive, and you had as good a chance of getting a perfectly normal title as you did an absurd one. The more you use it, the more ludicrous (or serious) it gets. It may look simple, but it took a lot of testing to finesse the algorithm.”
The biggest technical challenge was getting the algorithm of the shuffle function just right
Looks-wise, the duo we were inspired by the International Typographic Style, but more specifically Vignelli's NYC subway design system for layout and typography.
“When you go all in on that style you're somewhat aware of the influence, authority and objectivity behind it, which we felt was ironic for this whole concept,” says Miller.
“We wanted the title to be as obnoxiously large as possible - fitting the viewport - to emphasise its importance, and used modern colour pairings for impact and variety. The colour randomisation was a simple solution to take away the monotony of shuffling, and it sort of goes along nicely with how each title carries its own persona.”
06. Captain Marvel
We never realised how much we missed neon colours and cheesy fonts
The latest Marvel movie, Captain Marvel, takes place in the 1990s, and so this hilarious promotional site perfectly recreates the look and feel of what the web looked like in that decade.
Younger people may be shocked by how basic and clunky it looks, but those of a certain age will get a nostalgic rush to see the neon fonts, cheesy animations, bad photo crops, guestbook and hit counter, which all used to be part and parcel of early website design.
There’s even an authentic 'Spot the Skrull' game that asks you to decide whether someone is a human or secretly a shape-shifting alien in disguise. Yes kids, this was what cutting edge movie promotion in the late 20th century was all about.
We love that there's a counter and guestbook!
Of course, under the hood, the site is not totally authentic. While Marvel's director of software engineering Lori Lombert joked that "We built this in FrontPage and host it Angelfire", it's actually been constructed using modern CSS and JavaScript, so a 1995 browser like Netscape Navigator wouldn't have known what to do with it. Not to mention that its 10MB size would have taken forever to download on dial-up via a screechy AOL modem.
That said, for anyone who remembers the thrill of watching their first web page download in the 1990s, this is a real treat. Parody is something that might look easy, but is actually incredibly hard to get right. So for Lombert and her team to absolutely nail the little details in this way is a great achievement, and reminds us in these days of soulless digital utility that the web can still be a fun and anarchic place.
Read more:
-
The Adobe Creative Suite is and probably always will be ubiquitous in the creative field. Its tools remain the gold standard for graphic design, photo manipulation, video editing, and more.
If you want to make the most out of every app, you can rely on the Complete Adobe Mastery Bundle to show you the ropes.
Across 11 courses and over 70 hours of premium training, you'll explore and master the functionalities of the top Adobe programs, including: Photoshop, Premiere Pro, After Effects, and Lightroom.
You'll also learn how to transform dull photos into dazzling imagery, create compelling videos, design marketing materials, and lots more. By the time you finish, you'll be able to apply these skills to your own creative endeavours.
Normally valued at $2,189, you can get the Complete Adobe Mastery Bundle today for only $39 - that's a saving of 98 percent.
Related articles:
-
Want to learn to take better photos? Photography skills are important whether you're a blogger, a graphic designer, an entrepreneur, a journalist, or even just someone who wants a better Instagram feed. Luckily, the Canon DSLR Photography A-Z Course can teach you everything you need to know in order to take better snaps.
Whether you have zero experience with DSLR cameras, or you've already been a photography enthusiast for years, this technical guide to mastering your Canon DSLR will help take your images to the next level. The course is taught with a Rebel series camera, which is among the most popular cameras for beginners.
However, you don't need to own a Canon Rebel camera in order to learn something from this course. The course covers everything from exposing your photos properly to mastering the different focus levels and shooting modes. You'll be snapping like a pro in no time at all.
Get The Canon DSLR Photography A-Z Course for just $10.99.
Related articles:
-
As Amazon gears up for its biggest event of the year, we're already seeing some of the best Prime Day deals start to surface. But with the main event not kicking off until next Monday, Walmart has decided to get things started a little early with some incredible deals of it's own. And this Apple iPad deal is one of the best we've seen so far.
It's not often you see Apple products discounted (especially Apple Pencil deals), so when there's an opportunity to save a whopping $80 on a brand new iPad, you don't want to hang around. You'll find details below on how you can currently get yourself a shiny new 9.7-inch, 6th generation iPad for less than $250. But hurry, these are going to fly off the shelves!
If you're visiting the site from outside of the US, here are the best same model iPad prices in your area:
-
If you’re looking to become a designer, this course is your one stop shop. That's because The Complete Learn to Design Bundle will help turn you from a beginner designer into a pro with its massive 65 hours of content.
With this bundle you’ll learn how to use some of the most important tools of the trade, including Photoshop and InDesign. Plus you'll take master classes in graphic design, as well as courses in graphic design theory.
And that's not all. You’ll also master the basics of typography, and you’ll even discover the best ways to go about logo design. By the end of this bundle, you’ll have learned graphic design from so many angles that you’ll be ready to embark on your design career.
The Complete Learn to Design Bundle can be yours, and best of all, you can pay what you want for it!
Related articles:
-
Google Project Zero finds Apple iMessage bug that bricks iPhones running older versions of the company's iOS software.
-
A tablet that you can wear on your wrist and neatly fold away into a screen the size of a watch face might sound like the sort of madcap device you'd expect to find in The Jetsons. But that's exactly what IBM has in mind according to a recently unearthed patent.
Of course, foldable screens aren't a new idea. However early efforts include some notable failures. Just take Samsung's Galaxy Fold, which failed to make our list of the best smartphones for creatives. That's because reviewers reported faults with the phone's foldable screen just days after use. Not what you want for a device that sets you back $2,000.
IBM clearly isn't deterred though. In a patent discovered by the clever folks over at Let's Go Digital, IBM lays out plans to go a step further than Samsung as it outlines a prospective smartwatch-cum-tablet.
You can check out the patent here, and see how IBM refers to a 'variable display size for an electronic display device'. In plain English, this means a display that can be expanded or shrunk down, depending on your needs. There are also diagrams that display how the device could function with one, four, or even eight connected screens.
Let's Go Digital used these plans to mock up up how the displays would look, which you can check out by clicking left to right in the gallery below. If you've always wanted to have a phone or tablet-sized screen manacled to your wrist, this could be the device for you.
Each screen measures 2 x 3 inches. This means that at its maximum size, the eight-panelled wrist tablet would measure a whopping 12 x 8 inches.
It might look a bit absurd to us now, but who knows, if IBM is capable of creating such a device, maybe it'll become the new norm before too long? Alternatively, it might always look a bit naff and obtrusive, like when someone tries to take a photo by holding up an iPad.
As is the case with patents, there's no certainty that this device will become a reality. Although it is an intriguing glimpse into where the information technology company could take us. And considering that it's breaking new ground with its quantum computing initiative, IBM Q, if anyone can make a foldable wrist tablet work, it's IBM.
Has IBM's patent has got you desperate for a smartwatch? If so, why not head on over to our guide to the best Apple Watch deals. Here you'll find the latest Series 4 Apple Watches at discount prices, alongside Series 1, 2 and 3 models. And if you're after more bargains on creative tech, be sure to check out our page dedicated to the best Prime Day deals.
Related articles:
-
One point perspective is a type of drawing created on a 2D plane that uses one point in the distance from which everything in the drawing is set out. It was first discovered during the Renaissance, and was art’s version of going from acoustic to electric, such was the huge and lasting impact it had on the discipline.
Using perspective is a key art technique that allows artists to represent images of rooms, letters, cities or buildings, with depth and volume on a flat surface. The results of a one point perspective drawing can often look impressively complex, but actually, the process is surprisingly simple, provided you follow a few key principles.
The basics can be expanded upon easily, so once you have a solid foundation in drawing one point perspectives, the possibilities are endless. All you need to know, from drawing simple shapes to writing your name in 3D, is outlined below.
To brush up on other key things you need to know about art, see our posts on how to draw, and the Golden Ratio.
What is one point perspective?
So, what is perspective? Well, the eye perceives depth in the world all around us because of perspective, but while the world is experienced in three dimensions, it is hard to replicate this on a two dimensional surface, like a piece of paper. This is where the trick of one point perspective comes in. This is a mathematical way of representing a three dimensional image on a two dimensional surface, by using intersecting lines that all go back to the same point in the distance.
One point perspective is a pretty fool-proof way of creating a 3D image, where the image recedes away from you, so things get smaller the further back they go, just like in real life. By using just a vanishing point, a horizon line and a series of straight lines, you can create a realistic and complex rendering, which looks like it's 3D, in a number of simple steps.
In a one point perspective, the image or scene will be viewed face on, meaning that all of the planes facing the viewer are flat. If you wanted to draw an image that wasn’t being viewed face on, you would use a two or three point perspective, which has the ability to capture multiple angles, but we’re going to keep it simple with just one point here.
Why do artists need one point perspective?
Look at the way this painting by Canaletto – Grand Canal - Looking South-East from the Campo Santa Sophia to the Rialto Bridge – uses perspective
Illustrators, architects and designers of all stripes need to be able to represent their ideas on paper, and often employ perspective to do this. In terms of conveying a potentially complex idea to a client, who might not have any knowledge of the technical processes being employed in any given creative task, it is often useful to be able to show them a rendering of the building, room, object or car so they can get an idea of what to expect from the finished product. One point perspective is an irreplaceable asset in terms of being communicate design ideas to a client. And of course, it's very important in creating art.
One point perspective in art
One point perspective has been the most central tenet of visual art since its invention by Italian artist, architect and all-round Renaissance man Filippo Brunelleschi in the 15th century. It completely revolutionised painting, and no artist can escape the ubiquity of perspective.
Even in the most abstract paintings or drawings, there is often some sort of volumetric reference that will use perspective. One point perspective is seen in paintings by famous artists like Van Gogh, Leonardo da Vinci and David Hockney, to name but a few.
How to draw using one point perspective
The easiest way to figure out one point perspective is to make your own diagram
Drawing using one point perspective is actually surprisingly easy, once you know what you’re doing. There are few basic elements that you need to understand, namely the vanishing point, the horizon line and the frontal planes.
Starting with a piece of paper, a pencil and a ruler, draw a line horizontally across the middle of the page (1). This is your horizon line. Then draw a dot in the middle of the line (2). This is your vanishing point. Now, under the line, draw a square (3). Locating objects above or below the line will determine how the viewer perceives them - below the line, you’re looking down on the object, above the line, you’re looking up at it. This square is your frontal plane.
Take your ruler and draw a line from the vanishing point to all of the corners of the square (4). This is how you will construct everything in your one point perspective, by taking lines from certain points in your frontal planes back to the vanishing point. To turn your square into a cube, draw a horizontal line and vertical line as far back as necessary (5), and hey presto! You have completed the first step in your mastery of one point perspective. Notice how the shape gets smaller as it gets closer to the vanishing point. This is perspective!
Draw a room using one point perspective
Look at the way the lines on this room point towards the vanishing point
Drawing a room interior relies heavily on one point perspective, and interior designers and architects produce these kind of drawings all the time. Draw a rectangle on the page which will act as the back wall of the room, and then decide where you want the vanishing point to be. This will determine the angle that the room is being viewed from. Let’s view it at eye level, so put it two thirds up from the bottom middle of the rectangle. Create the volume of the room by bringing lines from the vanishing point through the four corners of the rectangle.
Laying out a floor pattern is a good way to practice drawing perspective. Divide the bottom line of the rectangle into even segments and bringing lines through them from the vanishing point to the edge of the page, and you will see a pattern emerge. Repeat the steps used in drawing the cube to create tables, chairs, doorways and windows, and you will begin to see how using a series of simple rectangles and squares will allow you to build up elements in a room.
Draw a city with one point perspective
Draw a road first and then build your city from there
Drawing a cityscape is similar to drawing the inside of a room, in that you will be using simple rectangular volumes to build up your image. Cityscape perspectives can be as simple as a basic sketch, or as complex as a detailed technical drawing, but either way, the rules are the same.
It is handy to use infrastructure, such as roads, streets and street lamps, as these are instantly recognisable elements of a city and can act as a base drawing from which everything else is developed. Again, simple squares and rectangles can form windows, balconies, front doors, pavements and road markings, and these drawings are a great way to whet the creative appetite of budding city painters or aspiring architects.
Draw letters with one point perspective
Drawing letters by hand is a great way to get to grips with one point perspective
Ever wanted to draw your name in 3D? Well now, with the one point perspective under your belt, you can! Drawing block letters is actually really straightforward, but involves perhaps a little more preparation because you need to set out the letters first.
To do this by hand, which is a great way to learn, get some graph paper and mark out the forms of the letters. Then bring lines from the corner of each letter through the vanishing point, and draw a horizontal line where you’d like the letters to end. Curves should be done by hand using the graph paper to achieve the correct proportion. Using colour can make the letters stand out more, so give this a go once you’re happy with them.
You can also try to write your name using one point perspective. This exercise is great for graphic designers wanting to get back to basics with typography, and is often how typographers thrash out designs for fonts.
Read more:
-
If anyone knows how to promote a product, it's Apple. Nowadays the tech giant's advertising is famous for its stripped back and straightforward aesthetic, but how would its products look if they were released a couple of decades earlier? That's what these spoof ads for the iPhone imagine.
These days Apple's personal device is a hit with creatives, thanks in no small part to the best iPhone apps for designers. You might even be waiting to pick up an iPhone discount with the upcoming Prime Day deals. But would the iPhone have made the same impact if it looked more like a calculator than the smartphone we know and love?
To give you an idea of what an '80s and '90s iPhone would look like, illustrator and designer Future Punk has created a pair of charmingly retro ads. In them, we see an iPhone with sticky push buttons and an off-white plastic case that will make computer users of a certain age feel overcome with nostalgia.
There's also a model that takes the bright and colourful iMac G3 and turns the design into a handheld device. Both iPhones are a tantalising glimpse into an alternative past, and will make you feel wistful for a time that never was. Check them out in action with the video below.
We salute the level of detail that Future Punk has snuck into these videos. The VHS warp effects and overdramatic voiceover all come together brilliantly to make these adverts feel like the real deal.
If you weren't around for Apple's early adverts, this promotional clip for its personal digital assistant, the Newton, will give you an idea of what might have inspired Future Punk. We couldn't help but chuckle at the monotone narrator, who points out that Newton "sends faxes, and soon, electronic mail".
To get a look at the two devices without the video effects, head over to Future Punk's Instagram page, where you'll find nice, clean images of the retro iPhones.
Have these iPhone concepts got you thinking that you need a new smartphone? If so, we've rounded up the best smartphones for creatives on the move. With devices in a range of shapes and sizes, you're bound to find a smartphone to suit your needs. Unlike the Newton though, they can't send faxes.
Related articles:
-
The zine aesthetic – both visually and conceptually – is the ultimate manifestation of ripping it up and starting again, the idea that formed the core of punk culture, post-punk culture (we have Scottish post-punk purveyors Orange Juice to thank for the popularisation of the phrase), and youth culture more generally.
What are zines?
The word zine is simply a shortened version of magazine, or more usually, fanzine, but in its snappier, four-letter form it has far more significant connotations. 'Zine' – at least, in its origins – speaks of bedroom activism, of punk, of the dissemination of ideas that otherwise may not be circulated: those around queer sexualities perhaps, or underground music scenes, or simply fandoms so niche there isn't a hope in hell of seeing them in print-titles-proper.
If you'd like to explore more examples of innovative design, check out our pick of the experimental design that's pushing boundaries.
These original zine covers are a celebration of the '70s slapdash punk aesthetic
The aesthetic most of us associate with zines today – a visual chaos of cut-and-paste imagery, deliberately scrappy approaches to layout, maelstroms of numerous different typefaces, strange photographic crops, hand-scrawled notations – exploded in the 1970s with the birth of punk. Vitriol and ebullience alike were expressed in print as hastily put-together pages that indulge in their underground, countercultural status; the most famous of which are Sniffin' Glue, Mark Perry's zine from 1976 to 1977, and its US peer Search and Destroy, published by V Vale between 1977 and 1979.
The slapdash punk aesthetics of the 1970s made their way back to the forefront of counterculture in the 1990s – evidence of the adage of the two-decade pendulum swing of certain visual trends, referred to in the fashion industry as the '20-year rule'. As the riot grrrl scene took off, spearheaded by bands like Bikini Kill, Bratmobile, L7 and Babes in Toyland, the trends of their '70s forebears emerged again in zines like Jigsaw, Bikini Kill, (founded by the band of the same name), and Girl Germs.
The Spice Girl's successful reunion tour proves the '90s are back
Though we're nearing the end of the 20-year cycling back to the '90s, it's safe to say the decade's aesthetics are well and truly back. Consider pool sliders, Ellesse, Kappa, bumbags, bare midriffs. The Spice Girls have embarked on a reunion tour (sans-Posh), and in January, Bikini Kill also announced a reformation tour – the band's first live dates in 22 years. What this '90s resurgence has meant for the world of design is significant. Today, 'authenticity' is king, and that critical youth audience is increasingly hard for agencies and brands to reach. Most of us of working age have little comprehension of the intricacies of design memes, or the nuances of Snapchat. Thus, that which has always been 'cool' – counterculture, punk, anti-establishment – creeps back into the mainstream.
Triggs explores the impact of zines in her 2010 book: Fanzines
The impact of 'underground' zine culture on commercial branding is nothing new. As Teal Triggs points out in her 2010 book Fanzines, in the 1990s, "it seemed that everywhere you turned faux fanzines were being published by large multinational companies. The fanzine as a graphic form was co-opted – moving from an authentic, edgy, political underground into the world above as an item now imbued with commercial hipness." She cites brands such as the Body Shop, which published the zine Full Voice as part of its 1997 ad campaign, and the Wieden+Kennedy-masterminded U Don't Stop zine for Nike in 1998.
Joy in imperfections
Dewar lent his DIY aesthetic to the cover art for Jessie Ware's Adore You and Overtime, and to Loyle Carner's album Waving not Drowning
Rory Dewar leads the artist content creative team at Virgin EMI Records. Having studied music rather than design, he's largely self-taught and has always gravitated towards the DIY aesthetic of zines. "That's definitely my personal style if I'm given free rein," he says. "Since I wasn't trained as a designer, it was always about what you could do with what was around you. That's why my work has obscene amounts of texture and is scanned five times… I love the imperfections that creates, which you don't get from just sitting on Photoshop." Dewar's lack of formal education in design brings something different to his output, as he doesn't 'follow the rules' a traditional education instills.
Aside from its use in actual zines, that DIY aesthetic is most prominent in work for music clients. "There's less having to convince them than with more corporate design projects," says Dewar. What he finds interesting about the resurgence in zine-style aesthetics is that today, it's likely inspired by things we see online rather than physical artefacts. "When I was younger, I was always making my own zines and I loved that we had loads of issues of The Face lying around the house, but I really got into zine culture through Tumblr – a digital thing emulating a printed thing."
Part of the resurgence of physical formats, Dewar reckons, is down to social media trickery. "When you have graphic design with crisp edges perfectly aligned, Instagram and Facebook know they're digitally created and lessen the reach. But if I, say, printed off tour dates and photographed it, there's more engagement. That's dictating how some design is being created."
The new indie mag scene
Mushpit is one of the independent mags that seems undeterred by the struggle of the print industry
Where the 'zine' mindset associated with the punkish ideals of the '70s and '90s is most alive and well is in the current, apparently unstoppable rise of independent magazines. Where larger glossies and bigger publishing houses are struggling, independent mag-makers seem undeterred. Through their independence, magazines like Mushpit, Migrant Journal, Voortuin, PC Erotic and so many more share the freedoms zines thrived on: they can take not only the editorial content, direction and political leanings into their own hands, but their own design style. Chaos can reign again: why not use 10 different typefaces? Who cares if the illustrations are those usually relegated to the sort of thing found in the margins of school exercise books?
The 'crazy' aesthetic of Mushpit is appealing
What's interesting is where that un-design style of design is appropriated by very much pro-designers: DIYas we know it has a new sheen. The production values of yore were simply the consequence of the means available to makers: Letraset, handwriting, photocopying and mimeograph were all readily accessible. Now, even the most basic computers can present far slicker outcomes.
"These days, the tools that people are using have become so sophisticated, literally anyone can make something that looks decent – InDesign shows you where to put things for equal spacing and so on," says Steve Watson, founder of magazine subscription service Stack. The ease of making something perfect, he suggests, is partly behind a number of publications emerging that are "a reaction against that; they don't want the perfect evenly spaced thing. They're trying to evoke some friction."
Where psychedelia meets punk
Designs for The Social, a two-storey bar in central London, by Insect
The beauty of zine style is that it can really mean anything that draws together numerous threads to create something visually exciting, and which pushes a message. As such, it's an approach that very much suits graphic designer and illustrator Luke Insect, who describes himself as "a bit of a magpie," inspired by the "original counterculture" magazines he inherited from his dad, such as Oz and International Times.
"I've always been into montage and cut and paste," he says, pointing out that while psychedelic mags ostensibly had a vastly different message to their punk descendants, the aesthetic and attitude isn't all that dissimilar. "'Peace and Love' is obviously very different to 'fuck Thatcher', but if you flick through Oz magazine, there's a lot of black and white editorial, anti-establishment stuff, weird little ads, cutups, badly chopped photos. Even in psychedelic zines, that cut-and-paste aesthetic is there, alongside the cheap printing and the technicolour, otherworldly covers."
Insect's metallic screenprint, Helter Skelter
He's excited by the resurgence in zines as a platform for creatives to get their work out into the world. "When we were setting up [illustration studio] Insect in the '90s, it was more about coffee table books. A couple of years ago we saw the rise of things like Risograph zines; suddenly we could have all these amazing things that cost £8 rather than spending £40 on a book."
A callback to the early '80s
When Haro Met Sally is Insect's music and art project based on skate culture zines
Insect is working on a zine for electronic music artist Damon Baxter [aka Deadly Avenger], which references post-punk and new wave zines of the late '70s. The piece is a follow-up to last year's When Haro Met Sally, a music and art project that comprised posters, cassettes and a record that boasted an aesthetic drawing on "California, hazy skate culture zines," says Insect. The new piece will be "colder and more UK-focused," with an insert in the form of a "fanzine that looks like it's from 1981."
Aside from the modern availability of more sophisticated, digital production means, Watson reckons the move towards a more obtuse, self-aware and ultimately fun style is also a reaction to the wave of calm, polished magazines that arrived with the likes of Kinfolk and Cereal in the early 2010s. While these were imbued with a sleek sense of pared-back sophistication, a certain maximalism and devil-may-care attitude to both tone of voice and visual language now abounds.
"People are trying to get away from the very minimalist, controlled, perfect independent mag aesthetic," he says. "You see these currents with everything, so maybe that's what people like Mushpit are responding to. That's how trends, and then counter trends, emerge. Now, people don't want that tidiness – they want to introduce more friction and craziness."
Is the rebirth of the zine a reaction against the calm, polished vibe of magazines like Cereal?
Dewar agrees: "There was a period when everything on social was perfect and Photoshopped. Now we want to see unfiltered messiness – the shit food people eat as well as the nice stuff. We want to know that people are working hard, and doing things themselves when it comes to artwork."
Not only are today's designers looking to printed zine cultures, but to a certain, very '90s-looking desktop publishing style: lurid colours, layouts peppered with clip-art-like graphics, and multifarious system typefaces. "We're seeing people deliberately making stuff that looks like it was created on Windows 98 or something, and people are doing that very well," says Watson. "That style is having a bit of a moment."
Definition of freedom
PC Erotic is a zine exploring the confluence of sex and technology
Indeed, the word 'zine' has long transcended its original signifier as a piece of strictly printed matter. For LA-based designer and art director Sam Jayne, the aesthetic is "about freedom within a defined space," he says. "That space could be defined by the limitations in printing, software, technical knowledge, colour, etc, and then freedom to communicate your thoughts in whatever way you, the producer, chooses."
One of the main exponents cited as embodying this 'crazier' aesthetic is Mushpit, which is art directed by Ben Freeman. Freeman, who worked at Vice in its early days and is the founder and creative director of Ditto Press (among a ludicrous amount of other projects), published and designed his first zine when he was aged just 12 in 1990.
The fonts and clip art used in PC Erotic are the same as would have been used in 2001
Last year, he collaborated with editor Iris Luz on a new publication, PC Erotic. Billed as "the future of sex you never wanted", the magazine explores the confluence of sexuality and technology. It's playful, often hilarious, and somehow rather beautiful – quite a feat considering Freeman and Luz went for a look that directly draws on 2000s and late '90s lads' mags like Nuts. Like many DIY zines from the era, as well as their commercial counterparts, the aesthetic is based around any and every font and piece of clip art you can find on the software you have.
Despite the incredibly sophisticated tools we have at our disposal to imitate a time when we didn't, such magazines align perfectly with 'traditional' zine culture, in that they exist purely because their creators wanted to put a message out into the world that wasn't there before. "There often isn't a commercial background, they don't exist for the person making them to make money, but because there's a set of ideas they want to communicate," says Watson.
'Selling out'
Counterculture found in zines is often too shocking for the mainstream
While the zine design style is undoubtedly one that best lends itself to cultural clients – namely music – Insect points out that aesthetics birthed in counterculture – sound, fashion and editorial – so often "drip feed" as "watered down" versions into more commercial applications, such as advertising campaigns or high-street brand T-shirts.
The notion of 'zines' however, is not just a graphic language or aesthetic, but an attitude. Zines are about self-expression, and authenticity of voice – an opportunity to speak openly and frankly about issues that may otherwise be muted or deemed too thorny, such as politics or identity or non-conforming sexuality. As such, zines themselves are analogous to a certain youth cultural spirit: they enable empowerment through dissemination of information.
PC Erotic is able to talk about more controversial subjects because its only answerable to one person: founder Iris Luz
The fact that zines were often created, edited, written and designed by one person is crucial: there's no one to answer to, opening the floodgates for experimentation away from hovering design directors and editorial censorship. It's that aspect, perhaps, that's lost in zine style's commercial manifestations, where such a voice becomes simply a way to market a brand or product.
If a zine's 'authenticity' lies in, as Triggs puts it, an authorial voice "where the personal is political and not beholden to global corporations," then it's interesting to consider that commercial brands or publications (which must pay heed to advertisers, a broad readership, and so on) aping zine style are inherently forgoing these tenets. Zine style, we could say, has since been mimicked to the effect of that ultimate antithesis to all things punk and youth culture – 'selling out'.
This article was originally published in issue 292 of Computer Arts, the world's best-selling design magazine. Buy issue 292 or subscribe to Computer Arts.
Read more:
-
How companies can identify their own insecure data, remediate data breaches and proactively secure data against future attacks.
-
A cross-site scripting vulnerability in WordPress plugin WP Statistics could have enabled full website takeover.
-
Web design has come a long way over the years, but this doesn't mean that it's perfect. There are still plenty of user interface issues that bug people when they try to fill out a form or sign up to an agreement. And it's these clunky UI headaches that get brilliantly called out in this parody site, User Inyerface.
We've already looked at what you should do when designing an online page with our guide to the perfect website layout. But if you're looking for something a little sillier, User Inyerface is an entertaining alternative that demonstrates the frustrating consequences of bad UI (you can also see our post on painful UI fails).
Created by Belgian digital product agency Bagaar, the disgustingly designed User Inyerface challenges visitors to complete a sign up form as quickly as possible. If you've ever filled in your details to get registered on a website, the questions will look familiar. However it's never been more difficult to submit your name, contact email and date of birth.
That's because User Inyerface bends over backwards to make the process as irritating and tricky as possible. Data fields require you to delete content before you type in your details, reCAPTCHA tests use vague and confusing language, and an intermittent pop up with a confusing button layout will pester you at every turn.
Weirdly, once you've got your head around what it's doing User Inyerface becomes a fun exercise in frustration. Just when you think it can't get any more difficult, it'll pull a confusing button or age slider out of the bag. And for web designers, the site will leave them wondering if they're guilty of any of its UI design sins.
If you power through to the end and complete the forms, you'll be greeted by a GIF of Carlton from The Fresh Prince of Bel-Air doing a dorky dance. There's also a link through to the Bagaar job page, which makes us wonder if User Inyerface is some kind of filtration process for a vacancy. (See our design jobs page if you are looking for a new design role.)
Either way, we managed to complete User Inyerface in a tortuous five minutes and fifteen seconds. Can you do any better?
Related articles:
'I amsterdam' sign returns with a powerful new message
in Ειδήσεις από τον χώρο του Design και Hosting
Posted · Report reply
The giant red and white letters of the 'I amsterdam' sign were a popular tourist destination in the Dutch capital, but they were controversially removed by disgruntled city officials in December 2018. However, the sign recently returned with a new message to help save something else that's vanishing, the Amazon rainforest.
If you visited Amsterdam before the removal of I amsterdam, you probably snapped a photo with the distinctive letters that were installed in front of the Rijksmuseum. The sign had become such a go-to selfie spot that selfie numbers probably rivalled those outside some of the world's famous buildings.
It's no surprise then that once I amsterdan was removed, people couldn't help but feel that something was missing. And it's this sense of loss that the new sign, 'I amazonia' taps into.
Created by Belgium advertising agency Duval Guillaume for environmental non-profit Greenpeace, 'I amazonia' raises awareness about the deforestation that's devastating the Amazon rainforest. See the full extent of the situation, which Greenpeace describes as the "rampant exploitation by industrial agriculture" in the video below.
In a blog post, Greenpeace explains why the sign was the perfect means to shine a light on the situation, beyond just tapping into people's affection for the old letters.
"With the inclusive 'I am', the message is also one of profound appreciation and respect for the Indigenous People and traditional communities who have not only been guardians of the Amazon for centuries, but depend on the forest for survival," it says.
"If the millions of people who took selfies with the 'Iamsterdam' sign would also take a stand for the most important landmark in Brazil and the lungs of the planet, and show their solidarity and support with the people and the forest in the Amazon, we could all make giant steps towards protecting one of our planet’s last climate solutions," the non-profit adds.
Want to do your bit to help? There's a petition you can sign here, which will tell the Brazilian government to save the Amazon Rainforest and protect the lands of Indigenous and traditional communities.
Related articles:
View the full article