The Novice Way to Web Design
05 Oct 2017The First (and very important) Key to Design
Ever wondered how websites look beautiful? I’ve often been in awe at how people can design beautiful yet modern websites and often wondered if I could ever possess the ability to design like that. After trying my hand at designing such websites, I’ve realized just how difficult designing actually is! To my surprise, it takes a lot of time, effort, and thought to figure out what a website should look like. This brings us to key #1 of this design process: being patient and willing to take the time to find out what works for the website and what doesn’t. One can do so by using specific UI frameworks to help create a visually pleasing website for the user. In essence, a framework allows users to create and apply beautiful layouts to a web page by using various types of software. This is usually done through a combination of CSS, which is a way to style elements in a HTML (HTML = a web page), and Javascript, a type of computer language used by most web pages. More information about UI frameworks is described briefly in this documentation by Oracle explaining how UI frameworks can be applied to source code written in Java. Among most frameworks, I am particularly fond of using Semantic UI as it provides a somewhat easy interface and is almost an enhanced version of CSS (it can even be used in conjunction with CSS!), which is very awesome in a geeky way.
How to Understand the Semantics of Semantic UI
Learning Semantic UI is similar to learning an entirely new language. As many experience in their lifetime, foreign languages can be difficult to learn. However, once one gets the hang of the language, it gets easier to learn new words, grammar, pronunciation and such. Semantic UI is the same. Honestly, Semantic UI can be a real pain to learn, let alone understand. Of course, learning semantics is always gritty. Spending an immense amount of time trying to understand why the text you just put in the container doesn’t show up is painful. As such, it can be time consuming to learn Semantic UI when the objects in your website don’t resemble the design you have in your head. However, with practice and great ambition, your website can look better than the design in your head! You can be a great designer that can make modern and chic websites! However, without a little Javascript magic, some elements of a website won’t be dynamic/be functional! This brings us to key #2 of designing: have a design plan and play around with your framework, whether it’s Semantic UI or some other framework, and Javascript (if you know it). It may sound simple but it’s honestly the best way to figure out what works and what doesn’t work in design.
Not only does Semantic UI make web pages look awesome, it’s also easier to style and design these pages with the user’s interests in mind. Without Semantic UI, the only options to style a web page is to use CSS, which is very limited. Realistically, CSS does not offer much when it comes to making a web page look visually appealing for a user. In other words, the chances of having someone come back to use a website styled with only CSS is really low (e.g. a white box on a white background with red text in the middle). I’d say the user would not think twice (or look at a website) that is poorly designed with only HTML and CSS. A website designed in this manner would be visually ugly and promotes a creator’s poor design skills. In the end, using Semantic UI pays off because it will greatly influence the chances of a user using the web page in the long run. More people will come back to the web page or app and, more importantly, use it if it looks aesthetically pleasing. That brings us to key #3: among everything else, think of the user first when you design! Think about this: people will only see the user interface (UI), which could be the website or appearance of an application. This means other people will access your app and initially judge your app based solely on the UI. It’s scary isn’t it? The difficulty in establishing what a user wants and what they don’t want to see is high; yet, it becomes easier when you think of what you want to see. Ask yourself this: what would you as a user want to see in a website you frequently visit (i.e what are your preferences)?
The Point in Making Visually Beautiful Elements
Now, let’s talk about appearances. Yes, I’m talking abot physical appearances. To be frank, the main reason Semantic UI and other frameworks are so useful is because they provide a way to create a visually pleasing appearance to a website/app. But why? Why do we as users value, what we deem, a beautiful layout on a website or app to the point where our good friends HTML and CSS alone can’t save a web page’s design in under any circumstances? This could come from the idea that humans are evolutionarily attracted to looks/physical appearances of other humans because looks are thought to be advantageous to survival. The concept of being attracted to visually pleasing humans can be applied to objects in the environment as well. This means we probably find media, such as web pages, apps, or games, attractive because we are genetically inclined to find attractive stimuli appealing as aids to our survival. The advantage of being beautiful can also be seen from a social perspective. Studies have shown that when people are perceived as beautiful, they are more likely to be more socially competent and happier than people who aren’t beautiful. The same can be said of beautiful software, meaning an end product that looks visually appealing can make users and the creator very happy. As weird as this sounds key #4 is: take advantage of what humans find physically beautiful! In all honestly, using this knowledge will aid in making the design process easier and a little more fun for everyone!
Use Your Keys to Be a Master of Design!
Now it’s time to put these four keys to use! Yes, it will be difficult at first but nothing is easy without practice and experience. In my experience, it took a little time to get used to the idea of web design and how I can use HTML, CSS, and Semantic UI together to make a fantastic website. Obviously, I am still a novice when it comes to designing, however, these keys have aided me greatly in my quest to be a great designer. By experiencing the trials and errors of designing with Semantic UI (combined with CSS), one could say I’ve discovered my calling. After thinking about a design, it’s become easier to hard code it on my web page(s) and I’ve learned to be quicker at hard-coding, with a few tweaks from here and there. One could even say I’ve gotten faster at writing the code for the design website. All in all, I have a lot of fun designing and writing this code because it’s easier to understand than other languages. Despite the amount of time it takes to learn how to design effectively, it’s the greatest feeling when you realize you created a beautiful product that you can be proud of.