Rss Bot
-
Content Count
15,159 -
Joined
-
Last visited
Never -
Feedback
N/A
Posts posted by Rss Bot
-
-
Concerns over data privacy and security push California to roll out the first legislation on connected devices.
-
Evaluating the success of user experience strategies in a project requires a deep understanding of why decisions were made and what core goals motivated the project in the first place. Purpose is what provides context to data. Without that context, the data you review is always going to be clouded with your own personal bias and assumptions.
It's why all of those impressive unauthorised redesigns of websites like Facebook that make the rounds every year mean absolutely nothing. Making something better is often based on opinion. I once worked with a user experience expert (self-proclaimed of course) that would frequently try to guide major decisions with opinions rather than quantifiable data ('I don't like using drop-downs in navigation').
User experience strategy is selfless. It's not about you or me. It's not even about the stakeholder in the department asking you to improve something. It's about the organisation's clients. The customers that spend their hard-earned money on the company's products or services.
User experience is about understanding their needs and assessing the best way to accomplish those goals with the resources currently available. You will never have enough time, enough budget or enough teammates with just the right experience to do something the way you may want to. So, how do we start this journey? Good. We're glad you asked.
01. Determine the purpose of the tests
Don’t let trends dictate the success of your website – pay more attention to the business goals
One of the most difficult aspects of effectively testing anything is understanding the purpose behind the request. Why are you currently being asked to test anything at all? In many cases the organisation only recently began to find value in user experience, likely driven by a past failure, but doesn't know where to begin.
Failure is a powerful instigator. Within the framework of testing it's inherently positive and one the most important aspects of what we're talking about here. It defines what needs to be fixed. It adds context and guidance. It's the bridge toward the success we're seeking. Failure can be recognised in its various forms: lost revenue, cancelled membership accounts, high bounce rates on landing pages, abandoned shopping carts, expensive marketing campaigns that don't convert or maybe a recent redesign that looks incredible but no longer generates as many leads.
We're going to let you in on a secret. It's going to make your job as a fledgling test facilitator better the moment you read it and accept it. Ready? The purpose of a test is not for you to determine. That's not your job. It doesn't matter what you want to test, nor does it matter how much better you think you can make that one thing. Being proactive is great but you need to rely on your team lead, manager or stakeholder on a project to set the purpose of a test.
If one of those people cannot provide adequate guidance, here's a quick set of questions you may ask them:
- What is the motivation behind wanting to conduct this test?
- Who is the customer you are trying to reach (age, gender, likes and dislikes)?
- What would you define as a successful result for this testing (any specific KPIs)?
- Is there a set date for when the success needs to be realised?
Once they can answer those questions you will have what you need to start.
02. Explore your tools
Chances are you will be using Google Analytics to capture and review data as it's currently installed on over half of all websites. In larger organisations you may run into New Relic, Quantcast, Clicky, Mixpanel or Adobe Marketing Cloud, among others. The platform doesn't matter as much as the strategy behind what you're doing.
If the organisation already has one of those solutions installed, you can jump in and look at data immediately. If not, it's worth installing one and collecting data for 30 days. If the website or application has hundreds or thousands of visitors each day, it's possible to start analysing data earlier than 30 days. Use your best judgement.
03. Establish your benchmark
Although the data adds contextual clues as to what is happening, remember that you only have one side of the story. You have the result: visitor came from site X, went to page Y, viewed product Z and then left after 36 seconds. But wait. What does that mean? Why did that visitor behave that way? You'll never know with this solution and that's okay. That's not the goal. We want to capture and report quantifiable data.
Let's walk through an example. Imagine you have a landing page with the sole purpose of lead generation (your KPI). The landing page requires a visitor to fill out a form and click submit. It could be to receive a free resource, sign up for a webinar or join an email marketing list.
When the form submits, send them to a confirmation page (or trigger an event for the more technically inclined). Track the number of visitors that go to the landing page and how many go to the confirmation page. That's your conversion rate. The first time you track that information it becomes your benchmark. This will be used to gauge the success of all future changes to UX strategies on this page.
If you change copy on the landing page to better address the needs of your customer and the conversion goes up, then you know that your change was a positive one. Easy, right? Everything you need to get started with benchmarking, regardless of the platform, should stem from that core model. It can be filtered by domain, geography or ad campaign. It's incredibly powerful and very easy to showcase change.
The most important aspect of showing success in UX strategies is the change in benchmarked data after you implement change. Data is the currency in which UX is funded. That goes for freelancers, agencies or departments within an organisation. Prove the value of what you're doing.
04. Start testing with a clear use case
Participants probably won't be familiar with your organisation, product or goals
One of the most difficult aspects of setting up successful testing solutions is to not fall victim to the villain of personal bias. It can creep in when you write a testing plan or when you review the data. So how do you craft an effective testing plan? It's all about writing simple tasks with a clear focus.
Test participants likely aren't familiar with your organisation, product or goals. Switch to storytelling mode for a moment and set the expectation and motivation as to why they are on the website. Don't start with questions or tasks right away.
Remember that the testing participants are roleplaying, in some ways. They may meet the demographics of your customer but they may not actually be a customer. Asking them to go find this product on your site becomes purely a 'click it until I find it' experience. There won't be any comprehension or investment, which makes your data questionable at best.
Explaining to them that they're an avid mountain biker that has trouble riding in the rain because they don't have disc brakes and their goal is to find a set of disc brakes that can be installed on their 26" bike adds purpose. It adds context.
05. Aim for 10 test participants
Jakob Nielsen of Nielsen Norman Group, a well-respected evidence-based user-experience consultancy, suggests that elaborate usability tests are a waste of resources and that the best results come from testing no more than five users.
The problem with this logic is that five participants only show trending data when you can compare it to a larger group size. I've uncovered valuable feedback on tests after the initial five participants were recorded in nearly all the tests I've done. Even when nothing new arose, having another 10 participants to provide supporting data made the final reports that much stronger.
If you are given an option, try 10 participants for each test and platform, such as mobile, tablet and desktop. It may be valuable to separate by parameters like gender or age as well. Any important customer segment should be treated as a new test to keep the data focused.
06. Include screener options
Screener options are also important to keep in mind in order to qualify your participants. I recently conducted a test with 45 participants to run a competitive analysis on performance disc brake manufacturers. The focus was placed on mountain bikers that had previous knowledge of performance parts. Some of the questions had fake answers and improbable options, and if a participant selected one at any time they were removed from testing.
As participants are paid, there is a certain level of potential dishonesty that comes into play so that they can be accepted into the testing. Keep them honest or you will get useless data that may send you in the wrong direction and jeopardise your position.
07. Focus on quantitative data
Know what you need and keep questions simple
Although it's easy to capture emotional feedback (qualitative) by asking what people feel about something or what they liked/disliked, you're working with a biased perspective of a very small group size. Emotional response is dictated by personal experience and that will not typically speak to the volumes of your customer base. You run the risk of receiving a lot of, 'I don't like these images' or 'it's too dark of a design' that contrast against 'I really like these images' and 'this dark design is great'. While entertaining at times, it doesn't provide much value.
When asking specific questions that have structured response like yes or no, if they were able to complete a task successfully (also yes or no) or even the much-debated net promotor score (NPS), you receive a value that can be compared to all other tests in the same way that we are able to compare the initial benchmarked data from earlier to itself over time. It's important to remove as many variables for bias as possible.
08. Avoid leading questions
Behavioural psychology dictates that many of us simply mimic others. It's human nature and often entirely subconscious. Next time you're sitting at a table with someone, take note of how often you both mimic posture. When it comes to the goal of extracting data from others we must be careful to not guide them toward an answer.
A question may be leading if you suggest they take an action or respond a certain way. For example, 'Visit this website. What do you like about it?' You're leading them into providing very specific feedback. Unless you're testing for how much people like something it's better to reframe the question: 'Visit this website. What is your first reaction?' It's open-ended to enable the participant to answer about anything that stands out first to them.
While this is generally qualitative, it can also provide direct insight into what someone notices first as quantitative. X number of participants noticed logo first. Y number of participants noticed promotional box first. Then you could divide each of those down based on participant demographic or their sentiment toward it.
Asking non-suggestive questions like: 'Visit website X. Where would you expect to find Y?' lets the participant explore a website or application in a way that speaks to their own learned behaviour. The goal is to get out of their way and remove any potential nudge into a certain response or behaviour. It takes practice.
09. Curate your collected data
The purpose of UX testing is to generate potential solutions that will have a very real, positive impact on an organisation. To collect all the data to validate or invalidate the potential solutions.
The first step is to curate this information into a document and basic presentation. Trust me, you don't want to send a 40-page report without a few presentation slides or a one-page overview of bullet points. As impactful as this data may be, it's rare that someone will read through all the details. It's the same problem I've run into with web design in general. People's attention is fractured. It's why images, graphs, videos and even memes are so popular. They convey a lot in very little.
Graph the benchmarks. Graph the scores. Bullet point the key takeaways. Create an issue priority chart. Quick and easy wins versus longer-term solutions. If you're familiar with SWOT (strengths, weaknesses, opportunities, threats) that can be used here as well.
If you've used a solution that recorded video or audio, create a highlight reel three to five minutes long and play it at the start of your meeting or presentation. It's always humbling for a team to hear unfiltered criticism and sets the stage for improvement. It instigates change.
10. Implement changes
Focus on the purpose of your website and the value it can provide others (a great example is )
As long as you have the data to support it, make recommendations based on what you've found. That's what the client is looking for in the end. They trust that you've done your job and followed these high-level steps to come out in the end with data-backed solutions. Once some of your suggestions have been implemented, always compare the results against the benchmarks.
This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 310 or subscribe.
Read more:
-
As the web has rapidly evolved, it almost seems that apologetic CSS has been left behind. Each week something happens, but seldom where it matters – the interface. The internet follows an almost everlasting converge-then-diverge-then-converge model in applications, and now it’s the turn of CSS.
As more frameworks, ideas and standards have emerged, complexity has skyrocketed with more and more helper technologies being invented from necessity. Things have become far more complicated for developers as people expect more, but now they are slowly being merged into CSS as formal standards. CSS has become unrecognisable from its early inception in the 1990s.
And what to the future? We can probably say now that CSS of the future will see another divergence as different digital and physical devices and channels appear, even to a brand-new technology. We can probably also guess that CSS will provide straightforward access to even richer interfaces and that the ‘S’ curve in development complexity and development features will narrow and steepen.
But what for now? These are our picks for the latest, greatest and most useful updates to CSS. Read on to learn how to use feature queries to check if a feature is supported before you start relying on it; build custom, print-style layouts with CSS Grid; DRY out your code with CSS variables; take control of backgrounds with two background-repeat options (Round and Space); explore aspect-ratio based media queries; create unique visuals with blend-mode; and make images adjust to fill content boxes with Object-fit; and more. Use the quick links box opposite to jump to the section you want.
Feature queries (@supports)
When building components that use new and potentially unsupported features, it’s important to include a fallback. Until recently, this was achieved using feature detection via JavaScript with plugins such as Modernizr. Now, it is possible directly inside CSS using the new @supports syntax (also known as a feature query).
With the addition of @supports, we can check whether the code we would like to use is or is not supported:
When the page is loaded, a check will be performed to see if the browser in use supports the flex feature. If it does, the styling within the support braces will be applied by the browser.
If it is not, it will be ignored – it is worth having a fallback option for when the feature being queried is not supported.
The most appropriate way to include the fallback code will depend on the project and what is being changed as there may be @supports code overriding default styling. In other cases, it may be preferable to include another @supports check to see if code is not supported. This is achieved with by negating the feature query:
Multiple checks can be combined to see if all the required features are supported at the same time, in order to apply either all or none of the style rules atomically. The syntax for this is very similar to combining media queries, such as applying styles on devices between specific sizes. This is achieved by using the ‘and’ operator and multiple feature queries:
The counterpart combination query for the and operator is the or operator, which checks if either of the feature queries matches and applies the style if at least one is supported:
Something which is useful given that we have already covered CSS variables is that with @supports you can also check to see if a custom property is supported or not, which can be done with the following approach:
With the above example a check will be carried out to see if the custom property condition is supported and when it is the body will have a font colour of orange applied. @supports is available to use in all browsers with the exception of IE 11 and below, although some polyfills are available if you do need to support as far back as Internet Explorer 9.
A final note: This is a great way to build in new styling rules, but it is also just as helpful at ensuring you build websites that degrade gracefully. If you use @supports then also use it to check if the browser does not support your CSS rules. This might double your workload, but it also ensures you create something that downscales browsers more elegantly.
CSS Grid
Build print-style layouts with less code than ever before
The arrival of Flexbox has allowed us to spend less time polluting our code with clear fixes, hacks and workarounds, and focus more on writing concise CSS and HTML. While Flexbox is essential for any UI dev’s toolbox, it’s best suited for working in one single direction at a time. This is usually enough, as we are usually only restricted on one axis at a time (for example, the width of the page is restricted, but not the height).
However, in the cases where we are restricted in both dimensions, say a dashboard style app, then CSS Grid is definitely one to shine. Starting off with the grid can be daunting at first, but it’s smooth sailing once you get to grips with the syntax. Say we have the following HTML structure:
We can define the grid, set the dimensions, and then define named areas for our grid cells:
Finally, on the .container we can make use of the grid-template-areas property to lay out what we want the grid to look like:
Additionally there are a whole host of additional properties to fine tune the presentation of the grid. To name a few:
grid-column-gap: <size>; Gutter between columns
grid-row-gap: <size>; Gutter between rows
grid-template-columns: <size>; Width of columns, space separated for multiple
grid-template-rows: <size>; Width of row, space separated for multiple
align-items: <center | end | start>; Vertically align the contents of each grid cell
align-items: <stretch>; Vertically fill the cell entirely
justify-items: <center | end | start | stretch>; As above, along the horizontal axis
place-items: <align-items> / <justify-items>; Shorthand notation, combining align-items and justify-items
So in practice, we could update our previous grid:
This is all just barely scratching the surface of the possibilities of CSS Grid – there’s so much more that can be done. Currently this is supported in all modern browsers, with IE11 being the exception, whereas it supports the older syntax.
But, wait, there’s more! With the use of CSS Grid we’re finally able to centrally align content without the stress:
Next page: CSS filters and CSS variables
CSS filters
CSS filters are probably one of the most powerful aesthetic tools you can use in your code to update the appearance of your build. With them, you can edit images using only CSS. There are several effects you can apply with CSS filters: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, and SVG.
Let's take a look at a few of them in more detail. In the image above, clockwise from top left, we have:
blur(5px)
Works by defining a blur size in px to your image; the higher the number the greater the blur (blur(10px) would create a strong blur effect).grayscale(100%)
The value to change to complete grayscale would be 100% or 1, and to change to semi-grayscale you could use 50% or .5.hue-rotate(90deg)
Probably the most unpredictable filter, this works by rotating the colour balance of the image, in degrees, turn or radians.saturate(1)
Changes the colouring of the image making everything more vibrant; 1 or 100% results in complete saturation.Importantly, you can also chain some of these effects together. So, for example, so you can apply a contrast and grayscale effect to an image. The good thing about the filter code is its simplicity. It is easy to remember and understand what is going on. To apply three chained filters to an image (blur, hue-rotate and drop-shadow), you would write:
There are some known issues with filters, including issues with ordering when chaining effects, which can sometimes have adverse effects. For example, if you were to apply grayscale after sepia it would result in an entirely greyed-out image. Browser support is also a little problematic. There is no support in Opera Mini, IE 11 and below, and Edge only has partial support.
CSS variables (custom properties)
Within CSS, to reuse code throughout a build, you used to have to type it out manually over and over, then preprocessors came along and the world was good – except you had to install and compile them, which wasn’t always as easy as it should be.
CSS custom properties enable you to pass through a string of content into your code, such as a colour or size. Unlike with preprocessors, you can update the variable to be something different when used within a media query, which means you no longer need to declare a specific variable to be used in each media query.
The variable is declared inside :root and is then applied to your tag via the var(--variable-name) code. As you can see by the example above, we have then overwritten those variables for screen sizes larger than 768px so we no longer need to create an individual variable for each breakpoint we support.
The overall simplicity and cascading element of CSS variables makes it easier and cleaner to use in your build than variables within preprocessors. You can create much cleaner default styling throughout your build while still using the same variable.
CSS variables can also be nested within one another, which can be helpful when working with large builds that are changing frequently. For example, you could do the following:
Overall, it is debatable whether you should use CSS variables or not. Ultimately it all depends on what you have to support for the build you’re doing. As far as browser support goes, variables are supported in all browsers except for Opera Mini, Samsung Internet 4 and old faithful Internet Explorer 11 as always.
One thing worth mentioning is that Microsoft Edge does support variables, but with a few known issues in release 15. You can not apply a CSS variable to an item that is a pseudo element (such as ::before and ::after) – this causes issues when applying background or border colours, and applying animations to pseudo elements.
Animations that use CSS variables have been known to cause the browser to crash entirely (not ideal). Finally, nesting variables within variables causes an error that results in the browser not reading the variable at all; therefore no value is assigned to your component.
Next page: Background-repeat, aspect-ratio, blend-mode
Background-repeat (Round and Space)
Background-repeat has been a stable part of CSS for what seems like an eternity, but there are two lesser-known options available – Round and Space. Both of these options work by ensuring that 100 per cent of the background image declared is repeated and visible at all times. They work in slightly different ways and will make a subtle difference to how images appear.
The round option resizes your image to fit
background-repeat: round; repeats your background image without ever cropping the image. Instead, it will resize the image evenly until there is enough space to fit in an extra tile.
The space option creates extra space between your tiles
Background-repeat: space; tiles the image in both directions. It's similar to Round, except instead of resizing the image until there is more space to display another tile, it will instead create white space between the tiles until another row or column can be shown.
Neither of these options is that new, but they will give you that little bit of extra control over the way tiling takes place over various viewport sizes. What is also very useful about these options is that they are supported by every browser.
aspect-ratio media queries
The introduction of media queries changed the way we build websites. We were given the opportunity to build our layouts depending on the way the user viewed the page. More often than not this would be based purely on the viewport width or height, but recently there has been a new option added.
Now you are able to apply CSS based on the page’s viewport via a media query that detects the aspect ratio of the window you’re browsing with. You are also able to detect whether the window matches a maximum or minimum aspect ratio.
Click the icon in the top right to enlarge the image
The code to use for this is fairly simple. It matches the convention used with any other media query declaration – something like:
There are only a few scenarios in which aspect-ratio media queries would be useful. If you are building something specifically for mobile devices, you could use the min/max aspect-ratio to target whether the user is browsing in landscape or portrait mode (although this use could also be addressed with orientation media query).
However, aspect-ratio is supported by all major browsers support it, with Internet Explorer support going as far back as version 9.
Blend-mode
Applying background images is typically a stable part of every project build. But sometimes it's good to be a little more creative with our background images, which is where blend-mode comes in.
Instead of just putting the background on top of the background colour, blend-mode combines the background image with the background colour in a defined style. The options you can use are normal, multiply, screen, overlay, darken, lighten, colour-dodge, saturation, colour and luminosity.
Let's take a look at some of the options. In the image above, we have:
Overlay (top left)
Mixes both the background image and colour together to echo the darkness or lightness of the backdrop area.Difference (top right)
Subtracts the darker colours from the background image/colour from the lightest shades, to give a very high contrast effect.Luminosity (bottom left)
Preserves the top colour while fading hue and saturation of the background, to give a washed-out, old photo look.The code to use for blending your background is fairly simple – all you need is one line of CSS to merge the background image with the background colour:
When it comes to applying blends to your background image you needn’t use just one mode. You can chain multiple blending modes together to create a more unique effect (shown in the bottom right of the image above) by using something similar to the code below:
Blend modes are supported in almost all browsers (including all versions of Microsoft Edge), with the exceptions being all versions of Internet Explorer and Opera Mini.
Next page: Object-fit, shape-outside, currentColour and more
Object-fit
A more reliable way to present media
To make an image fill a content box, we have had to make use of the background-size: cover|contain styles. However, attempts to recreate this behaviour for images or videos have been somewhat clunky.
Thankfully the object-fit property has emerged, seemingly out of nowhere, to help. This can be used to achieve the same result, but on media assets such as images and videos. Object-fit can take five values:
fill
Stretches the asset to fit the parent container.contain
Scales the asset to fit inside the parent container, maintaining aspect ratio (similar to background-size: contain).cover:
Scales the asset to completely fill the parent container, cropping from the sides where necessary (similar to background-size: cover).Scale-down
Similar to contain, however, this will only scale the asset down, and not make it larger than it is natively.none
Render the asset as it would normally.This property can also be combined with object-position to determine where the asset should be scaled from. Applying object-fit to your images is fairly simple:
It is important to remember height and width of the area you’d like to cover, otherwise the image will take on its default aspect ratio. This will most likely result in the image spanning the entire width of your available area.
In terms of browser support, object-fit is quite compliant, as it is supported in all browsers with two exceptions. There is no support at all in Internet Explorer, while Microsoft Edge supports object-fit on images only.
Shape-outside
Something that has previously been lacking from CSS was the ability to wrap content cleanly around images that do not have squared edges. Now with the introduction of shape-outside, you can create more adaptive layouts that resemble something closer to a magazine layout than our old standard floated block images.
To use shape-outside, first apply it to a floated element such as an image. Then in your CSS, declare which shape method you would like to use. The options available are:
- circle – Create circular shapes
- ellipse – Create elliptical shapes
- inset – Create rectangular shapes
- polygon – Create any shape with three or more vertices
- url – identifies which image should be used to wrap text around (works by placing text within the transparent areas of the image
Support for shape-outside isn’t particularly good yet, as Internet Explorer, Edge and Opera Mini all offer no support, but Firefox has now begun supporting it from release 62 onwards. The support of shape-outside in Microsoft Edge is currently under consideration, but there is no official word on when it could be implemented.
currentColour
currentColor is something that has creeped into our daily code usage. You declare your colour of choice via color: #000; and then when you want to apply the colour to something else like a border, for example, you would use border: 1px solid currentColor;. This will result in the border colour matching the declared text colour.
Additionally, the colour then cascades down as your styling changes. Pretty cool, eh? If you were to declare a colour on a link and then apply currentColor to a border and SVG icon within that link, these would also change when you declare your hover and focus states like all responsible developers should be declaring.
Other CSS properties to explore
01. Will-change
This relatively new CSS feature has little impact on the appearance of your page – it is more of a processing tool than anything. The idea with will-change is to help the browser understand and prepare for elements of your code that will change when interacted with.
For example, when interactions are performed with CSS, the browser will do the best it can to plan ahead for what changes may occur. And with the addition of will-change you can notify the browser in advance of what may change so it can prepare better. This will result in any interactions you need being more responsive.
02. Read-only
The read-only pseudo selects elements that are not editable by the user. Combined with the :read-write selector, they form a simpler way to style disabled, read-only and content-editable HTML. This is especially useful when building forms that have some read-only inputs showing existing, non-editable data.
03. ::playing and ::paused
The ::playing or ::paused pseudo elements can be applied to highlight a component when it is currently being played or is paused, which will be useful if you’ve ever got any videos in your build. Unfortunately this code is in draft so it not fully supported yet.
03. Environment variables
Environment variables function in a similar way to CSS variables, but do not allow for overwriting. An environment variable defined once is guaranteed to have the same value throughout the document, whereas CSS variables (custom properties) can be overwritten on a component level and changes will cascade down to child declarations.
04. :focus-within
Probably one of the most eagerly anticipated newcomers, this selector is active when the user has focused a child element. This is especially helpful for exposing elements for keyboard accessibility.
05. Shape media-query
Most web devices are designed and implemented for rectangular devices. However, with the rising popularity of wearables, we are seeing more and more round devices on the market. The shape media-query can be used to target rectangular and round devices. This is specifically useful for ensuring everything fits onto the appropriate device’s screen.
06. Scroll anchoring
The introduction of scroll anchoring addresses one of the most frustrating problems that happens on the web: when you unintentionally click on a re-positioned element after late-loading content in your page finally displays. Scroll anchoring aims to solve this problem by forcing the browser to maintain your viewport position when content is loaded to the page.
07. Regions
The core concept behind regions is being able to say, 'Display this content over there instead'. By setting an area of the document as a named region, content from other parts of the page can be moved into a different part of the document flow. Unfortunately, the draft for CSS Regions has not been updated in some time and may be dropped.
This article was originally published in creative web design magazine Web Designer. Buy issue 277 or subscribe.
Read more:
-
Any designer worth their salt will be aware of Dieter Rams and his 10 principles of good design. Thought up by the German industrial designer in the '70s as he tried to answer the question 'is my design a good design?', these principles have proved to be a valuable guide for creatives over the years. To celebrate Rams's design thinking and commemorate a new documentary about him by Gary Hustwit, Field Notes has launched a limited edition range of Rams memo books.
Sold in packs of three for $12.95, the FN-RAMS collection takes its inspiration from the designer's teaching by making a product that is useful, aesthetic and thorough down to the last detail.
Ram's iconic products also helped to shape the books, as the orange and white colour scheme is taken in part from his 1958 Braun T3 Transistor Radio. This radio would go on to influence the look of the iPod, so this Field Notes book is in good design company.
Inside each book you'll find pages with light grey Dot-Graph paper to help record your thoughts and ideas, while the covers are finished with a soft-touch varnish that gives the books a luxurious feel and helps to keep the pages safe. The ten design principles themselves can be found on the back cover, making them easy to find in case you need a refresher or a burst of creative inspiration.
If you want to pick up one of these limited edition notebooks be sure to head along to a screening of Rams, the documentary portrait of Dieter Rams (watch the trailer above). Alternatively, you can buy them directly from the Field Notes site. Just be sure you don't hang around: once they're gone, they're gone.
Related articles:
-
I’ve been using Photoshop CC since it first came out, and I have done digital retouching for photographers, but before, I never thought of it as a legitimate form of expression. Up to that point, it was merely to sketch drafts.
David Hockney’s iPad artwork gave me the confidence to take this tool seriously. It doesn’t have the texture or voluptuousness of traditional media, but it has its own expressive resource.
I am from Argentina. In my country it’s not so common to see someone ‘painting’ on their computer. In fact, I’ve never had a graphics tablet, I do everything using just the mouse. I like how that gives room for mistakes to happen, conveying more of a human quality. Graphic designers often regard me as odd!
Now, I'm designing kimonos using this software. Here's an overview of my process.
01. Materialise concept
Santiago Paredes likes to think of each kimono as its own full canvas
I started designing kimonos digitally due to my fascination with Japan. Then I began to make dresses, and now I’m preparing a whole collection of sweaters for the winter.
The ultra-comfortable and distinguished nature of the kimono was the most amazing starting point for me, because it adapts easily to all body types, represents no gender in particular, and can be used at home or at a fancy dinner party.
Its structure is also very much like a canvas. It’s mainly a large and wide rectangle that folds in half, representing the front and back. Two more rectangles serve as the sleeves. This way I can think of the kimono as a single piece of work, focusing on the main print on the back, and little ornamental motifs for the front and sleeves. The edges and the belt, which are the same colour, are key to defining the ultimate tone and mood of every design.
I started working on small pattern designs that I intended to repeat geometrically along the cloth. But after making drafts for about 10 different motifs, I realised each one was an accomplished painting in itself. I could not ignore this. It struck me that I had no idea how to develop a traditional rapport pattern; I naturally conceived the painting as a whole image.
02. Establish colours and mood
Colour and mood go together in the planning stage
I distribute colours in a messy way, with a big brush stroke, whose edges I trim with the Eraser tool if necessary. I also enjoy using loose, thick, wavy lines, without much concern for detail.
I ponder on the mood I want every piece to convey. For this collection of kimonos, I decided one had to be mostly yellow, recalling a light spring atmosphere. Red would stand for an imperial style, sophisticated and distinguished, whereas dark blue would suit an elegant, nightly look, not sombre but fancy. I also wanted a vibrant orange, only not too garish. A more chaotic, expressive design also appealed to me, with a high-contrast palette and wild, broken lines. And finally a soft pink hue, reminiscent of femininity and intimacy, like a morning ritual.
03. Think about imagery
Each kimono has a different main visual idea, represented above
After setting these concepts I started working on the imagery for each. For the red and orange ones, I chose some ikebana paintings I had been working on, with touches of Art Deco motifs. I wanted to convey sensitivity and culture, coupled with a chic feel.
For the chaotic one – or ‘drug dealer’ as a friend of mine likes to call it – I deconstructed one of my original pattern designs into a playful version. Domes of a fantastic Russian city collapse into a distorted landscape with highly contrasting colours. This apparently eclectic print ends up working as a harmonious whole.
The dark blue kimono has a chrysanthemum flower extending from top to bottom, majestic and sombre. I couldn’t help but add sausage dogs on vibrant red and blue doodles, to spice it up with a little absurdity. The soft pink design also has a big floral stamp, striking yet soothing, associated with morning dew and spring.
The finished yellow-green kimono
The yellow-green print is less obvious – you can see floral motifs as well as traditional pottery and other elements of Japanese culture, which portrays more of a daily-life energy; optimistic and also a bit messy. As well as these designs, I prepared a separate file for the belts and side prints of every kimono.
04. Transfer paintings to other garments
Photoshop templates help to establish how the pattern will fit on a garment
Currently, I am working on an autumn/winter collection, focusing on transferring other paintings I’ve created onto different pieces of clothing. This is turning out to be far more challenging, since I have to find a way of transforming two-dimensional worlds into something that can adapt to a differently-shaped surface, and is also wearable.
To tackle this, I create a template, the measurements of which I add to the computer to adapt the paintings virtually first, trying to stay as true as possible to the original design, without resulting in something no one can wear.
This article was originally published in issue 282 of Computer Arts magazine. Buy issue 282 or subscribe here.
Read more:
-
Want to access thousands of unique vector icons from a single platform? You can get just that for only $19 with Icon54: Unlimited Membership. Icon54's collection of vector icons are drawn by hand and include 101 different categories.
Vectors are all designed with care and precision, and you can easily accommodate your needs by adjusting the colour, size, orientation, and shadow at your will. Choose from seven different file formats, giving you maximum flexibility. Best of all, you get to enjoy all these benefits for life, including access to new icons and upgrades as they come along.
Get Icon54: Unlimited Membership for just $19.
Related articles:
-
You're reading Best Free Websites Builders of 2018, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+!
Thanks to website builders, almost anyone can create a low- or no-cost website. They bridge the gap between regular users and the internet, making them a part of the web community. They can be lifesavers for those who want to …
-
This is the second local privilege-escalation zero-day this APT group has exploited.
-
It pays to have some stability in life, especially if you’re a photographer. With more than just three legs and a clever head, the best tripods have a lot to offer, and not just in terms of giving you a stable shooting platform.
Many recent designs have legs that swing vertically upwards for stowage, so that the feet encompass the head when the centre column is fully extended. This reduces the packing length by about 8cm, but there’s a downside in that these tripods are a bit more fiddly and time-consuming to set up and fold away.
A more time-honoured tradition for extending the maximum height while keeping the stowage size fairly small is to use four or five telescopic sections within each leg, rather than the more conventional three sections. It’s a useful space-saving feature, especially for ‘travel tripods’ but, again, there’s more setup time involved, with extra leg section clamps to operate.
Top tripod tips
Another top trick of some current tripods is that they have a pivoting centre column. In most cases, this enables you to use the centre column as a horizontal boom, as well as vertically upright. It can be a big advantage in macro photography, as well as for shooting with ultra-wide-angle or fisheye lenses. It’s also a bonus for really low-level shooting, given that most tripods these days have legs that can be splayed to lock at multiple, wider angles to the vertical. Some pivoting tripods go even further and enable you to lock the centre column at a number of angles through a full 180-degree arc.
To save weight, many up-market tripods are available in carbon fibre. For a full-sized tripod kit, including head, you’re looking at a weight-saving of around 20 per cent compared with the same kit based on aluminium legs. The weight reduction is usually more minimal with smaller travel tripods. The main drawback of carbon fibre is that it’s more expensive to manufacture, so the tripod itself can be significantly pricier to buy. Let’s take a closer look at some of the best tripods available right now.
Billed as a travel tripod, this Benro is sold as separate legs and head. There’s therefore no money-saving complete ‘kit’ option, but at least you can choose the head that best suits your needs. Benro’s B1 ball head is ideal. The swing-up legs enable a carrying length of just 49cm, yet the maximum operating height is a lofty 179cm, partly thanks to each leg containing four sections. One leg can easily be unscrewed and used as a monopod, in conjunction with the removable centre column.
Like the Vanguard tripod in this round-up, the pivoting centre column can be rotated vertically through a full 180-degree arc, with multiple locking angles along the way. The pivot system is elegant and every feature of the overall design is immaculately implemented.
A relatively simple and straightforward design, the Benro Mach3 has no pivoting centre column nor swing-up legs. It still folds down reasonably small though, thanks to having four-section legs, and they have the usual choice of three operating angles. Despite being fairly light in weight for an aluminium tripod, the Mach3 is very sturdy and both the legs and supplied 3-way head have an 8kg maximum load rating.
A ‘TMA28AB2’ kit is also available, with Benro’s B2 ball head. As with a growing number of tripods, one leg can be unscrewed and coupled with the centre column for use as a monopod. Like the other Benro tripod in our round-up, this one is supplied complete with a posh padded bag and interchangeable spikes and rubber pads for the feet.
A perennial problem with travel tripods that fold down to space-saving dimensions is that they fail to give a decent maximum operating height. The Kenro Karoo literally rises above that particular criticism. Despite folding down to just 48cm, courtesy of swing-up 4-section legs, it can reach a towering 190cm at full stretch. The extra height is due to an extending centre column, which also enables a 90-degree pivot facility for use as a horizontal boom.
The tripod is reassuringly sturdy, as is the ball head that’s supplied as part of the kit. It comes complete with interchangeable metal spikes and rubber pads for the feet, and a padded carrying bag. The Kenro is great value at the price, and there’s also a carbon fibre version which isn’t much more expensive, although the saving in weight is fairly minimal.
Despite being amazingly good value for a carbon fibre tripod, the Novo Explora 5 doesn’t cut any corners in build quality. It folds down nice and small with swing-up 4-section legs, has a respectable maximum operating height of 161cm and a hefty maximum load rating of 10kg for both the legs and the included ball head. The load limit is particularly impressive, given the relatively lightweight build compared with many similar tripods. There are two pan release knobs on the ball head, rather than the usual one, so you can pan the whole head or just the camera platform.
An innovative friction damper is also fitted, with an adjuster that’s built into the main clamping knob. There’s no pivot facility for the centre column but one leg can be unscrewed and used with the centre column as a monopod. Another neat trick is that the rubber foot pads can be removed to reveal metal spikes. All in all, it’s a superb tripod for the money.
Sold as separate legs and head, rather than a complete kit, the 055CXPRO3 tripod and XPRO Ball head are nevertheless perfectly matched. There are actually a variety of 055 legs available in both aluminium and carbon fibre options and with either three or four sections per leg. This three-section carbon edition is chunky and super-sturdy, with a generous maximum height of 182cm when the XPRO head is fitted. It’s relatively long when folded, but the 4-section edition packs away smaller.
Both are quick and easy to set up, as the legs don’t swing up for stowage, and the 90-degree pivot facility for the centre column is also brilliantly simple to use. Unusually, these days, the leg section locks have a flip action rather than a twist mechanism, but they’re very effective. The XPRO Ball head is among the very best that we’ve ever come across. It’s available with Manfrotto’s usual 200PL quick-release plate, or in a pricier option with an Arca-Swiss compatible quick-release plate.
Considering that this tripod folds down to just 41cm in length, it’s a little surprising that it weighs in at over two kilograms. However, the MeFoto GlobeTrotter has an impressive maximum load rating of 12kg for both the legs and the supplied ball head, and reaches a useful maximum operating height of 165cm, thanks to having 5-section legs. Following the current vogue, the legs swing up to reduce the carrying length, and one of them can be detached for monopod duty.
Interchangeable rubber pads and metal spikes are supplied with the kit, along with a smart padded bag. All that’s really lacking is a pivot facility for the centre column, and there are only two lockable leg angles instead of the more usual three. A pricier carbon fibre edition of the kit is also available, which reduces the overall weight by 400g.
With an emphasis on quick and easy setup rather than minimising the folded size, this Vanguard Alta Pro tripod has three sections per leg, and the legs don’t swing fully upwards for storage. That said, they do have four selectable lockable angles and, coupled with a full 180-degree pivot facility for the centre column, ultra-low-level shooting is a doddle. Another bonus is that, like in most recent Manfrotto tripods including current versions of the 055 and 190, there’s a 3/8-inch threaded socket for attaching accessories like an LED light. Build quality is very good throughout and the Vanguard is a joy to use, even if it doesn’t fold down very small.
Building on the huge popularity of Manfrotto’s 190-series tripods, there are a number of new Manfrotto 190go! kits on the market. They’re easily distinguishable as they use twist-action clamps rather than clip locks. Kits are available with either aluminium or carbon fibre legs, and with either 3-way or ball heads. The legs have four sections in all cases, and the most up-market option includes the superb XPRO head which, again, is available in 3-way or ball versions.
The legs don’t swing up for stowage but the folded length is a modest 54cm nonetheless. Despite having four sections per leg, the maximum operating height of 159cm isn’t overly generous and the maximum load rating of 6kg for the legs is rather less than that of the favoured XPRO ball head. The pivot facility is amazingly quick and easy to use, enabling the centre column to act as a horizontal boom. Ultimately, it’s a solid tripod that’s very nicely engineered and a pleasure to use.
A variety of ‘Advanced’, ‘GT’ and ‘2N1’ editions of the Befree tripod have come to the market recently but the classic simplicity of this original version is still hard to beat. With 4-section swing-up legs, it folds down to a mere 41cm and weighs just 1.5kg, making it ideal for the long haul of travel photography. The maximum operating height of 144cm and load rating of 4kg are both rather modest but should prove sufficient for most photographers. The tripod and head are both fairly rigid and robust, considering their lightweight build, and the clip-style clamps work smoothly and efficiently. If you’re after a basic tripod that won’t weigh you down, this Manfrotto makes a good travel companion.
The most obvious use for this Joby smartphone support is as a selfie stick. As such, it has a comfortable handle and a central column that extends in three telescopic sections. Up at the top end, there’s a clamp that can securely hold an iPhone or other smartphone, and there’s also a ‘cold shoe’ for attaching an accessory like an LED lamp or microphone.
For triggering your smartphone camera, a Bluetooth wireless remote is included in the kit, and it is compatible with both iOS and Android. Unlike many smartphone supports, the handle of this one has three sections around its circumference, which hinge out to form legs, so the Joby can act as a self-standing tripod. Without a doubt, the Joby is the best tripod for smartphones.
Read more:
-
Adobe Digital Edition has four critical bugs enabling arbitrary code execution.
-
You may have noticed a new phenomenon taking place on Instagram. Where once everything used the same font, suddenly users are switching things up. Want to follow suit? In this post we'll show you how to change the font in your Instagram bio.
Having the right Instagram bio is crucial in attracting new followers, and ensuring your profile can be found by the right people. You should make sure your bio includes any relevant links to other accounts you run or are associated with, as well as relevant keywords or hashtags so that people can find you. Emoji can also help add some colour and break things up.
Another thing that adds a bit of flavour to your bio is having a different font than the Instagram standard. And the good news is that changing it is both easy and free. Read on to find out how to change the font in your Instagram bio...
01. Choose your font
The options in Instagram Fonts range from the understated to the emoji-studded
There are various tools that generate fonts that can be used on Instagram. Try Instagram Fonts or LingoJam, for starters. Type in the text that you want to change, and these tools come up with a list of fonts that can be used in Instagram. Some of them are pretty simple, while others go overboard with emoji and symbols.
Bear in mind that you probably don't want the whole of your bio to be in a different font, or it may become hard to read. Once you've found the font you want to use, copy it.
02. Paste in Instagram
Mucho has opted for a different font in its description
Open Instagram, and go to Edit Profile, then paste in your new font. Click Submit and you are done. That's it!
If you'd prefer a wider selection of fonts, check out apps such as Fonts – for Instagram (for iOS). You could also try Cool Symbol – which has a lot of different options, but a confusing interface.
To see other Instagram hacks, including how to add spaces to your bio, see our post: 6 Instagram hacks to transform your feed.
Read more:
-
If you're not careful, work and stress can lead to depression, anxiety and illness. Sometimes we can get so caught up trying to build the perfect website layout or a wonderful user experience that we forget to take a step back and consider the impact all those extra hours in the office might have on our wellbeing.
Three years ago, I was diagnosed with ulcerative colitis, and stress may well have been one of the contributing factors. After being in and out of hospital while trying to establish my career, I have learnt some painful lessons on how to manage stress. Here's my advice for protecting your health and wellbeing at work.
01. Open up
First of all, the best thing to do is start talking. If you’re comfortable doing so, open up to your family, friends and colleagues. These are the people you spend most of your time with, so it’ll be helpful for both of you to understand what you’re going through. My partner and I talked about my illness regularly and it helped us get through it together. It may feel difficult to talk about (even with people you're close to), but remember you're not alone – in many cases there will be many, many others suffering from the same thing you are.
02. Prioritise sleep
Exhaustion is one of the main issues affecting professionals in the creative industries. While the occasional midnight flurry of coding isn’t going to kill you, don’t make it a habit. Always think: What’s the worst that’s going to happen while I have a few hours of sleep? Your health is more important than an extra line of code.
03. Rethink your downtime
Ensure you take some time to unwind. And by that, I don't mean just on your phone or in front of the TV (we’re all guilty of spending a bit too much time doing these things). Getting a good night’s sleep not only helps keep you healthy and well rested, it can also help you deal with stress. Simple tasks like keeping on top of bills, mowing the grass or fixing that leaking tap can also improve your wellbeing.
04. Focus on one thing at a time
Don’t feel like you have to tackle everything in one go; prioritise items that will make a difference to your life and your career. It’s better to do half of your tasks and do them well than to half-complete everything. Personally, I have been focusing on finding medication to keep my disease under control. Now I’m on something that works, I can turn my attention to my career.
05. Remember you’re not invincible
Discuss your illness with the person or team that deals with your welfare at work. If you need time off for your mental or physical health, then take it. There’s no shame in illness. Returning to work after an illness could mean that you encourage positive policy changes within your company. It also places you in a position to help establish new support networks and create a safe place for health-related discussions.
06. Take a break
Often in our industry, going the extra mile all the time is seen as important. It isn’t. Most of the time, putting in more hours causes more problems than it solves. Instead of working flat out, learn a new skill, take a stroll around your local park during your lunch break or help someone else. This will improve your creativity, productivity and help you get your tasks done more efficiently.
07. Calm down your commute
Whether it's because of ridiculous traffic or delayed public transport, getting to work can often be quite stressful. But it doesn’t have to be. Often there’s no avoiding a commute, so make the time yours by listening to a playlist of your favourite songs, a podcast that inspires you, or reading a book you love. Use the time to prepare yourself for the day ahead or unwind as you travel home.
08. Monitor your stress levels
Take a note of the situations that cause stress and how you react to them. Some people recommend keeping a stress diary, but not everybody has the time or commitment to do that. The main thing is to just be aware of what makes you stressed and how to turn the negative into something more manageable. Self-awareness is key.
09. Don't let illnesses define you
One of the toughest things for me was understanding that my illness is for life. When I was first told about it, I didn’t understand what the consequences were and how much of an impact it would have. Now I have taken a new view on my colitis: it won’t change me. I decided that my colitis won’t prevent me from achieving my goals and it won’t limit my ambitions. The only restrictions my illness gives me are the ones I put upon myself.
10. Don't neglect your wellbeing
If you focus on your health first, your career will follow. If you don’t feel well, your work isn’t going to be on top form either. Putting in ridiculous hours or working every weekend isn’t critical to success. The key is to prioritise your illness and focus on things that will positively impact you and your career.
This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 310 or subscribe.
Read more:
-
From supply chain to orchestration tools, here are the new trends that DevOps should pay attention to in this year's BSIMM report.
-
So you want to start a podcast... but you don't know where to begin. That's where The Podcasting 101 Bundle comes in. This bundle gives you valuable expert insight into everything from breathing and recording, to storytelling and video production.
You'll even get training in how to be an online TV presenter, and you'll learn all about audio and video production for freelancers. Starting a podcast doesn't have to be hard – the whole process is made quite easy with The Podcasting 101 Bundle.
And you can get all this knowledge for just $29.
Related articles:
-
You're reading How to Import a Custom HTML Email Template to HubSpot [YouTube Tutorial], originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+!
Welcome to a new video tutorial where we’ll learn about how to upload a customized email template newsletter to HubSpot. In this tutorial, we’ll use Postcards to build a customized email template and HubSpot to send a customized email to …
-
Here at Creative Bloq, we know how important it is for creatives to nurture their happiness and wellbeing. This is a feeling very much shared by creative director Radim Malinic, evidence of which can be found in his new book, Book of Ideas Vol.2, which offers holistic guidance on better understanding yourself as a creative, and the best ways to approach your life and work in a mindful, smart way.
With this in mind, we've teamed up with Malinic to offer every Creative Bloq reader this exclusive free excerpt of Book of Ideas Vol.2, which includes snippets from all three chapters – Work, Creativity and Mind – providing helpful insights and tips on how to improve your working process, build your career path and the benefits of working in silence and breaking stale everyday habits.
The Book of Ideas, Vol 2. provides handy hints on how to keep your mind in check
To download your copy of Book of Ideas, Vol.2, simply fill out the form below and we'll deliver it directly to your inbox.
Want more? You can purchase the Book of Ideas, Volumes 1 and 2, and other products, from Radim Malinic here.
-
Instagram is packed with inspiring imagery for creatives. Whether you're looking for mood board-style references to shape the look and feel of your campaign imagery, or need to find a new illustration style to suit a brief, there's a feed for you.
But what if your research needs are more specific – rather than colour palettes, composition, or approaches to art direction, you're looking for great examples of logos to kick-start your creative process?
You're in luck. Read on for eight inspiring Insta feeds that'll help keep that logo design inspiration flowing...
01. @logoarchive
Dubbed "a study of form language in logo design," LogoArchive is a carefully curated selection of logos by BP&O founder Rich Baird, who refers to it as "a recovery, research and restoration project".
With no company names, symbols are presented in isolation, at an identical scale and in stark black-and-white, making for a fascinating comparison of abstract forms and how they communicate information. And with around 130,000 followers, Baird must be doing something right.
02. @logofavs
Curated by freelance logo designer and Logo Lounge jury member Jeroen van Eerden, LogoFavs presents a broad, colourful range of logo designs – shown in situ, in progress, and in clean, crisp isolation – for the inspiration and reference of his 15,000 followers. Use #logofavs to get on van Eerden's radar.
03. @logolearn
While LogoFavs includes some sketches and WIP, logolearn makes them its bread and butter, and to great effect – the feed has over 250,000 followers. Pulling back the curtain on the logo design process, it includes grids, roughs, before-and-after comparisons and much more. Use #logolearn to get involved.
04. @logodesignlovers
Similar to LogoArchive's stark, monochrome approach but in reverse, Logo Design Lovers presents only black logos on white – including the occasional greyscale WIP sketch for some variety. This gives the feed a clean, crisp, curated feel. Tag @logodesignlovers to get your work showcased to its 17,000 followers.
05. @logo.inspire
Compared to its black-and-white counterparts, there's a patchwork of colour on display on the logo.inspire feed, which seems to favour character-driven logos and simple vector shapes and gradients. Use #logoinspire for the chance to be showcased to its 26,000 followers.
06. @logoinspirations
With roughly 750,000 followers, Logo Inspirations is the most popular logo inspiration feed on this list. With a simple mission statement – "Promoting designers and the best logo identities" – it draws together a vibrant, diverse and colourful selection from around the world. It's regularly updated too, and has almost 9,000 posts. Get involved with #logoinspirations
07. @logodose
Joining LogoArchive with the striking white-on-black approach, Logodose offers a "daily dose of logo inspiration" to keep you going – and has been running long enough to clock up just over 400 posts so far.
Polished final logos are showcased alongside grids to show the thinking behind their construction, and many posts include a slideshow of different elements, including some in-situ examples. Its follower count currently sits close to 30,000.
08. @logomovement
While several of the feeds on this list achieve a consistent, curated look and feel by paring back to black-and-white, Logo Movement has an even smarter strategy. The grid is considered as a whole, with new posts in threes – dark backgrounds on the left, light in the middle, bright colours on the right.
With almost 60,000 followers, it's the third most popular logo inspiration feed on our list – and well worth a visit for more than just its clever Instagram feed layout. Tag @logomovement to be considered for inclusion.
Related articles:
-
You're reading How to Import a Custom HTML Email Template from Postcards to Zoho CRM [YouTube Tutorial], originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+!
-
A zero-day vulnerability tied to the Window’s Win32k component is under active attack, warns Microsoft.
-
New Intel Coffee Lake CPUs offer hardware-based protections against some -but not all- Spectre and Meltdown variants.
-
A lot has changed at Pixar Animation Studios. Technology and the deep-diving research that precedes it has allowed the studio to produce some of the most ground-breaking visual energy ever seen.
However, Pixar wasn't always the animation giant it is now. Back in 2004, a lot of the software the studio used was written by a very small team of artists. But it didn't take them long to make their mark, and 14 years later Pixar has gone from being a little start-up animation team to a huge part of the Walt Disney Corporation.
Breaking digital barriers
Since its first production, Pixar Animation Studios has continually created animated movies that have broken down barriers of digital possibilities. From the simulation of Sulley's fur in Monsters Inc. and beautiful water in Finding Nemo, to the creation of mouth-watering food in Ratatouille and new hair simulation software used on Brave's fiery red-haired character Merida.
Each film in Pixar’s animated timeline has set new standards and pushed the levels of technological development for future movies. So just how do they create such beautiful, seamless animations? What are the secrets to Pixar's success? Here we take a look at some of the techniques, technology and tools that have helped shape some of the company's best-loved 3D movies.
01. Global Illumination
The Pixar team harnessed the power of global illumination for the second instalment of the world of monsters
Point-based global illumination was perfected and brought into the game for Monsters University. Lush skin, highly textured surfaces and spectacular lighting effects join the arsenal of takeaways for the second instalment set in the world of monsters.
A group of algorithms calculate the way light bounces from surface to surface within an environment. It produces beautifully soft, natural-looking effects – but only if you’re prepared to wait for the effect to be added once the animation has been done. Animators can now produce the frames of their work while the lighters can give them all the gorgeous lumens they require. Real-time global illumination and USD is now being used in Pixar productions, and we can’t wait for Toy Story 4, coming in 2019.
02. Universal Scene Description (USD)
Universal Scene Description (USD) is an open-source project Pixar created as an emerging standard in the industry. This standard allows them to have immense complexity inside the scene itself. It also allows a large number of artists to be working on the same scene, asset or character simultaneously. The lighters can be working on the same character in the same shot, as the animators also work on this character.
“USD is gaining traction, even outside our industry, because it allows us to have a massive scale of complexity and the ability to work within that complexity, in multiple departments at the same time,” says Steve May, a senior member of the Pixar Technology Team. Apple recently announced at the WWDC that USD is the new PDF for augmented reality.
03. RenderMan
RenderMan enabled the team working on Finding Dory (2016) to fully embrace path-tracing for more complex lighting effects
“We’ve also gone through a transformation and push with RenderMan,” adds May. Pixar has created a new architecture for this long-established gold standard for how rendering is done in visual effects and animation. The algorithms have improved
and computational power has increased to such a point that it can now support path-tracing.“In the production of Finding Dory, the RenderMan software was at a stage to make it possible for the Pixar crew to fully embrace path-tracing, enabling much more complex lighting effects, with a lot less work from the artists. It grasps much more complex geometry more efficiently.”
So, Pixar has made this big push to move RenderMan to path-tracing. What does that mean exactly? May informs us that it is all about having RenderMan run interactively, and making it so that there is no delay between the time the artist makes the creative decision, and when the results appear.
04. Presto
Pixar’s proprietary animation system was first used on Brave, and has been used on every Pixar project since. “Presto is head and shoulders the best animation system in the world,” testifies May. “It’s really been showing how well it holds up in complex scenes within films such as Incredibles 2 and Coco.”
Read more:
-
It's been a tough year for the face of Toys R Us, Geoffrey the Giraffe. Last September, when the famous toy retailer filed for bankruptcy, it looked like the long necked mascot's days were numbered. However, in a controversial move, it looks like Geoffrey is back to work as part of the branding and logo design for Geoffrey's Toy Box.
Not familiar with Geoffrey's Toy Box? If the company looks and sounds like an exhumed Toys R Us, that's because it is. According to a statement issued yesterday, the company has been bought out by a group of investors led by Geoffrey, LLC. The acquisition includes intellectual property and data associated with Toy R Us, including the childhood favourite of many, Geoffrey the Giraffe.
In the world of the brand created by Per Barry though, Geoffrey's reappearance has been sold as his return from a vacation. In a tweet from Toys R Us he's even strolling back with a packed suitcase, downplaying any suggestion of his recent crisis. As for the logo of Geoffrey's Toy Box, Geoffrey's bursting out of a toy chest with the anxious expression of a giraffe on borrowed time.
Not everyone is happy to see Geoffrey the Giraffe return
This upbeat, 'everything's fine' attitude has provoked a backlash from former Toys R Us employees, plenty of whom are still waiting for severance pay. Many have seen it as a PR stunt to cash-in on the nostalgia associated with Geoffrey the Giraffe, one that adds insult to injury for employees loyal to the Toys R Us brand.
With the run up to the holidays already underway, the launch of Geoffrey's Toy Box is certainly a canny business move, which could see investors leverage the brand and help pay off Toys R Us' remaining debts. For ex-workers though, the use of the brand will feel like nothing more than exploitation.
Related articles:
-
There have been numerous cross-platform mobile frameworks over the years, with steady improvements to developer experience and performance throughout. Google's Flutter is a new addition to the pack, and is particularly interesting because rather than using a JavaScript 'bridge' as many frameworks (such as React Native) do, it compiles to true native code.
You can find out a bit about how it works in the introductory video below, or read on for a step-by-step guide to getting started with Flutter. For more advice, take a look at our collection of tutorials explaining how to build an app.
In this tutorial, we'll look at how to set up Flutter and explore the basics of building apps using the framework, using macOS for our development. We'll assume that you've programmed before and know how to use the Bash shell, but might not have developed for mobile.
01. Get set up
You'll need to download and install a few things before you can make use of Flutter:
- Xcode for iOS support
- Android Studio for Android support
- Android SDK (download via Android Studio once you create a new project)
Once you have all of these, run Xcode and Android Studio, install the additional components they offer and create a new project to make sure they run.
Now you're ready to get started with Flutter. Download the Flutter SDK. Extract it to wherever you'd like it to be installed. We need to update our path so macOS can find Flutter wherever you invoke it. Open (or create) $HOME/.bash_profile:
Now add the flutter/bin directory to your $PATH:
Run a shell command to refresh the bash profile:
Now we can start using the Flutter CLI. The first thing to do is make sure you have the latest version:
02. Fix any problems
Once that's done, Flutter offers a handy diagnostic tool, which will check whether everything that you need is installed and set up correctly. It is really useful:
Take note of what the doctor tells you and respond to any issues that arise. You might have to run the doctor a couple of times to gain additional feedback and act on it.
Once the tool is happy with Flutter, Android Toolchain, iOS Toolchain and Android Studio, you are good to go. Don't worry about connected devices for now.
Xcode can require some extra steps at the shell to get it fully set up:
And Android Studio often needs the licence agreement accepting:
03. Find an IDE and start a new project
Now Flutter is set up, you'll want an IDE to work in. There are plugins available for Android Studio and IntelliJ. We're going to go with VS Code, which also has its own Flutter plugin.
Start up VS Code and click View > Command Palette. Type 'install' and select the Extensions: Install Extension action. Search for 'flutter' and install the Flutter plugin. Once done, restart VS Code.
We're now ready to begin developing. Start a new project through the Command Palette by selecting the Flutter: New Project option. Name your project, select where to save it and VS Code will invoke Flutter to generate the new project.
04. Set up virtual devices
To test our project, we'll want a device simulator to allow us on the desktop. In the bottom right-hand corner of VS Code (in the blue bar), you'll see something saying No Devices. If you've developed for mobile before, when you click this, you'll see your simulators available in the Command Palette.
If you have no simulators, run the following in the terminal to open the iOS simulator for the first time:
You should then see an iOS simulator available when you restart VS Code.
Android is more complex. Load Android Studio and within an Android project, click Tools > Android > AVD Manager. Select Create Virtual Device.
Select the device to emulate – for example a Google Pixel 2. Click Next and you can also choose a system image (i.e. OS version) to download. On the next page under Emulated Performance, select Hardware – GLES 2.0 to enable hardware graphics acceleration on the emulator. Finish the process.
Once you've created the virtual device in Android Studio, restart VS Code and you'll see your Android emulator appear alongside the iOS simulator in VS Code's device list.
Now, if you click No Devices, you can select an iOS or Android device and a virtual phone will fire up on your desktop. Try it out with an iPhone X simulator.
04. Test the starter app
Now the simulator is running, you can test out the starter app. Hit F5 or click Debug > Start Debugging. The app will load on the simulator and you can try interacting with it. Be patient if it doesn't happen immediately, as it can take some time to build.
Before we can do the same on Android, we need to install gradle dependencies for our project (a small nuance of Flutter right now). Navigate to the project root directory and run:
Then you can open an Android emulator and run the project in Debug mode as you did for iOS.
A great feature of Flutter is that it supports 'hot reloading' – that is, you can modify your source and see the changes reflected in the simulator right away. In main.dart, let's make a couple of changes to the MyApp class while the iPhone X simulator runs:
You should see the changes take effect as soon as you save.
06. Explore Flutter's widget system
What we haven't yet talked about is the Dart programming language that Flutter uses. Dart is an object-oriented language with C-style syntax, developed by Google and all Flutter development uses it. If you've already got some experience of web or mobile development, then it shouldn't be totally alien to you.
Everything in Flutter is based on widgets, which are the building blocks of an app. If you've used React before, Flutter's approach is very similar and widgets are analogous to components. Essentially your entire app can be decomposed into a hierarchy of widgets.
This is easily seen within the MyApp class. MyApp is a StatelessWidget (this means it's immutable). The build() method we are overriding tells Flutter how the widget should be rendered. This is similar to React's render() function.
The method returns a MaterialApp widget, which represents an app that uses Google's Material Design. This in turn has several properties, which are themselves widgets: ThemeData defines the visual style to be used and MyHomePage is a custom widget defined further down the main.dart file that contains the body of the app.
07. Edit your content
Unlike the stateless MyApp, MyHomePage is a stateful widget. This means its behaviour is defined by the _MyHomePageState class, enabling it to store information and change accordingly, such as when you press the button on the app.
You can see it's currently using many built-in widgets Flutter provides to handle common things like layout, buttons and text display. Let's make some changes to that class to modify what our app presents.
We've disposed of the existing content and replaced it with a brown Container widget but we also need to create a custom widget, RecipeWidget, that will be put in the container.
08. Load some assets
Next, let's load some assets with the app so we can add them to the ListView widget within RecipeWidget. Static assets for an app are specified in pubspec.yaml under the 'flutter' section:
We'll also create a simple data structure in main.dart, pairing images with strings to act as a thumbnail and summary for recipes.
09. Finish up
Finally, let's update RecipeWidget to build a list of widgets displaying the recipes. We use Image.asset to load the static assets we included in pubspec.yaml.
Hopefully you're starting to get a feel for how Flutter uses widgets to construct apps. Try using the simulator to rotate the device. The Flutter layout automatically accommodates the changes. For comparison, try the app on the Android emulator.
This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 310 or subscribe.
Read more:
-
Coding is undoubtedly one of today's most valuable skills. And, even if you're not set on being a hardcore app developer or programmer, having a working knowledge of today's coding staples can help you stand out on the job hunt or net some decent income on the side. The Complete Learn to Code Masterclass Bundle features nine beginner-friendly courses on today's top languages, like C++, JavaScript, and Python, and it's on sale for $39 today.
Spanning more than 70 hours of professional instruction, this collection is designed to take you from beginner to expert with several coding staples. You'll explore development tools, like HTML, CSS, PHP, and Bootstrap. Plus, you'll even get concrete experience as you follow along an e-commerce project and build a fully optimised webpage from scratch.
While the Complete Learn to Code Masterclass Bundle usually retails for $1,370, you can get it on sale today for only $39, saving 97 per cent off the usual price.
Related articles:
Threatpost: Fake Adobe Flash Updates Hide Malicious Crypto Miners
in Ειδήσεις από τον χώρο του Design και Hosting
Posted · Report reply
A fake Adobe update actually updates victims' Flash - but also installs malicious cryptomining malware.
View the full article