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
    the art of coding
    The Art Of Coding
    Oct 4, 2021
    computer vision
    Computer Vision
    Oct 18, 2021

    The Art Of Wireframes & Mock-Ups

    Categories
    • Web Design
    • Web Development
    Tags
    • digital wireframes
    • mock-ups
    • mockups
    • traditional wireframes
    • ux consistancy
    • web development
    • wireframes
    the art of wireframes and mock ups
    the art of wireframes and mock ups

    In the web development industry, planning a website and web app’s functionality is crucial to the development process.

    If communication between the developer and the client is not properly maintained, it will result in total anarchy. The best way to prevent this is to ensure that you are in constant contact with the client and get regular document updates regarding the features and screens of the project.

    However, there will be times where certain clients do not provide you necessary documents that details the layout and functionality of a screen, which makes it difficult to implement the client’s vision onto the project.

    The best way to handle such situations is to create wireframes and mock-ups.



    What are wireframes?


    Wireframes are basic layouts that consist information on UI and UX elements. It helps the developer plan out the layout of the web page as well as note where certain functionalities will be located on the page.

    This can then be used to review all the details given and make sure that the wireframe matches with the client’s request on what needs to happen and where it is happening.

    the art of wireframes and mock-ups

    This can then be used to review all the details given and make sure that the wireframe matches with the client’s request on what needs to happen and where it is happening.

    There are two different ways on how you can create wireframes:

    • Traditional Wireframes – You can simply draw wireframes in your notebook or a board, where all your details and notes are written down.
    • Digital Wireframes – You can create wireframes on your computer via Adobe XD or any other wireframe tools available on the internet.

    If the wireframes have been properly reviewed and discussed with the client and your fellow colleagues, you can then proceed to finalise the design by creating mock-ups of the wireframes.



    What are mock-ups?


    Just like wireframes, a mock-up is used to visualise the web page. The main difference between a mock-up and a wireframe is that mock-ups are fully designed screens that consists of colour, typography, graphics and many other visually pleasing elements while wireframes only consist basic layouts and do not consist of styling.

    A mock-up is used to display the visual ideas of the client. It helps confirm that the planned screen matches the client’s expectations. It also saves a lot of development time from being wasted on front-end when the client requests changes.

    figma mock up

    The best way to create a mock-up is to use programs like Adobe Photoshop or Figma, depending on how detailed you want your mock-up to be. You will need to put into account on how the project will look, based on the information the client has given you and the confirmed details of your wireframe. You will need to make sure that there is consistency in font style, colour and layout design throughout the entire project.

    If you are not fully sure on how to properly approach UX design for your mock-up, you can simply read up on my previous blog, UX Consistency In Web Development, for some tips and resources to assist you on properly maintaining consistency.



    What are the Best Tools to Use for Creating Mock-ups and Wireframes?


    The answer is subjective to change based on your design process, need for responsive screens, collaboration efforts, interactability and use of graphics.

    In my personal experience, if a client is unable to provide a mock-up of what they want their website / web application to look like, it would be best to review your notes and the documents the client has provided on what is supposed on happen on the screen.

    Once you have finished reviewing, you will need to use a program or website that can create a wireframe and a mock-up at the same time. The best example would be Figma’s design interface.

    figma dashboard

    Figma allows you to create a very detailed wireframe and mock-up, with a very user-friendly interface that makes it fast and easy to create the necessary screens. The interface allows you to properly store your layouts in different layers and allows the user to copy each layer.

    Figma also allows their users to send invites to specified emails, making it possible for the client to instantly view the mock-up and wireframe, especially for those who are currently working from home.

    I hope that this blog is able to help you make decisions in your development journey and I wish nothing but the best.

    Contact us


      Related posts:

      onesignalHow To Setup And Use OneSignal For Web Apps laravel livewireLaravel Livewire laravel envoyer and forgeProvisioning A New Digital Ocean Server With Laravel Forge, And Deploying Code With Laravel Envoyer how to deploy your app/website on herokuHow To Deploy Your App/Website On Heroku
      Share
      0
      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


      switchon@lavalamp.biz


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

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      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