Posts By :

Parini Vyas

ui ux, ui ux designing, ui ux process, designing, user interface, user experience, web application, phone application, web designing, unity 3d, web game, multiplayer game, whiteboard animation, web designing, furniture app, virtual reality application, online store app, ux research, ux design
Importance of UI UX in Web and App Design 1024 683 Parini Vyas

Importance of UI UX in Web and App Design
Building a Mobile App, Game, or Web App? Don’t Forget the UI/UX!

It’s a fact.. While most businesses are busy ensuring their app runs smoothly, has no coding errors, and that buttons and icons are perfectly aligned, they often overlook one crucial aspect: UI/UX.

Yes, the term UX & UI actually means something! It’s not just about making sure the app works; or the text is aligned properly.. it includes a lot more than that.. the color combination , the icon sizes, the buttons (if they are interactive or animated) , the font you use and so so many other things..

Think of it this way: a UI designer can either make your business soar or sink.

And trust me, they can’t work their magic on a diet of peanuts when they deserve a Toblerone!

The Importance of UI UX is often overlooked and many investors or businesses often wonder about what went wrong with their application

In 2021, we had the opportunity to work on Buhler’s web-based whiteboard application, which also functioned as a multiplayer game. Throughout the project, we made numerous UI/UX improvements based on user feedback. To ensure the best experience, we conducted several internal tests, inviting all team members to participate.

Testing the entire game took over 30 minutes, as each round lasted 4 minutes and involved 4 players. Some rounds were turn-based, requiring each player to wait for their turn, while others were real-time, allowing for simultaneous play. The testing sessions were not only productive but also enjoyable, as testers could draw and sketch on the whiteboard, providing a fun break from their regular work.

 

ui ux, ui ux designing, ui ux process, designing, user interface, user experience, web application, phone application, web designing, unity 3d, web game, multiplayer game, whiteboard animation, web designing

Mock up Design for Buhler’s Whiteboard Multiplayer Game

In today’s digital age, the success of a website or application hinges on its ability to attract and retain users. Both UI and UX are critical components that can make or break the user’s interaction with a digital product. So why UI/UX is so important, when I already have good animations inside my Gaming application, or say I already have lots of coupons to offer to the end-user in my app, I already have amazing products to offer on my website,. When I already have so much to offer to the User.. why should I focus on the UI and the UX?

What is UI Design?

UI design refers to the visual elements of a product. It encompasses everything a user interacts with on the screen, including buttons, icons, spacing, typography, and color schemes. The goal of UI design is to create an aesthetically pleasing interface that is easy to navigate and use.

What is UX Design?

UX design, on the other hand, focuses on the overall experience a user has with a product. It involves understanding the user’s needs and creating a seamless journey from start to finish. UX design includes aspects like usability, accessibility, and the overall satisfaction a user derives from interacting with the product.

ui ux, ui ux designing, ui ux process, designing, user interface, user experience, web application, phone application, web designing, unity 3d, web game, multiplayer game, whiteboard animation, web designing, furniture app, virtual reality application, online store app, ux research, ux design

UI Design for a Metaverse Application with ability to purchase and place furniture in the Virtual World

 

Why UI/UX is Important

1. First Impressions is the last impression : Users judge an app within seconds. A sleek design can captivate them instantly. A well-designed UI can create a positive first impression, encouraging users to stay longer and explore more.
2. User Retention: A great UI/UX keeps users coming back. It’s like a good book you can’t put down. Interactive elements, intuitive navigation, and a visually appealing interface can significantly increase user engagement.
3. Brand Credibility: A polished app boosts your brand’s credibility and trustworthiness.
4. Competitive Edge: Stand out in a crowded market with a unique and engaging design.
5. Enhanced User Satisfaction: Good UX design ensures that users can easily navigate through the product, find what they need, and complete their tasks without frustration. This leads to higher user satisfaction and loyalty.
6. Improved Accessibility: Inclusive design practices ensure that digital products are accessible to all users, including those with disabilities. This not only broadens your audience but also demonstrates social responsibility.
7. Higher Conversion Rates: Effective UI/UX design can lead to higher conversion rates. By guiding users through a smooth journey and reducing friction points, you can increase the likelihood of users completing desired actions, such as making a purchase or signing up for a newsletter.
8. Reduced Development Costs: Investing in UI/UX design early in the development process can save costs in the long run. Identifying and addressing usability issues before the product launch can prevent costly redesigns and fixes later.

Conclusion

In conclusion, The importance of UI and UX design are not just about making a product look good; they are about creating a meaningful and enjoyable experience for users. By prioritizing UI/UX design, businesses can enhance user satisfaction, increase engagement, and ultimately drive success in the digital landscape.

You can check out our Web based Games here: https://www.youtube.com/@humanresource7743

Also Do check our E-learning Videos here : https://www.youtube.com/@BLUECREAZIONE

Our Games on

Playstore : https://play.google.com/store/apps/developer?id=Blue+Creazione&hl=en

AppleStore : https://apps.apple.com/us/developer/blue-creazione/id822937241

Steam : https://store.steampowered.com/app/1171950/Dragon_Little_Fighters_2/

Visit us on:

pinterest

 

Talk to us :

game development pre production, level designing, level design, stages, game development, game design, 3d animation, maya, unity 3d, blender, 3d production, motion graphic, animation, game development process, game production , gaming company, android game, ios game, steam game, gaming process, game development, unity technology, unreal engine, video game development process, game development phases, game development process
Game Development Process 1024 576 Parini Vyas

Game Development Process

I recently came across a video that suggested everyone should work in a startup at least once in their life. This got me thinking about the unique benefits of working in a startup, especially compared to well-known, established companies. The speaker in the video highlighted several key points:

  1. Comprehensive Project Experience: In a startup, you get to see a project through from inception to post-production. This holistic view is invaluable for understanding the full lifecycle of a project.
  2. Close Collaboration with Leadership: Working closely with CEOs and clients is a common experience in startups. This direct interaction can significantly boost your confidence and workflow.
  3. Direct Client Interaction: Even if you’re not a project manager, in a startup, you often find yourself directly answerable to clients. This responsibility can be a great confidence booster and enhance your professional growth.
  4. Small Teams, Less Chaos: Startups typically have smaller teams, which means less bureaucracy and more streamlined communication.

Reflecting on these points, I realized how true they are based on my own experience with our startup. We began developing in-house games in 2018, starting with brainstorming ideas about character and level design. Here’s a glimpse into our journey:

1. Game Ideation

The first step in our game development process was ideation. In 2019, we moved into pre-production, where every team member was involved in brainstorming and documenting each level. This collaborative effort was crucial in shaping our game’s foundation.

game development pre production, level designing, level design, stages, game development, game design, 3d animation, maya, unity 3d, blender, 3d production, motion graphic, animation

Game level designing, Ideation, Brainstorming, Level designing, Game levels

2. Pre-Production Stage

During pre-production, our developers and designers came together to refine our ideas. We focused on creating anime characters with unique action moves and characteristics. The Table is filled with Ideas and New concepts. Keeping in mind all technical aspects the designers further come up with color pallets and new suggestions to the initial idea.  The idea was to create Anime characters with unique action moves and different characteristics were given to each Character. Side by side we had the Storyline going on which kept us in touch with each characters behavior and uniqueness. The storyline was developed alongside character behaviors and traits, giving life to characters like Jon, Krio, Donni, and Tia.

While Jon was the main hero from our previous Game Dragon Little Fighters which was a 2d Pixel Game and did not really have a storyline. Here in Dragon Little fighters 2 , Jon is the one who goes and saves his friends who get kidnapped and gets them out of traps from different levels. Jon’s super power is lightning,

Don is the ice boy and thus super cool. Using his powers at the right time and right place

Krio as the name suggests is a creative guy. He loses his cool super fast and ready to do anything for his friends

Tia is the mature one and glad to have his green fire super power. She always encourages her friends to keep going and use their super powers to stay charged

 

game development pre production, level designing, level design, stages, game development, game design, 3d animation, maya, unity 3d, blender, 3d production, motion graphic, animation

3. Production Stage:

After the initial concept and Level designing came the Character design stage where characters were developed in Vroid Studio. After Character Designing and their Animation which involved lots of Dialogue exchange and Action, the scenes and stages were set in a sequence. First came the Storyline where all the characters are talking and testing their powers in their town. We had this unique concept of Dialogue box similar to Comic books which would pop up as and when the character speaks. This enhanced the storytelling throughout the game. Later came the Villain’s who destroys their place and kidnaps the friends of Jon. Jon becomes unconscious while fighting the Villain’s and when he wakes up he proceeds to solve the mystery of his lost friends by fighting the villain’s on different levels. There was a lot of VFX involved and sounds as well as Voiceovers which was all done in – house.

game development pre production, level designing, level design, stages, game development, game design, 3d animation, maya, unity 3d, blender, 3d production, motion graphic, animation, game development process, game production , gaming company, android game, ios game, steam game, gaming process, game development, unity technology, unreal engine, video game development process, game development phases, game development process

4. Testing : 

Testing is a never-ending process. We spent weeks, sometimes months, testing our game to fix bugs and ensure a smooth gameplay experience. This stage is crucial for identifying and addressing any issues that could affect the player’s experience. You never really complete a game after weeks or sometimes months of testing. Being an in-house game , we always tried to improvise things and fix those little bugs before the game launches the market . There are lots of technical things to be taken care of when you are making a game with lots of Characters and animation. Checking for Characters mesh, if it is colliding with other characters or the environment, checking for glitches, and so on. While testing , you also may realize if things are going to be liked by the target audience or not.

5. Launch :

After lots of bug fixing and assuring yourself that the game is ready, it is launch time !! For the launch of this game, things were different as we were planning to release it on Steam for the first time. After having Game on Andorid and iOS , this was a dream come true that we could launch the game over Steam. Publishing on  steam although was a struggle as Steam requires specific Icons and Screenshots on its platform. The Big thing was we could launch it over the Platform which in itself was a big achievement. After Launch , came the phase where Marketing and Advertising was required. We recorded lots of Videos, Rendered Images and took lots of Screenshots of the Game .Somehow because Dragon Kombat was a success , the game got noticed and liked by lots of people.

game development pre production, level designing, level design, stages, game development, game design, 3d animation, maya, unity 3d, blender, 3d production, motion graphic, animation, game development process, game production , gaming company, android game, ios game, steam game, gaming process, game development, unity technology, unreal engine, video game development process, game development phases, game development process

Dragon Little Fighters is available for Download

Android : https://play.google.com/store/apps/details?id=com.BlueCreazione.DragonLittleFighters2&hl=en_IN

iOS : https://apps.apple.com/us/app/dragon-little-fighters-2/id1506729694

Steam : https://store.steampowered.com/app/1171950/Dragon_Little_Fighters_2/

Trailer Video :

e learning, custom e learning, , online learning, courses, online courses, learning , animation, interative learning
Bringing Nursery Rhymes to Life: The Journey of E-learning Animation 1024 683 Parini Vyas

Bringing Nursery Rhymes to Life: The Journey of E-learning Animation

Excited to share the story behind our animated nursery rhyme video of “Humpty Dumpty,” a project that has captivated and educated children around the world. This video, created in 2018, has reached lakhs of viewers by 2020 on YouTube, becoming a beloved resource for young learners.

e learning kids videos online learning humpty dumpty nursery rhymes math science english motion graphics animation educational videos character animation kids online learning

Humpty Dumpty’s Great Fall
In this delightful animation, we bring the classic nursery rhyme “Humpty Dumpty” to life. The story follows Humpty Dumpty as he falls from the wall and the soldiers’ efforts to put his broken head back together. It’s a fun and educational way to introduce children to this timeless rhyme. This video is perfect for kids up to the age of 8. It’s designed to be both entertaining and educational, making it a great resource for parents and educators looking to engage young minds with classic nursery rhymes.

• Engaging Animation: Our talented animator has created vibrant and captivating visuals that bring the story of Humpty Dumpty to life.

• Educational Content: The video not only entertains but also helps children learn the rhyme and understand the story behind it.

• Interactive Elements: We encourage children to sing along and engage with the story, making learning fun and interactive.

Behind the Scenes:
Creating this video was a joyful experience for our team. The character and poem were initially developed for an e-learning project and later modified for our YouTube channel. Our animator was particularly excited about this project and exclaimed “Yes!” upon completing the animation, reflecting the enthusiasm and dedication that went into making this video.

At that time we were working on the most challenging project of creating Educational Videos for Grade 1 to 10. I call it challenging because the primary language here was Urdu. We were the first to complete this complex task of  compiling all videos for an Urdu Medium School for all the Grades . Covering all the subjects and this made the project quite special to us. Apart from Urdu other languages included Marathi, English and Hindi.

The Journey: From Creation to Success
The Humpty Dumpty video was created in 2018 with the goal of making learning enjoyable for children. By 2020, it had reached lakhs of viewers on YouTube, a testament to its popularity and the quality of our content. Here’s a closer look at the journey:

• 2018: The video was conceptualized and produced. Our team worked tirelessly to ensure that the animation was engaging and educational.

• 2019: We launched the video on our YouTube channel. Initial responses were positive, with parents and educators praising the quality and educational value of the content.

• 2020: The video gained significant traction, reaching lakhs of viewers. It became a favorite among children and a go-to resource for parents and teachers.

Our goal is to make learning enjoyable for children. By bringing nursery rhymes to life through animation, we hope to spark curiosity and a love for learning in young viewers. This video is a testament to our commitment to creating high-quality educational content.

Since then we have been crafting Educational Content for kids in Math, Rhymes, Science , Moral stories and so on.. We have collaborated with companies who are into Educational content and need our creative skills in crafting and designing graphics and animation for the same..

e learning kids videos online learning humpty dumpty nursery rhymes math science english motion graphics animation educational videos character animation kids online learning

We have been designing our educational content by following the step by step process starting from Storyboarding to Designing Assets and Animation to Compositing. With the handy software’s like Adobe After Effects and Illustrator we have been able to deliver and also have in-house Content for E learning

Watch the Video:
You can watch the full video here.

After the success of this video we have worked on numerous Creative Videos which included stories from our childhood times. You can also view our Channel here .

We’d love to hear your thoughts! What did your children enjoy most about the video? Do you have any suggestions for future nursery rhymes or educational content? Share your comments below and join the conversation.

e learning, kids e learning, online learning, animation, storyboarding, bylittle, online course, youtube channel for kids, youtube kids videos, moral stories, nursery rhymes, mythological stories, creative online learning
Embracing the Digital Shift: The Transformative Benefits of E-Learning 1024 669 Parini Vyas

Embracing the Digital Shift: The Transformative Benefits of E-Learning

E-learning that was limited to students once has expanded to a great level after covid. While E – learning Institutes scaled exponentially even before  Covid hit us, it was only since the Lockdown we actually took the path of  E – learning for different Courses including students who were forced to stay at home during the pandemic. This resulted in the learning management systems (LMS) and other digital tools that enable schools to continue instruction amid the cancellation of classes.

With this Cut-off Situation from Schools, Colleges and Office Situations,  adoption to e – learning came in smoothly for many of us and not only  students. 

This shift from Traditional Classrooms was not easy for many of us. While just before Covid we delivered Videos for Azam Campus, where Teachers weren’t really ready to transform their class to an Interactive one. They had to forcibly run schools through Online-learning when the pandemic took place. 

In this blog, I aim to outline the advantages of e-learning, as detailed in the following points

 

Flexibility and Accessibility
  • With E-learning a student or learner gets immense flexibility in terms of  location and time. They can access their online-course from anywhere in the world , at their fingertips. Learn & go through the curriculum at their Pace at convenient time
  • With easy access to Smartphones with 5G/4G connection available nowadays, it has become easy and affordable for people in remote areas to access their courses online. With India having limited facilities and jobs for  the Disabled, they get the flexibility of learning their choice of subject sitting at home.
  • The ability of tracking capabilities to analyze learner data and progress also gives the educators a good accessibility to understand the Learners speed and provide them feedback about what they can improve upon
A Wide Range of Resources
  • With Just one-click you get access to content in different varieties. There  are E-learning Articles, Webinars, Videos where constraints like time and  geographical locations do not matter. As per the Learning Styles that suits  ones needs a user can learn through Videos, Podcasts or Interactive  Simulations
Personalized Learning Experience
  • Over traditional classroom settings the most significant advantage of  E – learning is that the user can learn at their own pace and skip material / content which they already know well and focus on their weak areas.  Based on the learner’s interactions and achievements, some platforms after analyzing data of the learner, also adjusts the difficulty of the material in real-time

Bylittle provides customized E-learning Solutions to companies

https://bylittle.io/storyline-360/

Cost-Effectiveness
  • Since Covid, everyone has been focusing on Savings costs. The cost of Travel and maintaining Physical classrooms is saved by both Educators as well as the Learner. One time Investment in a yearly / monthly membership of the Online Course you are opting for, and you are ready to go. As Smart  phones are easily available & affordable nowadays
  • With Free videos available on Youtube , it has become really easy for  students who cannot afford the online courses .  Coursera, edX, Udemy, Google also provides some free courses
Listing the key benefits of e-learning:
  • Flexibility: Learners can access content at any time and from any location, fitting education into their schedule.
  • Personalization: E-learning adapts to individual learning styles and paces, offering personalized paths and resources.
  • Cost-Effectiveness: It reduces the need for physical materials and infrastructure, lowering educational costs.
  • Scalability: Online platforms can serve a large number of learners simultaneously, making it easier to expand educational offerings.
  • Accessibility: Courses are available to a global audience, removing geographical barriers to education.
  • Interactivity: Engaging multimedia content and interactive exercises enhance the learning experience.
  • Immediate Feedback: Quizzes and assessments provide instant feedback, helping learners understand their progress.
  • Data-Driven Insights: Learning analytics allow for the monitoring of learner progress and the optimization of course content.
  • Community and Collaboration: Features like forums and group projects promote interaction and peer learning.
  • Up-to-Date Content: E-learning materials can be updated quickly to reflect the latest knowledge and trends.

 

Along With your professional and educational journey, you can focus on  your aspirations as E – learning gives the flexibility in terms of time and  geography

We at Blue Creazione started our journey with E – learning. And as I said  before the Teachers weren’t really ready to adapt this new technology. But  as Covid hit at the right time when we finished all videos for Grade 1 to 10. The teachers and students were lucky to have all the Videos handy at the  right time and place

You can watch our Youtube Channel here  youtube

or visit us on: www.bluecreazione.com

game character animation, animation, motion graphics, fruit game, gbasgbos, match 3 fruit game, adobe after effects 
The Art of Frame by Frame Animation 600 338 Parini Vyas

The Art of Frame by Frame Animation

When I hear the word Animation, first thing that comes to my mind is keyframes. . The mastery to animation is figuring out the keyframes and the in betweens. . So while today we have a lots of references available online to follow in order to get that animation correct, i still prefer the traditional way of acting out the animations, especially expressions. . Lots of animators still act out and then create their animations. 

With the technology advancing each and every day , there’s a lot that can be done to make the animation flow easier. . Nowadays you have Motion capture, Adobe Animate, and so on..

If you still love the traditional style of animation, where you animate and keyframe each and every frame and make it your style.  Be it 2d or 3d, Adobe After Effects or Blender, Spline or Maya.  The actual fun is getting and doing  things your way & the joy of the end-result is deeply satisfying . Its difficult to cover 2d and 3d Animation both in one blog. So instead we will be focusing on 2d animation today..

character animation, sprite animation, game, game animation, endless runner game, web game

2d animation as simple as it seems is used widely in different areas, There’s Typography,  Character Animations, Sprite sheet animation, Prop animations, etc and is spread in areas like E-learning, Games, Applications,  Product Videos, Motion Graphics, UI UX, Explainer Videos, etc

Looking at the points that are important in making an impressive animation for your Videos:

 

Character Animation

While making your Character come to life, you have to think about lots of things. Starting from the characters  if its male or female, kid or an adult, or even a human, an animal animation, lipsync, character expressions, mouth, lip sync, character design, adobe after effects, 2d animation, e-learning, kids learning, cartoon animationor a bird  if its personality is shy, bold, smart, introvert, calm, anxious, eager and so on.. Their body movements or body  language will depend on their personality. Their Persona would decide the facial expressions and their way of reacting to a situation. We also see those exaggerated animations  where we see Eyes popping, Eyebrows raising above the head, Wide smiles showing all the teeth inside that not so big  mouth. Well Wait..  There’s also another Creative way in Animation, where Characters are without eyes,nose or mouth, in such cases the  Expressions totally depend on Head Movement , nodding , and a little bit on the body movement, hand gestures. For example when  they are surprised , the Character would raise their hand and lean backwards, when in conversation they would move  back & forth and nod their head  in approval or disagreement

For Character animations, most of the Artists get reference from their surroundings, observing other people, or trying expressions or actions  in front of the mirror.

The best book to follow ”The Animator’s Survival Kit” by Richard Williams which guides you through  the basic bouncing ball animation to the technique of slowing in and slowing out  animations. From Keying to in betweens to make your animation smoother. Basic Walk cycles to exaggerated Walks and all sorts of other animations. There are also specific walks where hand swings and Weight shifts on different part of body has been given focus.

God..! I am so glad I am in this field  !!

 

Character Animation in a Story:

 

Props Animation

 

banking, motion graphics, animation, explainer video, character animation, props, 2d animation, social media ad, 2d ads, cartoon animation, adobe after effectsProp animations can be simple. Especially if it’s the objects in the background, like a table, lamp in the living room or a table & chair in a restaurant, by just popping/scaling some tiny objects in the Scene can be engaging for the viewer.  When it comes to Vehicles they can be given some exaggerated friction  while picking up speed or applying brakes .

Those props can also be a character riding a skateboard, holding a paper in hand  or wearing headphones. Animating those little things in the scene gives you the option of being a lot more creative with your video

Elements like Trees are animated in the Background:

TypoGraphy

 

Texts are an ideal way to put across your message as compared to Character or prop animations where there’s a storty to tell, Typography places the direct message in front of the viewer. With attractive colors and huge text which is easy to understand ,  eye catching fonts along with some Animations makes the Video even more attractive. Envato has amazing Typography elements for After Effects. Premiere, Final Cut Pro, Apple Motion and so on. Text animations can also be used in Titles, Openers, and End Slides

Some references: 

https://in.pinterest.com/pin/933863672721242697/

https://in.pinterest.com/pin/933863672721128489/

 

Shapes Animation

 

Compositing with shapes and solid colors helps in making smooth animations. They are very pleasing to the eyes. The shapes transform into any size and any shape which actually makes the effort of seamless animation simpler.  Mostly used for creating loop animation and also quite handy in UI UX icon animations. Shapes like Arrows/Lines  are used for transition from one scene to another, Show directions for maps, graphs, etc

motion graphics, animation, after effects, social media ads, 2d ads, advertisement

This is a rather Simplified version of animating with shapes and conveying message across the audience

Shapes Animation for Transition: https://www.instagram.com/reel/C8W5X6KvQ_J/?igsh=MXUzY2UwNGxxMjVwag==

Ultimately however simple animation you are thinking of doing, the secret tip is to keep your references in a layer inside the software you are working on .. to get the best timing and that exaggerated motion you are looking for.. Good luck Animating !

Do follow us on our social media

Instagram: https://www.instagram.com/blue_creazione/

facebook : https://www.facebook.com/bluecreazione

Linkedin : https://www.linkedin.com/in/blue-creazione-a01443164/

buhler, gaming,╧gamification, multiplayer game, realtime game,role based game
Realtime Whiteboard game 1024 602 Parini Vyas

Realtime Whiteboard game
Some Cutouts, A Whiteboard
 & 
a Role based Multiplayer Game

This has to be the best project so far in terms of quality, and the challenge it carried. Gamifying a multiplayer role based cutout game with real time  updating  data of users sitting in different corners of the world. The game was fun to make as the concept was very new. Well there are games which had similar features but that was limited to only using brushes, tools that are generally available on a whiteboard  application So, the challenge was placing cutouts , along with watching what other players were doing at the same time. This Live game had a countdown which was supposed to match with other players and to be honest , that was the biggest challenge we faced being a web application and the limitations of Technologies that we could use for the game

roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool, paint board, elearning, education , cakephp, fabric js, java script, js, web based game,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

The basic idea of the game was each player will be taking up a role, based on the role they take up, they will     be assigned a task for that particular  round

roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool, paint board, elearning, education , cakephp, fabric js, java script, js, web based game,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

 

Ideally a game with 2 Rounds and two different Phases

Where in Phase1 , Users will Sketch their Idea with a Basic Whiteboard: Colour Palette, Pen (Thickness  variable), Bucket of paint, Text, and shapes: squares, triangles & circle (rotate- and resizable)

While in Phase 2, Users will start building with the 2D cutouts assigned as per their role. Each Role will have a set  of 2D cut outs to choose from.

The difference here between Round 1 & Round 2 was only that in Round 1,the players will have to wait for each 

other to complete their tasks.  Round 2 , Users would be working together, So, when in Round 2, Everyone is sketching on the same whiteboard; Users can See each other’s sketch and cutouts placed if they are in Phase 2.

web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,npm,npx,how to develop react app,how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

For both the rounds, The result was scored based on how accurate they fulfilled the task and how quick they  were. Here, each cutout for each role was given a specific score. Only when each player played their game  accurately, they would get a good score at the end of the game.

roundbased game, multiplayer game, web game, whiteboard game, realtime game web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

As this game was designed to bring change in the working culture of the company. A tutorial was also designed for First Time users, so that they know what exactly is to be done.

There  was also a preview window, if you might have noticed in above screenshots.. the purpose was to design a rough sketch in phase 1 and based  on  that and keeping that preview in mind, the user can place cutouts on the fresh Whiteboard they get in Phase 2

The most interesting part about this game was the countdown timer .. The  clock  was always ticking but The group score at the end of the game gives motivation and great encouragement to the team members. I can say this was a brilliant idea of bringing together and working as a Team for the people of Buhler

Here’s the video that gives an overview of the Web Application : https://youtu.be/pNE34__D7aY

 

multitasking, business development, social media marketing, team management, StartupLife Multitasking Business Development Team Management Social Media Marketing Productivity,bbc ideas, bbcideas, short films, curious minds, learning, science, self-improvement, explainer, psychology, animations, bbc, multi-tasking, can we multi-task?, can we multitask?, multitask, multitasking, attention, why we can't multitask, inattention blindness, invisible gorilla experiment, conscious awareness, multitasking test, how to multitask, can't multitask, multitask learning, multitasking skills, can multitasking be learned?, multitasking doesn't work, multitasking is bad"
Is Multitasking worth it ?! 1024 603 Parini Vyas

Is Multitasking worth it ?!

I have been watching lots of videos on Youtube where creators keep mentioning about how multitasking can make a business fail. Have been watching such videos from multiple creators since past 3 years now.  Whenever I come across those videos , I wonder what did I do that now my business didn’t get affected? I mean the creators of such videos must have seen some cons faced during multitasking

So now the question was, Did I manage the Multitasking well or was I lucky? In  search of answers to my questions I found out that, It totally depends on how well you manage your multiple tasks on day to day basis.

In the fast-paced world of startups, wearing multiple hats isn’t just an option—it’s a necessity. I, as the founder of the company had to manage Business Meetings, Manage the team, Help the team by working as a team member, Follow up with the client for payments, sometimes irritate the client with sudden appearances at his site, because payments were delayed 🙁  . As we had started with a small team, me and my partner had to work personally on the projects. It was a great challenge, as inspite of having staff we did have to jump into projects and give solutions.

So the struggle was, how do we juggle between business development, meetings, social media marketing, and team management without dropping the ball?Oh so I forgot to mention I was also doing the Social Media Marketing for the company.

Well, Here are some tips to master multitasking:

Identifying what is Priority:

You have to be smart enough in identifying the high priority tasks and focus your energy accordingly. Not all tasks require your immediate attention

Grouping activities:

Batching and stacking activities that are similar in nature can help you focus on your tasks efficiently and reduce mental stress of switching to other work

Pass on Effectively:

Shedding some work to team members . This will give your team a sense of empowerment and is also crucial for your growth as a team

Technology & Tools:

Use tools and apps designed to automate and assist with social media marketing, scheduling, and project management. For example: Facebook’s Meta Business Business suite helps you plan and schedule posts, which can help achieve better reach as well as your goals can be reached

By embracing some or all of these strategies, you can transform the challenge of multitasking into an opportunity for growth and efficiency.

Hope this helps and motivates towards working for your goal

#StartupLife #Multitasking #BusinessDevelopment #TeamManagement #SocialMediaMarketing #Productivity

web application, multiplayer game, whiteboard game, fabric js, game, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game
Whiteboard Multiplayer Web Game 1024 576 Parini Vyas

Whiteboard Multiplayer Web Game

Today I am writing about the digital experience that mirrors our company’s transformative journey where every idea initiates with a mockup or a storyboard. This helps us and our clients understand the flow of the story and also lets them visualize and lets us know if they have any changes in design before we move to the UI UX , that is to designed in Figma.

So here are some unique features about the game:

Team Dynamics:
This was a Role based game – 4 players with 4 different roles, each member assuming a vital role with specific, initially hidden tasks. As the game progresses, these tasks become visible to all team members, promoting a unified strategy.

The Game has 2 Major Rounds. In round 1, users play turn wise while in round 2, users play simultaneously and can see each others activity on the screen.

Interactive Whiteboard:
The heart of the game lies in the interactive whiteboard equipped with a color palette, variable-thickness pens, a paint bucket, text tools, and geometric shapes. Here, creativity and collaboration come alive as teams use 2D cutouts to construct their visions within a time limit.

Scoring System:
Success is measured by the accuracy and speed of task completion, with a scoring system that rewards based on Cutouts used as per tasks assigned to a user. The shared whiteboard allows all participants to witness the evolution of their collective masterpiece, each cursor contributing in its unique hue.

Role-Specific Challenges:
Each role, from Bricklayer to Decorator, comes with a bespoke set of 2D cutouts, encouraging players to build according to their assigned tasks. The game’s design phase is yours to shape, with roles serving as mere guidelines to inspire a LEGO-like environment.

Creative Freedom:
Tasks are intentionally open-ended, allowing players to unleash their creativity. The scoring should reflect this flexibility, avoiding any single ‘correct’ solution.

Back-End Features:
Administrators can manage users, review past game outcomes, and analyze overall survey results through a comprehensive dashboard.

concept idea generation technology development fabric js, brainstorming,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

When it comes to Visualizing it becomes difficult at times because everyone has their own perspective of looking at things. So our approach is simple yet direct

So the first step was Brainstorming the Concept of how Participants will embark on an immersive adventure by joining a game through an invitation link, a unique game code, or by creating a new game. Upon entering their names and emails, players gather in a virtual lobby, eagerly awaiting the start of a collaborative challenge. Once the lobby is full, the game begins, led by the first user or a designated moderator.

ui ux mockup ui design fimga photoshop ux design design flow,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

UI UX was something which we had to go back and forth a lot of times. As the Application was totally concept based, we had to test multiple times until we realised that some changes in UI were necessary

Fabric JS,Three JS HTML, CSS, AJAX, JQuery, MySQL, CakePHP, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

Fabric JS,Three JS HTML, CSS, AJAX, JQuery, MySQL, CakePHP.

Which technologies are to be used was another question in mind as a Realtime game was to be developed, where time was ticking and users have to finish their task in given time. Choosing the Right Technology for a Real Time Game and a Role based game was the task. The Game being real time plus a Whiteboard where the succeeding player could see the results of previous player in Round 1 and also see other players  Real time screen in Round 2 was the main challenge

Quality assurance, testing, quality check, game testing, manual testing, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

With lots and lots of Testing, we were able to find new culprits every time while getting rid of old culprits. The game was actually boring in the sense that we had to wait for other players to finish their game and each player got time of 4-5 mins to finish their task. So, the testing along with Scoring would take around 45 mins every time and sometimes we would take multiple roles as we had a small team 🙂

Azure setup, releasing launching game,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

The Application was ready to setup on clients Azure Portal. Phew!! Why do we have to take up challenging projects every time 😀 because its fun!

The Actual Game looks something like this:

3d low poly scene, render, game environment,3d low poly scene, render, game environment, low poly tutorial, maya low poly tutorial, 3d low poly tutorial, low poly animation, 3d animation, low poly, 3d,, 3d campfire tutorial, 3d low poly animation tutorial,3d low poly character tutorial, 3d low poly character, tutorial, fire tutorial, low poly fire tutorial, animation tutorial, cubic worlds, cubic worlds course, game level design, 3d environment
Low Poly Environment in Maya 3d 960 540 Parini Vyas

Low Poly Environment in Maya 3d

3d low poly scene, render, game environment

Low Poly Environment – Conceptual

The most challenging part of making a 3d game or environment is the high polygons model and textures . Its sad that designers had to compromise on the look and feel of their game, environment, in order to achieve an optimized game application for their users

In 1990’s when Low poly art got invented . Before, It was satisfactory because of low computing power and other limitations. Little did we know that Low Poly Art will make its way again and get its official name as “LOW POLY ART” in future. In 2013, Low Poly art got reinvented by some content creators.

Today I see Low Poly Art as very attractive. Those sharp edges and colors attracts the interest of the end user. It allows Creators to quickly design a basic model which is always simple to Texture. Remember those Large Spider like woven UV’s of that high-poly character and the mysterious UV map of that concept car model? I would subdivide it until I got desired results . Kept subdividing until my Maya crashed 😀

3d low poly scene, render, game environment, low poly tutorial, maya low poly tutorial, 3d low poly tutorial, low poly animation, 3d animation, low poly, 3d,, 3d campfire tutorial, 3d low poly animation tutorial,3d low poly character tutorial, 3d low poly character, tutorial, fire tutorial, low poly fire tutorial, animation tutorial, cubic worlds, cubic worlds course, game level design, 3d environment

Low Poly Environment

I am sure many of the 3d artists have also been through that pain of unwrapping UVS. Especially of those Beautiful High count model you had made by giving those minute details to make it look as realistic as possible.

This LowPoly Model I had modelled in Maya 3d was totally concept based. It has snow covered mountains, clouds floating in the sky, Pine like trees , cut trees , a camping tent, rocks and a fire place. I Kept in mind a Gaming environment where the ground is hexagon shaped and tile able. For renders, I had used Maya Mental Ray.

Well back then I had not discovered Blender’s rendering capabilities. Although, I explored this week only and my next post would be about it. I now realize how technology has really changed our life to a huge extent. Renders in Blender along with Ambient Occlusion pass blew my mind ! It is comparatively so easy now to get quality results quickly !

Hope you like this low poly 3d model .. you can download it for freeeee…!!

Below is the link:

https://sketchfab.com/3d-models/low-poly-3d-game-scene-d4d357a35ca54aab9a78b4718c809600?utm_medium=embed&utm_campaign=share-popup&utm_content=d4d357a35ca54aab9a78b4718c809600