Posted on

Unleashing Creativity: A Peek into the World of Figma

Hey there, fellow design enthusiasts! Today, I'm excited to share with you a game-changer in the realm of UI/UX design - it's called Figma, and trust me, it's a total game-changer!

Picture this: you've got a brilliant design idea in your head, but translating it into a digital masterpiece can be a bit of a challenge. Well, enter Figma, the superhero of UI/UX designers. It's like the magic wand that brings your creative visions to life on the digital canvas.

So, what exactly is Figma? Think of it as your all-in-one design playground. Whether you're a seasoned designer or just dipping your toes into the world of UI/UX, Figma is here to make your life easier.

First things first, collaboration. Figma is like a virtual design studio where you and your team can work together seamlessly. No more back-and-forth emails with bulky attachments. With Figma, everyone can hop on board, make edits in real-time, and see the design evolve like magic.

One of the coolest things about Figma is that it's all in the cloud. Say goodbye to the days of worrying about losing your work if your computer decides to take a vacation. Your designs are safely stored in the Figma cloud, ready to be accessed anytime, anywhere.

Now, let's talk about the nitty-gritty of design. Figma is super intuitive, making it a breeze for both beginners and seasoned designers. You can create stunning interfaces, snazzy icons, and eye-catching illustrations with just a few clicks. Drag, drop, resize - it's that simple!

What sets Figma apart is its versatility. It's not just about static designs; you can create interactive prototypes that bring your ideas to life. Test out user flows, click through different screens, and make sure your design is not just a pretty picture but a user-friendly experience.

Oh, did I mention it's browser-based? No need to clutter your computer with hefty design software. Just open your browser, log in to Figma, and voila - you're ready to unleash your creativity.

In a nutshell, Figma is like the best friend every designer needs. It streamlines your workflow, fosters collaboration, and empowers you to turn your wildest design dreams into reality. So, if you haven't jumped on the Figma bandwagon yet, now's the time. Your design journey is about to get a whole lot more exciting! Happy designing!

Posted on

Dark Mode vs. Light Mode

Dark mode has gained immense popularity in recent years. Many apps and websites now offer both dark and light mode options. What do you think about this trend? Do you believe it enhances the user experience? How do you approach designing for both modes?

Posted on

Hi I was just wondering how I can make my CSS button responsive?

/* CSS styles */
* {
    margin:0;
    padding: 0;
    border:0;

}


html,
body{
    background:url("/images/onebug2022heroimage.jpg")no-repeat
 center fixed;


    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#000;

}

.wrapper{
    max-height: 100%}



header{
    max-width:100%;
    background-color: #0000;
    /*    padding-top: 5%;*/
    padding-bottom: 0.5%;
}


.left-col{
    max-width:35%;
    float:left;
    margin-left: 5%;
    margin-top: 2%;}

.right-col{
    width:70%;
    float:right;
}


.right-col ul{
    width: 100%;
}

.right-col ul li{
    list-style:none;
    float: right;
    display:block;
    padding-top:.4%;
    margin-left:1%;
    padding-right: 1.8%;
      }

.right-col li a{
    text-decoration:none;
    color:white;
}

h1{


    animation: type 3s steps(22);
    overflow: hidden;
    white-space: nowrap;
    font-family:'Noto sans', 'sans serif';
  clear: both;
    width: 50%;
    font-family:'Noto sans', 'sans serif';
    font-weight: 100;
    color: white;
    font-size: 2em;

    margin:0 auto;
    text-align: center;
    padding-bottom: 1%;
   }


h2{
clear: both;
    font-family:'Courgette', 'cursive';
    font-weight: 200;
    color: white;
    font-size: 2em;
    margin:0 auto;
    text-align: center;
    padding-bottom: 1%;
    width: 22ch;

}



h4{
clear: both;
    width: 10%;
    font-family:'Noto sans', 'sans serif';
    font-weight: 100;
    color: white;
    font-size: 2em;

    margin:0 auto;}

sup{ line-height:0;
font-size:65%;
}

@import url(https://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
     left:0%;
}
#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#cssmenu #menu-button {
    display: none;
}
#cssmenu {
    width: auto;
    font-family: Raleway, sans-serif;
    line-height: 1;
}
#cssmenu > ul {
    background: #00000;
}
#cssmenu > ul > li {
    float:left;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    left: 38.18%
}
#cssmenu.align-center > ul {
    font-size: 0;
    text-align: center;
}
#cssmenu.align-center > ul > li {
    display: inline-block;
    float: none;
}
#cssmenu.align-right > ul > li {
    float: right;
}
#cssmenu > ul > li > a {
    padding: 16px 20px;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    background: #505050;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
    color: #107CBD;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
    color: #107cbd;
    -webkit-transform: rotateX(90deg) translateY(-23px);
    -moz-transform: rotateX(90deg) translateY(-23px);
    transform: rotateX(90deg) translateY(-23px);
    -ms-transform: none;
}
#cssmenu > ul > li > a::before {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px 20px;
    color: #107cbd;
    background: #1d1d1d;
    content: attr(data-title);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -ms-transform: translateY(- -18px);
        }
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
    background: #505050;
}
#cssmenu.small-screen {
    width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
    width: 100%;
    text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
    float: none;
    display: block;
    border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
    color: #107cbd;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
    display: none;
}
#cssmenu.small-screen #menu-button {
    display: block;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #505050;
}
#cssmenu.small-screen #menu-button:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 17px;
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    width: 22px;
    height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
    border-top: 2px solid #107cbd;
    border-bottom: 2px solid #107cbd;
}
#cssmenu.small-screen #menu-button:before {
    content: "";
    position: absolute;
    right: 20px;
    top: 27px;
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
    background: #107cbd;
}


div nav ul li{
    text-align: left;
    display: inline;
    width: %;
    float:left;
    margin-right: .8em;
    font-family: 'Noto Sans';

}

li.changeBackground {
    background-color: #505050;
}

li.changeBackground:hover {
    background-color: ;
}

li.changeBackground:active {

background-color: #107CBD;
}

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}

p{
    position:relative;
    width: 30%;
    padding:1em 1.5em;
    margin:2em auto;
    color: #fff;
    background:#107CBD;
    overflow: hidden;
    font-family:'Noto Sans';
}


p:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #505050 #505050;
    background: #505050;
    -web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px; rgba(0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px;rgba(0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0,0.3), -1px 1px 1px  rgba(0,0,0 0.2);
    /* Firefox 3.0 damage limitation*/
    display: block; width: 0;
}

p.rounded{
    -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
}

.p.rounded:before{
    border-width: 9px;
    border-color: #fff #fff transparent transparent;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
}

.link{color:#e68a00;}
.link:hover { color:#d580ff; }



h3{

    font-family:'Noto-Sans', sans-serif;

}
h5{
    font-family:'Noto-Sans', sans-serif;
     float: right;
    margin-top:10px;
}

a{
  color: #fff;

}
a: hover {
  color: #fff;
}

a.btn {
  display: inline-block;
  margin: 9px 0;
  color: #000000;
  background-color: #fff;
  padding: 9px 20px;
  border-radius; 7px;
  text-decoration :none;
  font-weight: 700;
  font-size: .9em;
  }
  a.btn:: after {
    content: '100BB'; padding-left: 8px;
 }
   a.btn: hover{
   color: #fff;
   background-color: #008cda;
 }

footer{

    margin: 1px;
    height:20px;
    width: 100%;
    border-top:3px solid #107CBD;
    clear: both;
    color: #fff;
    line-height:23px;
    background-color:#505050;
    text-align:center;
    position:fixed;
        font-size:12px;
    bottom:0px;
vertical-align:baseline;


}

footer{

    width: 100%;
    padding-top:-1.0%;
    padding-bottom: 2%;
    background-color: #505050;
border-top:0px solid #107CBD;
position:fixed;
text-align:center;
Posted on

Adding customer reviews to a website

Hello there. I've stumbled upon a minor problem with my site's overall performance. I want to demonstrate a clickable feed with reviews from my Google business account, accompanied with star rating. I understand that I can make a feed with screenshots of the comments and make those screenshots clickable, but maybe there is a more simple solution?

Posted on

Looking for advice on a menu button on a website

I've got long pages on my mobile site, so the menu button that is located in the header becomes difficult to access.

I wanted to add an arrow at the bottom to quickly return to the main screen, but this is not a solution to the problem, since not everyone scrolls through the page to the very end.

Hypothetically, I can fix the entire header of the site with the menu button at the top of the page so that the visitor can always see them.

I don't know if it's worth it. What do you think?

Posted on

How do I view design layout before implementing it?

Hello! Can you please tell, when getting a design layout, for instance, in Figma, how can you review the overall look of this layout on screens with different resolutions before implementing it? Can you name any ways?
Im talking about is only viewing the graphic design of this page.

Posted on

What is user interface design?

User interface (UI) design is a process used by designers to create interfaces in software, such as computer devices, that focus on appearance or style. Designers want the interfaces to be easy to use and user-friendly. User interface design covers graphical user interfaces and other forms - such as voice-controlled interfaces. The combination of UX and UI creates your entire experience into one product. While two identical products can give you the same results, their UX / UI shows how they provide. If one product has a better UX / UI design than the other, people will use it more because they want the overall experience. Let's hope you now understand the subtle differences between UI and UX design. Yes, they are together, but they are very different. UX design is more analytical. It has its roots in human moral and psychological thinking. User interface design software focuses more on the visual side - or whether the product is comfortable in appearance.

Posted on

A Brief Insight Into Managing UX Projects

UX is the art of drawing the most efficient user experience — the goal is that the user’s experience is unparalleled, no matter whether it is an app, website, or even a non-technical platform. It is a critical and creative evaluation of the problem so as to propose a solution. It's an attempt to carefully craft a superb experience for an end-user.

Things to Do

Unlike the UX exercise for a web application or mobile app, it becomes extremely challenging when the project that you have undertaken is just UX without a tangible prototype for the customer.

Posted on

Advice for UI Figma Tool

Hello Everyone, I am a budding designer who seeks help in finding the appropriate tutorials for Figma. I want to learn Figma right from the basics and take it step by step. Where can I get these tutorials?