A UI (User Interface) can make or break your website, but as an independent developer your time is precious. How can you make a website that looks great without breaking the bank or hiring a designer? Read on to discover the ingredients that go into the perfect UI.
Weighing it up
There are a few factors to consider when deciding how to design your UI:
-
Accessibility: how much time will you need to invest in crafting a UI layout? Will you need to learn any new Software?
-
Priority: are the needs of your website so specific that it requires detailed blueprints? Could research into free themes (i.e: Jekyll themes) provide you a presentable product?
-
Implementation time: a detailed design, with specific HEX colours selection, margin spacings and element positioning, can vastly increase coding time for the front-end of your website.
-
Budget: do you have the spare cash to buy dedicated design Software? Is the look and feel of your website so crucial to your needs that you would consider hiring a UI professional?
Remember, there are a huge assortment of UI development strategies: selecting the right pathway for you is essential. Without further ado, let’s dive in:
Wireframing
Wireframes are a fundamental part of designing your website, outlining the basic structure and layout.**
By defining wireframes, you allow stakeholders to mentally ‘walk through’ your website and picture themselves in the customers’ shoes. When wireframing, you might define:
- where page elements (pictures, text or logos) are positioned on the page
- how the user will navigate through the site*
- points of interaction on the page, i.e: ‘hover’, ‘click’, ‘drag’.
Hand-Drawing
A sketch of a Web Page design - credit speckyboy
‘There’s no school like the old school’ some might say. Hand-drawing is a quick and easy way to dip your toe into the world of Wireframing. Here are some advantages of hand-drawing your Website Designs:
- Simplicity: sometimes a few lines are all you need. By keeping your designs loose, you allow for more flexibility to adapt to unforeseen issues or adopt emerging technologies later on.
- Cost-efficient: the resources required to create a wireframe are probably already laying around your desk.
- Speed and efficiency: starting from scratch is as simple as turning the page in your notebook. By keeping sketches fast and loose (you can always create a refined version later), you open yourself up to new ideas as you get to grips with your concept.
Something that is a definite drawback of hand-drawing, however is shareability. Even if you have created the perfect sketch, when working with a client you will need a scanner or a good camera in order to capture your work.
Keep in mind that you don’t need to have artistic talent to create a hand-drawn wireframe: your drawing ability should never stop you from jotting down your ideas. The most important part of this process is representing the idea of the layout you want to provide.
WYSIWYG Editors
A screenshot of an early WYSIWYG editor - Macromedia Dreamweaver
‘What You See Is What You Get’ editors put the power at users’ fingertips by allowing physical manipulation of the elements on the page, usually via a dedicated editor interface.
Some popular examples of WYSIWYG editors are Wordpress (powered by Gutenberg), SquareSpace and Wix. By utilising a no-code approach to Website development they can enable you to develop sleek UIs without prior knowledge in Web Design or Coding.
The drawbacks, however, can be significant:
- Locked In: Once you have lovingly crafted your website’s design, there may be significant effort involved in migrating to another solution in the future, for instance manually migrating images from your site.
- Generated Code: WYSIWYG editors often use configurable ‘blocks’ that try to cover lots of use cases. As a result there is often a lot of redundant code created, leading to large penalties in performance, search engine rankings and accessibility for disabled users.
- Editor Limitations: When using pre-defined blocks in an editor, you are strictly tied to the options the platform has provided you. What if you want to round the corners of a text box, or create an alert banner? If the developers of the editor haven’t thought about your use-case, you may be stuck.
My recommendation for WYSIWYG editors is to only use them when you can find an existing example of exactly the functionalities you want already on the web.
Dedicated UX tools
For those who need complete control over the final presentation of their site, tools such as: Figma, Zepelin or Adobe XD allow you to craft high-fideliy Wireframes.
Rich Wireframes are website ‘blueprints’ with specifications for almost every detail: margin spacing, hex/pantone references, web font selection.
Those who are unfamiliar with UX software may have to invest time in understanding it, reading documentation and understanding the UX-specific terminonolgy behind it. Budgeting concerns may cloud the picture here also, with most products operating a subscription model.
These powerful solutions, however, can produce a finely detailed specification of how your site will appear on-screen, and can be well worth the investment for those committed to their brand image.
Getting to grips with UX
Crafting the user experience design of your site is an investment that is worthwhile for some developers, and not for others.
By closely assessing your design needs and selecting either a high-fidelity or low-fidelity wireframe solution, you can cut out unnecessary leg-work and expense in the design phase. Experimentation with different design processes can unlock the path that is right for you, and lead to a website that is a pleasure to use.
UX at Scott. a. Dev
Whilst we cannot provide a comprehensive UI/UX service are Scott. A. Dev, through clear communication and discussion with our in-house developers, we can pinpoint down exactly what style makes your business tick, and hone in on that aesthetic with expert web styling skills.
Footnotes
* Commonly in Software Development, a Product Owner would draw up a ‘User Persona’ in collaboration with the UI Design team, in order to better inform choices in the layout of the website. As entry-level developers, however, this is not a topic we need to worry about just yet.