By TREVOR HOGGImages courtesy of Warner Bros. Entertainment Inc.Starting off as a motion-control cameraman on Batman, Angus Bickerton has gone on to to work with Tim Burton two more times and oversee the digital augmentation for Dark Shadows and Beetlejuice Beetlejuice, the long-awaited sequel to the cult classic where a mischievous ghost causes havoc for those alive and dead. It might be a combination of knowing me a little bit, reflects Angus Bickerton, Production VFX Supervisor on Beetlejuice Beetlejuice. Tim was wanting to put a project together and was keen to do it fairly quickly on a moderate budget. I like doing things practically wherever possible because I come from that background initially. Back when we were doing Batman, we didnt do anything digital or CGI.Tim Burton was insistent that the Shrinkers have animatronic shrunken heads and performers underneath them.Technological advances allowed for more visual sophistication. If you take the sandworms in the Titan desert, we wanted the lovely warm feel of the original stop-motion, Bickerton explains. Mackinnon & Saunders did actually stop-motion animate all of the sandworm shots, but One of Us composited the landscape. The landscape was made up of a digital matte painting and some CG noodle rocks, which are curly bedrocks. But then the simulations of the sandworm diving into the dunes on Titan thats where it got interesting. We played backwards and forwards on that one with Tim because in the original movie they probably put some sand on a tray and hit it from underneath, and they got splashes of sand that were used optically as elements for wherever the sandworm dived into the dunes. For us, we did it as a CG simulation. We showed Tim a variety, from trying to mimic a miniature element to trying to get some scale to it. We had to find an in-between level that was about right. We wanted to improve the look but didnt want to get too sophisticated.[I]f you look at the Shrinkers, which are animatronic, they have a stagey design. The Beetlejuice universe allows you a little bit of freedom of not being held to being completely photoreal. It did affect our thinking when we were approaching the sequences, how could we do it practically and augmented rather than just resort to CG? I wouldnt call that a huge challenge but a great joy.Angus Bickerton, Production VFX SupervisorMichael Keaton and Tim Burton reunite for the madcap world of Beetlejuice Beetlejuice, which aimed to capture the spirit of the original movie.One of Us worked with Framestore, BUF, Red VFX and Goldcrest VFX to create 1,200 visual effects shots. Framestore and One of Us were our two main vendors, with the Influencers sequence being the most complex as people literally get sucked into their smartphones. That was a late idea, Bickerton reveals. There is a moment in the original film when a couple have distorted their faces, which was all done with replacement animation and individually sculpted, remodeled faces. We wanted to evoke the feeling of the original, but we went for CG. I tried to stop- motion animate myself and warp myself to try being sucked into a phone. But Tim wanted more stress, like a wind tunnel effect on the faces, and have them look really frightened. Basically, we shot plates with and without them. We shot every character individually. We had to then divide the characters up into different levels, so if they were a hero character closer to camera, we scanned that particular performer in detail. We got them to go through the actions of pretending to be scared and sucked into the phone. We had a level of detail two for mid-ground characters, then a level of detail three for low-resolution background. Right at the end, Tim said, It would be nice to see the hair twitching. When you see the hair twitching, those were separately shot elements captured against bluescreen in our office.Tim [Burton] said, No. Im going to do [the Shrinkers] all practically. We never changed the performance at all. The genius is that its a combination of a physical performer and a puppeteer off-camera with a radio control unit getting those minimal movements. The Shrinkers are Keaton-esque, and by Keaton I mean Buster Keaton, as they do everything with a blank look in their eyes.Angus Bickerton, Production VFX SupervisorTim Burton and Michael Keaton discuss the finale which takes place in a church.Animatronic shrunken heads were placed on top of performers for the Shrinkers. They had a yellow suit on, white shirt, and a thin area on the top of the chest that lines up with where their eyes are, Bickerton states. They did have a limited vision, but its a credit to Tim. He said, No. Im going to do it all practically. We never changed the performance at all. The genius is that its a combination of a physical performer and a puppeteer off-camera with a radio control unit getting those minimal movements. The Shrinkers are Keaton-esque, and by Keaton I mean Buster Keaton, as they do everything with a blank look in their eyes. A new character named Delores staples herself back together. Thats an interesting mix. Tim was keen to get the majority of it in camera, so we did lot video-matics and blocking. Credit should go to Neal Scanlan and his team of puppeteers. When we did that sequence where Delores puts herself together, we had Monica Bellucci there and three other performance artists providing legs and arms the detached limbs. We did almost a black velvet theater where we blocked out the motion. Of course, they cant join a limb on, so we would get the elements as close as we could simply, then there is a fair degree of digital augmentation. If you wanted to see a stump end, we obviously had to tack on the end of a limb, arm or leg.Lydia Deetz (Winona Ryder) has gone on to become a host of a horror show called Ghost House.Recreated for the sequel from the original plans was the miniature representation of Winter River.A theatrical aesthetic rather than photorealism was the goal for Beetlejuice Beetlejuice.A running gag for Wolf Jackson (Willem Dafoe) is that he is always given a cup of hot coffee, which was combination of digital and practical steam captured in Angus Bickertons kitchen.A lot work went into the prosthetic makeup that reflected how the deceased died.Monica Bellucci portrays the ex-wife of Beetlejuice, Delores, who literally staples herself back together again.I tried to stop-motion animate myself and warp myself to try being sucked into a phone. But director] Tim [Burton] wanted more stress, like a wind tunnel effect on the faces, and have them look really frightened. We got them to go through the actions of pretending to be scared and sucked into the phone. Right at the end, Tim said, It would be nice to see the hair twitching. When you see the hair twitching, those were separately shot elements captured against bluescreen in our office.Angus Bickerton, Production VFX SupervisorRecreated using the original plans was the detailed model of the town of Winter River from which Beetlejuice emerges once again. We pulled the model apart and produced smoke and had under lights, but then we wanted to get a collapsing edge which we would have never gotten at a model of 1/58th scale, so thats CG augmented edges, remarks Bickerton. When it came to Michael Keaton actually emerging from the model, we had backed ourselves into a hole because we had built this model town into this replica attic and we were an 1/8 of a foot off on the deck. We raised the set by six feet. That allowed Michael to pull the model apart and cheat the camera angles so we could create a bigger gap and have Michael Keaton sitting on a camera dolly. We cranked him up with a camera dolly. There were two parts. Part one, he is sitting on the camera dolly so you get his head emerging. Part two, we put a standing platform on him. When you are behind him, the model is actually beyond him, and were shooting across his shoulder to make it look like hes in the miniature. The world-building revolved around plate photography. Because we aimed to get a lot of it in-camera, we were matching to what we shot. That train station to the great beyond was a big set, and we had to do minor set extensions and extensions to the train. We had an immigration hall, again a great set build by the art department, and we had good concept work, so we knew how to extend it in the same style of the cinematography, Bickerton explains.Outside of one shot where a Shrinker named Bob was enhanced with digital sweat, the rest of the performance was captured practically.The cinematography and lighting were as off-kilter as the story itself.Bickerton was excited about joining the project. When I had my earliest Zoom call with Tim, straightaway he said, I would like to do some stuff stop-motion. Neal Scanlan joined early on for a lot of the prosthetics and animatronics. With all due respect to Neal and his team, who were brilliant, if you look at the Shrinkers, which are animatronic, they have a stagey design. The Beetlejuice universe allows you a little bit of freedom of not being held to being completely photoreal. Overriding everything was the desire to retain the spirit of the original movie wherever possible. It did affect our thinking when we were approaching the sequences, how could we do it practically and augmented rather than just resort to CG? I wouldnt call that a huge challenge but a great joy.

Explore a wild and unrelenting new frontier when Monster Hunter Wilds releases on February 28 on PS5. We recently got to play through the main missions of Chapter 1, going up against colossal enemies including the new monster Quematrice and exploring the Scarlet Forest.Weapons now come with built-in Equipment SkillsIn previous series entries, various hunt-aiding skills were primarily granted through armor, talismans, and decorations, which you combined to create your build. However, in Monster Hunter Wilds, even weapons available early in the game come with built-in Equipment Skills tailored to the weapon type. For example, the Great Sword Buster Sword I features Critical Draw, while Bone Blade II offers Focus and Attack Boost. Since this game allows you to switch between two weapons during a hunt, its easier to leverage different skill combinations if you bring both a melee and a ranged weapon.Face off against the Brute Wyvern, Quematrice, and its fiery attacksThe hunter, after escorting the siblings, encounters the Brute Wyvern, Quematrice. This monster is a new addition to Monster Hunter Wilds. They take bites at the hunter once provoked, and also spread a flammable substance ignited by dragging their long tail along the ground. Getting hit by this attack leaves the hunter in a Fireblight state, which causes health to gradually deplete over time. As part of the first main mission, the huntert learns to deal with this ailment by utilizing Nulberries or evading tactfully.Seamlessly transition from the Windward Plains to the Scarlet ForestLater in the quest, the hunters head to the Scarlet Forest to investigate Doshagumas. I was amazed that I could ride my Seikret all the way from the plains to the forest without traveling back to base. The area transition was seamless with no loading screens, and it shows you how truly vast and connected the ecosystems are in this game.The Scarlet Forest is characterized by its towering trees and peculiar red-colored water. Its landscape is entirely different from the sandy deserts and rocky formations of the Windward Plains, offering a refreshing change of scenery. Along the way, I came across creatures not found in the Windward Plains, as well as a hideout inhabited by a Lynian tribe called Wudwuds. Im particularly excited to explore more of the Scarlet Forest when the game launches.Beware of the Lala Barina with its scarlet silk and dominating attacksThe first large monster youll encounter in the Scarlet Forest is the Temnoceran, Lala Barina. This monster strikes from anywhere from the trees while hanging by its thread, or from the air ready to ambush. When it shoots out red spores to attack, it opens its thorax to reveal tufts of scarlet hair that resemble a blooming rose. I managed to evade all the spore attacks but getting hit carries the risk of inflicting Paralysis.A thrilling hunt with the CongalalaThe next monster I encountered in the Scarlet Forest was the Pink Fur Beast, Congalala. While absent from Monster Hunter World, this fanged beast appeared in several past entries in the series. Its defining traits include its pink fur and of course, the foul fart attacks that can inflict Stench status.In addition to its flatulence, Congalala unleashes powerful belches, making its arsenal of Stench-inflicting moves particularly troublesome. Its a good idea to bring plenty of Deodorants with you to remove the Stench during battle. Its swift arm strikes, delivered with surprising agility for such a large creature, also pack a punch. On top of that, it sometimes retreats into a group of smaller Congas and attacks as a pack.A deadly struggle against Scarlet Forests apex predator, Uth DunaChapter 1 concludes with the hunt for the Uth Duna, a Leviathan that rules the Scarlet Forest as the apex predator. This monster frequently employs water-based attacks that inflict Waterblight, making stamina recovery more difficult. Its most spectacular move is a devastating body slam after soaring into the air, not only dealing massive damage but also toppling large trees in its path. When the Uth Duna unleashes this attack, its best to focus entirely on evasion.Uth Duna is a formidable foe, but thankfully, Olivia, a member of the Forbidden Lands Expedition Team, provides support during this mission. With Uth Dunas attention divided, it becomes easier to launch attacks from the sides or rear. However, Uth Duna also exhibits a unique behavior: it secretes bodily fluids that mix with water to form a protective veil around itself and alters its appearance. While in this state, the veil reduces the damage from the hunters attacks, so focus on targeting areas without the veil protection. Utilizing Focus Mode to target vulnerable spots will be the key to success.My playthrough this time focused on the main missions in Chapter 1, but I cannot wait to gather materials through optional quests and explore the vast beautiful world of Monster Hunter Wilds when it launches on February 28 on PS5*The video and images were captured from a version under development and may differ from the final product.

Today, December 3, marks PlayStations 30th anniversary. To celebrate, Sony Interactive Entertainment (SIE) hosted the 2024 PlayStation Partner Awards in Japan Asia (hereafter PlayStation Partner Awards), honoring all the incredible games and talented developers who released their games on PlayStation within the Japan/Asia region.In addition to celebrating the success of the 2024 PlayStation 5 and PlayStation 4 titles (October 2023 through September 2024), this years awards also recognized exceptional games created by Japanese and other Asian developers released on legacy PlayStation platforms over the past 30 years the original PlayStation, PlayStation 2, PlayStation Portable, PlayStation 3, PlayStation Vita, and PlayStation 4. Read on for a rundown of all the games that received awards at this event.Games are listed in alphabetical order.Excellence AwardAwarded to the title developed in the Japan/Asia region that have had a consistent and significant impact along with commercial success over the past three years*.Genshin Impact (HoYoverse)Grand AwardAwarded to the top three titles developed in the Japan and Asia regions with the highest worldwide sales between October 2023 and September 2024*.Black Myth: Wukong (Game Science Interactive Technology)Elden Ring: Shadow of the Erdtree (FromSoftware, Inc / Bandai Namco Entertainment Inc.)Final Fantasy VII Rebirth (Square Enix Co. Ltd)Partner AwardAwarded to titles developed in the Japan/Asia region with top-ranked worldwide sales between October 2023 and September 2024*, with particularly noteworthy accomplishments.Dragons Dogma 2 (Capcom Co., Ltd.)Honkai: Star Rail (HoYoverse)Like a Dragon: Infinite Wealth (Sega)Persona 3 Reload (Atlus Co., Ltd)Tekken 8 (Bandai Namco Entertainment Inc.)The First DescendantNexonZenless Zone ZeroHoYoverseSpecial AwardAwarded to PS5 titles developed in collaboration with SIE outside the Japan/Asia region that achieved outstanding success within Japan/Asia between October 2023 and September 2024*.Rise of the Ronin (SIE, developed by Koei Tecmo)Stellar Blade (SIE, developed by Shift Up)Users Choice AwardAwarded to the top five titles released in the Japan/Asia region between October 2023 and September 2024, selected by user votes in the Japan/Asia region, out of the top 30 titles with the longest total gameplay time.Black Myth: Wukong (Game Science Interactive Technology)Final Fantasy VII Rebirth (Square Enix Co. Ltd)Like a Dragon: Infinite Wealth (Sega)Rise of the Ronin (SIE, developed by Koei Tecmo)Stellar Blade (SIE, developed by Shift Up)PlayStation Generations AwardsAwarded to titles chosen by users in the Japan and Asia regions from each PlayStation generation the original PlayStation, PS2, PSP, PS3, PS Vita, and PS4. All games are previous PlayStation Partner Award winners.PlayStation Generations (1994 and beyond)Final Fantasy VII (Square Enix Co. Ltd.)PlayStation 2 Generations (2000 and beyond)Final Fantasy X (Square Enix Co. Ltd.)PlayStation Portable Generations (2004 and beyond)Monster Hunter Portable 3rd (Capcom Co., Ltd.)PlayStation 3 Generations (2006 and beyond)Metal Gear Solid 4: Guns of the Patriots (Konami Digital Entertainment, Inc.)PlayStation Vita Generations (2011 and beyond)Persona 4 Golden (Atlus Co., Ltd)PlayStation 4 Generations (2013 and beyond)Elden Ring (FromSoftware, Inc / Bandai Namco Entertainment Inc.)* SIEs indicators, such as player numbers, are also factored into the selection of nominees. Listed publishers are those of the Japanese PlayStation Store.Here are messages from the recipients of the Excellence Award and Grand Award to all the players.Genshin Impact(Hoyoverse)* Photo of the HoYoverse teams resident cat.I would like to express our sincere gratitude to our players and PlayStation! This new award marks a significant milestone in our journey over the past four years, reflecting the precious memories and moments of companionship shared with our players, as well as the long-lasting, stable, and trusting partnership weve built with PlayStation.The world of Genshin Impact is filled with endless possibilities, and our adventure is far from over. This year, weve arrived at Teyvats sixth nation Natlan. Here, Travelers can join forces with Natlans warriors and Saurian companions, soaring through the skies and delving into the earth, exploring the vast world to their hearts content. And moving forward, we will continue to create exciting and fresh content to show our appreciation for your continued attention and support. Dai WeiGame DesignerHoYoverseElden Ring: Shadow of the Erdtree(FromSoftware, Inc / Bandai Namco Entertainment Inc.)Thank you to all the gamers who have spent their time playing Elden Ring.We will continue to strive to deliver exciting and meaningful games to our fans. FromSoftware, IncElden Ring development teamThank you so much for this very prestigious award. Although there was a longer wait for the Shadow of the Erdtree compared to our previous DLCs, were delighted that so many players picked up the expansion to explore the all-new story in the Realm of Shadow. Were only able to continue receiving such awards nearly three years after the main games release, thanks to our loyal players continuing their journey in the Lands Between and keeping the game and community thriving. We would like to take this opportunity to thank everyone who has played the main game and DLC. Thank you very much. Bandai Namco Entertainment Inc.Elden Ring development teamBlack Myth: Wukong(Game Science Interactive TechnologyIt is an incredible honor to receive the Grand Award. This achievement wouldnt have been possible without the hard work of everyone at Game Science Interactive Technology and the support of our valued partners, as well as the enthusiastic response from all Black Myth: Wukong players.The inspiration for Black Myth: Wukong comes from Journey to the West, one of Chinas Four Great Classical Novels. Thanks to this masterpiece written over 400 years ago, and the fusion of Chinas rich cultural heritage with the latest advancements in game development technology, we were able to create an actionRPG that brings the grandeur and beauty of Chinese mythology to life. Moving forward, we will continue listening to player feedback, exploring cutting-edge technology, and creating more exciting gameplay and thought-provoking stories.Thanks to our distribution platforms and to every Destined One who has joined us on this westward journey! Feng JiFounder & CEO, Game DirectorGame ScienceFinal Fantasy VII Rebirth(Square Enix Co. Ltd)I am thrilled that Final Fantasy VII Rebirth was chosen for the Grand Award which is only awarded to the top three Japanese/Asian titles with the highest worldwide sales especially since Final Fantasy VII Remake received the same honor. I am truly grateful to the many fans who have supported this game and made it possible for us to receive this esteemed award.The Final Fantasy VII remake trilogy will finally conclude with the next installment. The team is working incredibly hard to make it a rewarding finale, so we hope that you will continue to support us. Naoki HamaguchiDirectorSquare Enix Co. Ltd

Ubisoft will shut down its free-to-play shooter XDefiant, Ubisoft announced Tuesday. Servers will remain on until June 3, 2025, but the game will no longer be offered for download, and player registration will be closed. Despite the sunsetting, XDefiant players will get access to its third-season content sometime in the near future. Nearly 300 people 143 in the San Francisco office and 134 across Ubisofts Osaka and Sydney locations will be laid off. The other half of the XDefiant production team will move onto other roles at Ubisoft, according to chief studios and portfolio officer Marie-Sophie de Waubert.Despite an encouraging start, the teams passionate work, and a committed fan base, weve not been able to attract and retain enough players in the long run to compete at the level we aim for in the very demanding free-to-play FPS market, de Waubert wrote in an internal notice published on the Ubisoft website. As a result, the game is too far away from reaching the results required to enable further significant investment, and we are announcing that we will be sunsetting it.With XDefiant shutting down and the hundreds of layoffs, Ubisoft said its closing its San Francisco and Osaka production studios entirely. Insider Gaming reported that a skeleton crew will be kept on to keep XDefiant running until its total closure.XDefiant players who purchased the $69.99 Ultimate Founders Pack will get a full, automatic refund, according to XDefiant executive producer Mark Rubin in a letter to the community. All purchases made within the prior 30 days will be refunded, too. Rubin said players should expect the refunds within eight weeks.XDefiant was released on May 21 of this year, following an announcement of the project in 2021. At launch, the game was seemingly a success: It reportedly reached 1 million players within hours of its official launch, according to Insider Gaming. No official player or revenue numbers have been released, but Ubisoft CEO Yves Guillemot said during an investor call in September that the game did not meet expectations. In October, Rubin posted on X that numbers were down due to very little marketing, a strategy designed to get the game in a better place before ramping up marketing to attract new and lapsed players. He wrote that he was crystal clear in that there were no plans to close XDefiant after its fourth season, following an Insider Gaming report.In its most recent earnings report in late October, Ubisoft reported that its sales were down nearly 20%, but that engagement metrics for its games were up. Ubisoft also reported that it decreased its staff by more than 2,000 people in the prior 24 months a number that is likely a mixture of both layoffs and voluntary departures. Ubisoft employs 18,666 people as of September, with the company reportedly on track to continue reducing costs. (Staff retention, it said, was good close to historical levels.) Star Wars Outlaws underperformed, Ubisoft said, but stayed quiet on the status of XDefiant so quiet on the game that an analyst questioned Guillemont on the games dwindling success. XDefiant is behind our expectations but the games-as-a-service strategy remains core, Guillemont said at the time. That line still appears to be true: de Waubert said in the notice to staff on Tuesday that games-as-a-service remains a pillar of Ubisofts strategy, citing success with Rainbow Six, The Crew, and For Honor.

Indiana Jones and the Great Circle sees the titular hero swing back into the video games following a long hiatus (assuming we ignore his Fortnite appearance).The Xbox and PC release is being staggered out across two dates, with an early access period on Friday, Dec. 6, ahead of the full launch on Monday, Dec. 9. Those on PS5, meanwhile, have to wait until spring 2025.Find out what time Indiana Jones and the Great Circle releases in your time zone below, how to play in early access, and through Game Pass.How to play Indiana Jones and the Great Circle in early accessTo play Indiana Jones and the Great Circle in early access, you need to purchase either:Premium Edition (digital or physical)Premium Upgrade, for those playing the standard digital edition, including through an Xbox Game Pass Ultimate or PC Game Pass subscriptionCollectors EditionAs well as playing three days early, the first two editions also grant access to the The Order of Giants story DLC (when it releases), a digital artbook, and the Temple of Doom in-game outfit.What time does Indiana Jones and the Great Circle release in early access?Due to its global release time, Indiana Jones and the Great Circle technically releases in early access on Thursday, Dec. 5, in the Americas, or Friday, Dec. 6, across the rest of the world.The Indiana Jones and the Great Circle release time in your time zone is as follows:4 p.m. PST on Thursday, Dec. 5 for the West Coast of North America7 p.m. EST on Thursday, Dec. 5 for the East Coast of North America12 a.m. GMT on Friday, Dec. 6 for the U.K.1 a.m. CET on Friday, Dec. 6 for west mainland Europe9 a.m. JST on Friday, Dec. 6 for TokyoThe above applies to both PC and Xbox, but only those with the Premium Edition, the Premium Upgrade, or the Collectors Edition. The times will then likely be the same for Mondays standard release.Is Indiana Jones and the Great Circle on Game Pass?Indiana Jones and the Great Circle will be playable through Xbox Game Pass Ultimate and PC Game Pass, but only from the standard release date of Monday, Dec. 9.If you wish to play in early access three days earlier, then you can purchase the Premium Upgrade, provided you have one of the above subscriptions similar to how Starfield worked last year.Make sure to check which version of Game Pass you own, as Indiana Jones and the Great Circle will not be available for Standard and Core subscribers.

Earlier this month, we wrapped up our SmashingConfs 2024, and one subject that kept coming up over and over again among attendees, between speakers, and even within the staff was what would we like to get better at next year?It seems like everyone has a different answer, but one thing is for sure: Smashing can help you with that. Save 30% on Books and Workshops (3+ items)Good news for people who love a good value for a friendly price: until Thursday, 5 December, you can save 30% off three or more books and eBooks, 30% off three or more workshops, or get the entire Smashing eBook library for $75. This is a perfect time to set yourself up for a year of learning in 2025.Build Your Own Bundle!Our hardcover books are our editorial flagships. They deliver in-depth knowledge and expertise shared by experts from the industry. No fluff or theory, only practical tips and insights you can apply to your work right away.No matter if you want to complete your existing Smashing book collection or start one from scratch, you can now pick and mix your favorite books and eBooks from our Smashing Books line-up to create a bundle tailored to your needs. Or take a look at our bundle recommendations below for some inspiration. Browse all Smashing BooksSave 30% with 3 or more books. No ifs or buts!Until Thursday, 5 December, the 30% book discount will automatically apply to your cart once you add three or more items. Please note that the discount cant be combined with other discounts.Once youve decided which books should go into your bundle, well pack everything up safely and send the parcel right to your doorstep from our warehouse in Germany. Shipping is free worldwide. Check delivery times.Book Bundle RecommendationsWe know decisions can be hard, thats why we collected some ideas for themed book bundles to make the choice at least a bit easier. These bundles are perfect if you want to enhance your skills in one particular field.You can click on each book title to jump to the details and add the book to your cart. The discount will be applied during checkout.Front-End Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25Bundle price: $102.38Front-End Bundle dives deep into the challenges front-end developers face in their work every day whether its performance, TypeScript and Image Optimization. Youll learn practical strategies to make your workflow more efficient, but also gain precious insights into how teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify tackle common challenges and frustrations.Success at Scale by Addy OsmaniTypeScript in 50 Lessons by Stefan BaumgartnerImage Optimization by Addy OsmaniDesign Best Practices Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25Bundle price: $102.38Design Best Practices Bundle is all about creating respectful, engaging experiences that put your users well-being and privacy first. The practical and tactical tips help you encourage users to act without employing dark patterns and manipulative techniques and grow a sustainable digital business that becomes more profitable as a result.Click! How to Encourage Clicks Without Shady Tricks by Paul BoagUnderstanding Privacy by Heather BurnsThe Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim AndersenInterface Design Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $144.00Bundle price: $100.80A lot of websites these days look rather generic. Our Interface Design Bundle will make you think outside the box, exploring how you can create compelling, effective user experiences, with clear intent and purpose for both desktop and mobile.Touch Design for Mobile Interfaces by Steven HooberArt Direction for the Web by Andy ClarkeSmart Interface Design Patterns Checklist Cards by Vitaly FriedmanBig Design Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $292.50Bundle price: $204.75The Big Design Bundle shines a light on the fine little details that go into building cohesive, human-centered experiences. Covering everything from design systems to form design patterns, mobile design to UX, and data privacy to ethical design, it provides you with a solid foundation for designing products that stand out from the crowd.Click! How to Encourage Clicks Without Shady Tricks by Paul BoagThe Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim AndersenDesign Systems by Alla KholmatovaForm Design Patterns by Adam SilverTouch Design for Mobile Interfaces by Steven HooberUnderstanding Privacy by Heather BurnsSpecial Deal For eBook LoversGet all eBooks for $75. Youre more of an eBook kind of person? The bundle-up discounts do apply to eBooks, too, of course. Or take a look at our Smashing Library to save even more: It includes 68 eBooks (including all our latest releases) for $75 (PDF, ePUB, and Kindle formats). Perfect to keep all your favorite books close when youre on the go.Bundle Up On Online Workshops: 30% Off On 3+ WorkshopsReady to dig even deeper? Whether you want to explore design patterns for AI interfaces, learn how to plan a design system, or master the art of storytelling, our online workshops are a friendly way to boost your skills online and learn practical, actionable insights from experts, live. To prepare for the challenges that 2025 might have in store for you, you can now bundle up 3 or more online workshops and save 30% on the total price with code BUNDLEUP. Please note that the discount cant be combined with other discounts. Take a look at all our upcoming workshops and start your smashing learning journey this winter.Custom Bundles To Fit Your Needs!Do you need a custom bundle? At Smashing, we would love to know how we can help you and your team make the best of 2025. Lets think big!Wed be happy to craft custom bundles that work for you:Group discounts on large teams for Smashing Membership,Bulk discounts on books or other learning materials for education or non-profit groups,Door prize packages for meetups and events,...any other possibilities for your team, your office, your career path. Let us know via contact form!We are always looking for new ways to support our community. Please contact us if youd like us to craft a custom bundle for your needs, or if you have any questions at all. Lets have a great year!Community Matters Producing a book or a workshop takes quite a bit of time, and we couldnt pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their kind, ongoing support. Happy learning, everyone!

For a multistep form, planning involves structuring questions logically across steps, grouping similar questions, and minimizing the number of steps and the amount of required information for each step. Whatever makes each step focused and manageable is what should be aimed for.In this tutorial, we will create a multistep form for a job application. Here are the details we are going to be requesting from the applicant at each step:Personal InformationCollects applicants name, email, and phone number.Work ExperienceCollects the applicants most recent company, job title, and years of experience.Skills & QualificationsThe applicant lists their skills and selects their highest degree.Review & SubmitThis step is not going to collect any information. Instead, it provides an opportunity for the applicant to go back and review the information entered in the previous steps of the form before submitting it.You can think of structuring these questions as a digital way of getting to know somebody. You cant meet someone for the first time and ask them about their work experience without first asking for their name.Based on the steps we have above, this is what the body of our HTML with our form should look like. First, the main <form> element:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Step 1 is for filling in personal information, like the applicants name, email address, and phone number:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <fieldset class="step" id="step-1"> <legend id="step1Label">Step 1: Personal Information</legend> <label for="name">Full Name</label> <input type="text" id="name" name="name" required /> <label for="email">Email Address</label> <input type="email" id="email" name="email" required /> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone" required /> </fieldset> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Once the applicant completes the first step, well navigate them to Step 2, focusing on their work experience so that we can collect information like their most recent company, job title, and years of experience. Well tack on a new <fieldset> with those inputs:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <fieldset class="step" id="step-2" hidden> <legend id="step2Label">Step 2: Work Experience</legend> <label for="company">Most Recent Company</label> <input type="text" id="company" name="company" required /> <label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required /> <label for="yearsExperience">Years of Experience</label> <input type="number" id="yearsExperience" name="yearsExperience" min="0" required /> </fieldset> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Step 3 is all about the applicant listing their skills and qualifications for the job theyre applying for:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <fieldset class="step" id="step-3" hidden> <legend id="step3Label">Step 3: Skills & Qualifications</legend> <label for="skills">Skill(s)</label> <textarea id="skills" name="skills" rows="4" required></textarea> <label for="highestDegree">Degree Obtained (Highest)</label> <select id="highestDegree" name="highestDegree" required> <option value="">Select Degree</option> <option value="highschool">High School Diploma</option> <option value="bachelor">Bachelor's Degree</option> <option value="master">Master's Degree</option> <option value="phd">Ph.D.</option> </select> </fieldset> <!-- Step 4: Review & Submit --> <fieldset class="step" id="step-4" hidden> <legend id="step4Label">Step 4: Review & Submit</legend> <p>Review your information before submitting the application.</p> <button type="submit">Submit Application</button> </fieldset></form>And, finally, well allow the applicant to review their information before submitting it:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --> <fieldset class="step" id="step-4" hidden> <legend id="step4Label">Step 4: Review & Submit</legend> <p>Review your information before submitting the application.</p> <button type="submit">Submit Application</button> </fieldset></form>Notice: Weve added a hidden attribute to every fieldset element but the first one. This ensures that the user sees only the first step. Once they are done with the first step, they can proceed to fill out their work experience on the second step by clicking a navigational button. Well add this button later on.Adding StylesTo keep things focused, were not going to be emphasizing the styles in this tutorial. What well do to keep things simple is leverage the Simple.css style framework to get the form in good shape for the rest of the tutorial.If youre following along, we can include Simples styles in the document <head>:<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />And from there, go ahead and create a style.css file with the following styles that Ive folded up.<details> <summary>View CSS</summary> body { min-height: 100vh; display: flex; align-items: center; justify-content: center; } main { padding: 0 30px; } h1 { font-size: 1.8rem; text-align: center; } .stepper { display: flex; justify-content: flex-end; padding-right: 10px; } form { box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); padding: 12px; } input, textarea, select { outline: none; } input:valid, textarea:valid, select:valid, input:focus:valid, textarea:focus:valid, select:focus:valid { border-color: green; } input:focus:invalid, textarea:focus:invalid, select:focus:invalid { border: 1px solid red; }</details>Form Navigation And ValidationAn easy way to ruin the user experience for a multi-step form is to wait until the user gets to the last step in the form before letting them know of any error they made along the way. Each step of the form should be validated for errors before moving on to the next step, and descriptive error messages should be displayed to enable users to understand what is wrong and how to fix it.Now, the only part of our form that is visible is the first step. To complete the form, users need to be able to navigate to the other steps. We are going to use several buttons to pull this off. The first step is going to have a Next button. The second and third steps are going to have both a Previous and a Next button, and the fourth step is going to have a Previous and a Submit button.<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <fieldset> <!-- ... --> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 2: Work Experience --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 3: Skills & Qualifications --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 4: Review & Submit --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="submit">Submit Application</button> </fieldset></form>Notice: Weve added onclick attributes to the Previous and Next buttons to link them to their respective JavaScript functions: previousStep() and nextStep().The Next ButtonThe nextStep() function is linked to the Next button. Whenever the user clicks the Next button, the nextStep() function will first check to ensure that all the fields for whatever step the user is on have been filled out correctly before moving on to the next step. If the fields havent been filled correctly, it displays some error messages, letting the user know that theyve done something wrong and informing them what to do to make the errors go away. Before we go into the implementation of the nextStep function, there are certain variables we need to define because they will be needed in the function. First, we need the input fields from the DOM so we can run checks on them to make sure they are valid.// Step 1 fieldsconst name = document.getElementById("name");const email = document.getElementById("email");const phone = document.getElementById("phone");// Step 2 fieldsconst company = document.getElementById("company");const jobTitle = document.getElementById("jobTitle");const yearsExperience = document.getElementById("yearsExperience");// Step 3 fieldsconst skills = document.getElementById("skills");const highestDegree = document.getElementById("highestDegree");Then, were going to need an array to store our error messages.let errorMsgs = [];Also, we would need an element in the DOM where we can insert those error messages after theyve been generated. This element should be placed in the HTML just below the last fieldset closing tag:<div id="errorMessages" style="color: rgb(253, 67, 67)"></div>Add the above div to the JavaScript code using the following line:const errorMessagesDiv = document.getElementById("errorMessages");And finally, we need a variable to keep track of the current step.let currentStep = 1;Now that we have all our variables in place, heres the implementation of the nextstep() function:function nextStep() { errorMsgs = []; errorMessagesDiv.innerText = ""; switch (currentStep) { case 1: addValidationErrors(name, email, phone); validateStep(errorMsgs); break; case 2: addValidationErrors(company, jobTitle, yearsExperience); validateStep(errorMsgs); break; case 3: addValidationErrors(skills, highestDegree); validateStep(errorMsgs); break; }}The moment the Next button is pressed, our code first checks which step the user is currently on, and based on this information, it validates the data for that specific step by calling the addValidationErrors() function. If there are errors, we display them. Then, the form calls the validateStep() function to verify that there are no errors before moving on to the next step. If there are errors, it prevents the user from going on to the next step.Whenever the nextStep() function runs, the error messages are cleared first to avoid appending errors from a different step to existing errors or re-adding existing error messages when the addValidationErrors function runs. The addValidationErrors function is called for each step using the fields for that step as arguments.Heres how the addValidationErrors function is implemented:function addValidationErrors(fieldOne, fieldTwo, fieldThree = undefined) { if (!fieldOne.checkValidity()) { const label = document.querySelector(label[for="${fieldOne.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (!fieldTwo.checkValidity()) { const label = document.querySelector(label[for="${fieldTwo.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (fieldThree && !fieldThree.checkValidity()) { const label = document.querySelector(label[for="${fieldThree.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (errorMsgs.length > 0) { errorMessagesDiv.innerText = errorMsgs.join("\n"); }}This is how the validateStep() function is defined:function validateStep(errorMsgs) { if (errorMsgs.length === 0) { showStep(currentStep + 1); }}The validateStep() function checks for errors. If there are none, it proceeds to the next step with the help of the showStep() function.function showStep(step) { steps.forEach((el, index) => { el.hidden = index + 1 !== step; }); currentStep = step;}The showStep() function requires the four fieldsets in the DOM. Add the following line to the top of the JavaScript code to make the fieldsets available:const steps = document.querySelectorAll(".step");What the showStep() function does is to go through all the fieldsets in our form and hide whatever fieldset is not equal to the one were navigating to. Then, it updates the currentStep variable to be equal to the step were navigating to.The Previous ButtonThe previousStep() function is linked to the Previous button. Whenever the previous button is clicked, similarly to the nextStep function, the error messages are also cleared from the page, and navigation is also handled by the showStep function. function previousStep() { errorMessagesDiv.innerText = ""; showStep(currentStep - 1);}Whenever the showStep() function is called with currentStep - 1 as an argument (as in this case), we go back to the previous step, while moving to the next step happens by calling the showStep() function with currentStep + 1" as an argument (as in the case of the validateStep() function).Improving User Experience With Visual CuesOne other way of improving the user experience for a multi-step form, is by integrating visual cues, things that will give users feedback on the process they are on. These things can include a progress indicator or a stepper to help the user know the exact step they are on.Integrating A StepperTo integrate a stepper into our form (sort of like this one from Material Design), the first thing we need to do is add it to the HTML just below the opening <form> tag.<form id="jobApplicationForm"> <div class="stepper"> <span><span class="currentStep">1</span>/4</span> </div> <!-- ... --></form>Next, we need to query the part of the stepper that will represent the current step. This is the span tag with the class name of currentStep.const currentStepDiv = document.querySelector(".currentStep");Now, we need to update the stepper value whenever the previous or next buttons are clicked. To do this, we need to update the showStep() function by appending the following line to it:currentStepDiv.innerText = currentStep;This line is added to the showStep() function because the showStep() function is responsible for navigating between steps and updating the currentStep variable. So, whenever the currentStep variable is updated, the currentStepDiv should also be updated to reflect that change.Storing And Retrieving User DataOne major way we can improve the forms user experience is by storing user data in the browser. Multistep forms are usually long and require users to enter a lot of information about themselves. Imagine a user filling out 95% of a form, then accidentally hitting the F5 button on their keyboard and losing all their progress. That would be a really bad experience for the user.Using localStorage, we can store user information as soon as it is entered and retrieve it as soon as the DOM content is loaded, so users can always continue filling out their forms from wherever they left off. To add this feature to our forms, we can begin by saving the users information as soon as it is typed. This can be achieved using the input event.Before adding the input event listener, get the form element from the DOM:const form = document.getElementById("jobApplicationForm");Now we can add the input event listener:// Save data on each input eventform.addEventListener("input", () => { const formData = { name: document.getElementById("name").value, email: document.getElementById("email").value, phone: document.getElementById("phone").value, company: document.getElementById("company").value, jobTitle: document.getElementById("jobTitle").value, yearsExperience: document.getElementById("yearsExperience").value, skills: document.getElementById("skills").value, highestDegree: document.getElementById("highestDegree").value, }; localStorage.setItem("formData", JSON.stringify(formData));});Next, we need to add some code to help us retrieve the user data once the DOM content is loaded.window.addEventListener("DOMContentLoaded", () => { const savedData = JSON.parse(localStorage.getItem("formData")); if (savedData) { document.getElementById("name").value = savedData.name || ""; document.getElementById("email").value = savedData.email || ""; document.getElementById("phone").value = savedData.phone || ""; document.getElementById("company").value = savedData.company || ""; document.getElementById("jobTitle").value = savedData.jobTitle || ""; document.getElementById("yearsExperience").value = savedData.yearsExperience || ""; document.getElementById("skills").value = savedData.skills || ""; document.getElementById("highestDegree").value = savedData.highestDegree || ""; }});Lastly, it is good practice to remove data from localStorage as soon as it is no longer needed:// Clear data on form submitform.addEventListener('submit', () => { // Clear localStorage once the form is submitted localStorage.removeItem('formData');}); Adding The Current Step Value To localStorageIf the user accidentally closes their browser, they should be able to return to wherever they left off. This means that the current step value also has to be saved in localStorage.To save this value, append the following line to the showStep() function:localStorage.setItem("storedStep", currentStep);Now we can retrieve the current step value and return users to wherever they left off whenever the DOM content loads. Add the following code to the DOMContentLoaded handler to do so:const storedStep = localStorage.getItem("storedStep");if (storedStep) { const storedStepInt = parseInt(storedStep); steps.forEach((el, index) => { el.hidden = index + 1 !== storedStepInt; }); currentStep = storedStepInt; currentStepDiv.innerText = currentStep; }Also, do not forget to clear the current step value from localStorage when the form is submitted.localStorage.removeItem("storedStep");The above line should be added to the submit handler.Wrapping UpCreating multi-step forms can help improve user experience for complex data entry. By carefully planning out steps, implementing form validation at each step, and temporarily storing user data in the browser, you make it easier for users to complete long forms.For the full implementation of this multi-step form, you can access the complete code on GitHub.

The thought of historic Philadelphia conjures up a mixture of vignettes from Americas collective memory including 19th century brownstones and post-industrial blocks as recent as the 1960s. Gnome Architects adds to that image bank with the design for their Delancy Residence, a contemporary work situated within a modernist neighborhood in close proximity to the waterfront Schuylkill River park and historic Fitler Square. Pulling from the local landscape, and with great respect for existing architectural vernacular, the firm creates new connective tissue between nature and neighborhood, present and past.The property is steeped in tradition providing the bones from an original structure, which had suffered a major fire, for Gnome Architects to flesh out into an updated home in service of a young family a solution that echoes a way of life lost to the average current new build. Using the surviving structure as a plinth, the challenge became finding ways to expand vertically while adhering to zoning constraints and avoiding ostentatious exterior finishes.I think that one of the core values and pieces that we always try to incorporate into our projects is really just the importance of context, says Gabriel Deck, Principal and Design Director at Gnome Architects. We acknowledge the significance of the neighborhood context making its way into how we react to a design and a design solution.The addition creates a stacked box of interconnecting volumes stitched together by a skylit switchback staircase. The composition is informed by minimalist geometry that, together with the facades graphic language, must address a variety of contextual requirements: reconcile aesthetics with adjacent mid-century modern housing, preserve the existing entry courtyard and second floor street-facing terrace, and mitigate horizontal expansion through step-backs with additional floors. Passersby and neighbors alike can appreciate how the envelopes original stucco and board-formed elements transition to a field of textured cement panels with generous glazing staggered as the windows ascend.Each space has its own unique character and enhances the connection between indoor and outdoor living, which is a priority for the residents. Upon arrival, guests are greeted by a privacy gate before a procession through the courtyard and into the foyer. The home comprises four livable floors atop a basement where the gym and media center are located. The first floor at ground level contains three bedrooms located in corners opposite the car port.As visitors circulate upwards, they move to the second floor, which contains the main entertainment space. Programming, including a generous living room, kitchen, and dining area, fill out the rest of the sprawling open plan. Though the space has unadulterated flow, things like finishes, furnishings, and thoughtful built-ins help parse the plan. The third floor is dedicated to the primary suite and creature comforts like a hot tub deck. The fourth floor is now an office, den, or all-around quiet lounge that butts up against the highest new terrace.We were challenged by the homeowners with trying to fit all of those program pieces into this very tight box. they really trusted us to guide them along the way. Deck adds. Fitting a lot within a very tight box was the name of the game and theyve given us a lot of praise for pulling off successfully.To see this and other works by the firm, visit gnomearch.com.Photography by Daniel Isayeff.

Two new glassware collections have been introduced by NUDE for 2024: Juno and Mars. Based in Istanbul, NUDE continues to charm with home accessories and serveware that blend contemporary aesthetics with timeless utility. Each piece showcases the brands commitment to Turkish heritage and artisanal glassmaking, with its signature crystalline glass creations offering both beauty and practicality.NUDE employs over 350 master blowers to produce blown and press-blown glassware. The brands artisanal approach, combined with modern techniques, ensures every piece is meticulously handmade. NUDEs lead-free crystal is not only visually striking but also strengthened by its mineral composition, resulting in glassware that is durable, refined, and thin perfect for everyday use.Designed in-house by NUDE and Edizalp Akin, the Juno collection is a bold statement in serveware. Its curvaceous forms and vibrant, functional accents such as colorful glass balls make each piece as artistic as it is practical. The collection includes a carafe with a glass, a cake dome, serving plate, and mini serving plate, all handcrafted from crystalline glass in shades of opal grey, clear, and apricot. Junos sculptural design makes it a conversation starter that elevates any gathering, blending style with function effortlessly no matter what is being served.The Mars collection, created by Pentagon Design, draws inspiration from the planet Mars and its moons. Featuring globe-shaped vessels in transparent apricot and steel blue, the design echoes planetary hues while enhancing the beauty of the florals or greenery they cradle. Made from mouth-blown glass, Mars pieces are available in three sizes Small, Medium, and Large accommodating everything from a single bud to an abundant bouquet.Learn more about Juno and Mars at nudeglass.com.

What the discovery of the double-helix DNA structure can teach us about presenting data.Continue reading on UX Collective