switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    technical skills
    Technical Skills IT Students Wish They Knew Sooner
    May 2, 2022
    what's new in vue
    What’s New In Vue
    May 16, 2022

    A Web Developer’s UI/UX Resource Arsenal

    ui/ux resource arsenal
    ui/ux resource arsenal

    When developing projects for various clients, you will need to have access to different resources, which will give you a variety of different packages, front-end components and even other websites that serves as an inspiration for your project.

    In this blog, we will be discussing some UI/UX development tips and share some various resources that you could use in your project.

    • Essential Design & Interface
    • Font & Colour
    • Additional UI/UX Implementations

    Essential Design & Interface


    When in the planning phase of a website’s creation / re-design, you will need to remember the following before implementing your code:

    • Does the proposed design match with the website / web application’s purpose and objectives?
    • Are the contents of the web page engaging enough for the user?
    • Are features, such as social media icons, embedded videos, and forms dynamic on the site?
    • Is the website / web application responsive and mobile-friendly?

    As previously mentioned in a previous blog, UX Consistency In Web Development, the client must be able to easily navigate through the site’s pages. They will need to be able to read through the contents of the webpage without having to experience constant scrolling or be discouraged from large paragraphs.

    It is also advised to ensure that your page responsiveness is also properly tested on all screen sizes to prevent any front-end issues from being displayed to the user while they are interacting with the page.

    If the client is unable to provide any mock-ups for the website, you can find examples that would suit your needs in developing a template and presenting it to the client for approval.

    Examples can include websites like:

    • rozen.audio
    • materiacollective.com
    • blueturtle-design.com
    • nicolaslietzau.com
    • webdesign-inspiration.com
    • webflow.com/blog/web-design-inspiration

    As you can see in the provided examples, each website has a different style and interface, which makes it distinct from one another. Especially the last two links, which shows a variety of different websites that can easily serve as inspiration.


    Font & Colour


    When working on your project’s appearance, you will ensure that font and colours used complement your website. When going through the examples provided above, you will notice there are only three to four colours used for these websites. These colours serve as colour palette for the websites and it ensures that it is pleasing to the eyes of the users who access it.

    It is always recommended to use a maximum of 3 to 4 colours, which will balance off each other and not be too contrasted. If you are interested in learning more about colour theory, I would highly recommend reading Stephanie Corrigan’s blog, How to Strategically Use Color In Website Design.

    Here are also the following resources and tools you can use to manage your project’s colour usage.

    • Canva's Color Wheel
    • Coolors
    • Material Design's Color Tool
    • Color Blindness in User Interfaces
    • Building your Color Palette
    • How to Choose a Colour Theme
    • Color Theory for Designer Part 3: Creating your own Color Palettes

    Similar to colour usage, it is advised to use a maximum of 3 fonts. As stated by AWEBCO on their blog, Why Typography is So Important to Your Website Design, it will only make a mess of the website and make it more difficult to read through the content. AWEBCO also states some examples on which fonts you will need to use and which need to be paired. Similar to the concept of colour theory, you need to find the correct font-type that would blend in well with your website’s design and complement other font types.

    Here are some free-to-download font websites you can use for your project:

    • www.1001fonts.com
    • www.fontspace.com
    • fonts.google.com
    • www.fontsquirrel.com

    Additional UI/UX Implementations


    As a developer, it is our job to ensure that the website / web app is eye catching to users that click on the link and we need to ensure that we grab their attention within 10 seconds before they click off the site.

    Of course, the look of the site is mainly determined by the client and you can’t add too many additional bells and whistles – That would just be overwhelming for the user.

    Rather, it is best to think what would match with the client’s vision and what would be suitable to for the user to view and navigate.

    For easy navigation, you can simply peruse a plethora of demos showcased at Free Frontend’s list, 102 CSS Menu. The list contains various of different styles that range from Interactive 3D buttons to responsive interactions with menus that replicate the appearance of Apple’s menu system.

    If you need to work with analytical data, you can read through ,Chart.js’s documentation and view the different chart types they offer before implementing them on your own project.

    Here are some additional links to other cool add-ons and websites that be used as inspiration that could help you improve your UI and UX design:

    • Realistic Water Effect SVG Turbulence Filter
    • CSS 3D Card Design RGB Effect Tutorial
    • 5 Stunning CSS Filter Tricks You Must See
    • Tilt JS Parallax Tutorial
    • codepen.io/StephenKoller
    • codepen.io/patrickwestwood
    • Top CSS & JavaScript Animation & Hover Effects | August 2020 (Video)
    • 10 Great Examples of Website Navigation Design

    I hope that this tutorial has been helpful and that you’ve gained a lot of resources for your project.

    Contact us


      Related posts:

      onesignalHow To Setup And Use OneSignal For Web Apps laravel livewireLaravel Livewire from college to workFrom College To Work – A Web Developer’s Experience benefits of developer journal5 Benefits Of Having A Developer Journal
      Share
      1
      Henlo Neethling
      Henlo Neethling
      Henlo is a junior developer, learning to become a jack of all trades for front-end development, UI/UX design and backend development. Has an interest in learning techniques to make the development process go smoother.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165

      +61(0) 42 420 8911


      switchon@lavalamp.biz


      Unit 1 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy