Tag Archives: web developer agency

Getting in Shape: Using Geometry in Web Design

web design tips

Raise your hands if you recognize any of these notations; 2d10, 20d6, 2d20, 3d6. If you do, then I salute you gamemaster, but if you don’t, here’s a crash course on the beautiful world of tabletop role-playing game. These notations, referred to as the AdX, refer to dice notations. A 2d10 for example would mean that the players are required to roll a 10-sided dice twice, most usually used to calculate damage.

The reason I brought this up is because when I was rummaging through my desk looking for my nail clipper, I’ve lost at least 3 nail clippers this year alone so this was a pretty big deal, I stumbled across a pair of 10-sided dice that I haven’t seen in years. My affection for 10-sided dice doesn’t just stem from the fact that I love RPGs in general but also because I love the shape of a decahedron. Obviously, a decahedron doesn’t translate well to web design, not until VR is widespread anyway, but other geometric shapes still has a place in web design.

Geometry in web design

To sum up, geometry is the visual study of shapes and patterns. Shapes and patterns occur in pretty much all walks of life, not the least in the field of design. Architecture, art and design are all mingled with geometry and even Mother Nature itself is filled with geometric shapes. A honeycomb for example is simply an array of beautiful hexagonal wax cells arranged in a cluster by honey bees as their nest.

The beauty of geometric shapes is that they can be used both aesthetically and functionally. They can be used simply to inject some visual pizzaz on your website or used as visual cues to guide reader’s attention on to certain elements. It’s this exact versatility that makes them so attractive to use in web design and other user interfaces in general. The thing that people need to keep in mind when it comes to geometry is that it’s not just about the shape itself.

Geometry also deals with how those shapes are related to each other and how those shapes relate to the space around and between them. If that description strikes you as familiar, it’s because that is what functional design mostly concerns itself with. The screen the webpage is being displayed on has limited space and deciding what to communicate and how to communicate them best is pretty much the question every web designer should ask themselves.

Geometric shapes in web design

Quite possibly the most simplest shape there is, dots or a circle when it’s bigger in scope, is the most common shape you’re probably going to see. Circles are most commonly seen as standalone icons, such as on your phone for example, due to their shapes, which is an indicator of fullness. Circles are also widely used when dealing with a gauge of some sorts or when you wanted to display some statistics using a chart, especially of the pie kind.

The second common shape we’re dealing with is rectangles. Rectangles as a shape are foundational because they are used as the basis for the grid layout that is widespread in a lot of websites. Check out the homepage of the tech blog The Verge for an example. Headline contents are arranged on a rectangular grid at the top with other most recent articles spread out on a list below them. This grid layout is also quite commonly seen on booking websites such as Airbnb and Booking.com.

The third shape we’re dealing with is a collection of shapes referred to as polygon, which is any 2-dimensional shape formed from a collection of straight lines. Yes, rectangles technically fall under this definition but we’re focusing on less common polygons such as triangles and hexagons. Because of their sharpness, triangles are commonly used as navigational cues, guiding viewer’s attention into an element on the webpage.

How geometry is used

If you’ve ever used an Android device in the past 3 years or so, you should be familiar with the words Material Design. For those unaware (read: an Apple devotee), Material Design is the design language Google has been using on their mobile interfaces since the release of Android 5.0, Lollipop in Android parlance. Geometric shapes, the grid-based layout and the use of shadows to create an illusion of depth are the hallmarks of Material Design, creating simple, consistent yet attractive user interface across all of their devices and services.

I’ve stated before that geometric shapes is notable for their versatility, which is why they’re perfect for Material Design. Whether stuck in on the upper-right corner of a desktop screen or sitting right there on your phone screen, geometric shapes are universally relatable and customizable to a degree than you can use them for any goal you could think of. Recently, Google has updated this design language with softer colors and gentle curves in place of hard angles but I won’t be surprised to see this style to be used for many years to come.

One other use of geometric shapes I’m particularly fond of is isometric projection. For those of you who grew up with video games back at the dawn of the 21st century, you should no doubt be aware of isometric video games. Back then, 3D graphics was still very rough so video game developers played around with 2D video games to give players the illusion of depth using isometric projection.

Think back to classic strategy games such as Command & Conquer: Red Alert 2 or the first game in the Age of Empires series. By displaying elements in such an angle, you can create illusory depth even though the images are still flat. For something contemporary, check out the game Monument Valley and its Escher-like aesthetic. The isometric viewpoint isn’t just a stylistic choice in that game; they also form the basis for optical illusions central to the game puzzles.

The simplicity and versatility of geometry

Good design is simple, yet understandable. In a way, designing using geometry is no different than the approach taken by companies like Muji and Uniqlo with their products, taking a simple, minimalist approach that is borderline industrial but still pleasing to the eyes. In good design, form and functions lives in harmony and using that standard, there is no way to describe geometric shapes as anything other than good design.

Avoid These Link Building Techniques that Failed in 2018

SEO tips

Having a business means that you have to think through risks and consequences that may come in the future; therefore, everything should be planned even before you launch your business. There are things that should be considered while building a business starting from financial management, employees, even to marketing. Many business owners nowadays know one more important part in establishing a business; SEO. Yes, they hire various SEO companies to do SEO services for their business, maybe including you. That being said, even though you have hired an SEO specialist to do their job for you, that doesn’t mean that you can’t get involved with the process. In fact, you should be involved too. Not only can you be well aware of the situation, this can also help make things easier for your SEO specialist if you know some techniques that can boost the progress. One of the techniques is link building. Oftentimes, many business owners join their SEO specialist in building links for their website. However, due to having limited time to do it properly, many people still make mistakes in link building, thinking that Google won’t notice. Be careful, some mistakes are sometimes unforgivable. You may want to avoid some techniques in link building especially it’s 2018 at the moment. What should you avoid, then? Keep reading to find out!

Sending spammy blog commenting

Link building is basically putting our links to other websites in hope to get a link back to our website. Therefore, blog commenting is one of the ways we can do link building. However, many people are still doing it wrong. I don’t know if commenting for some people is a waste of time or they are really lazy to read through the blog articles to deliver relevant comments. Instead, they ended up customising the same comment for different blogs, making it look spammy. The right way to do blog commenting is when you read a little bit of their articles first (not just looking at the title and just go on with commenting), and understand what they are sharing in the articles, and comment on it accordingly and relevant to the topic. If you don’t have time, you can hire another person or one of your employees to help.

Spamming links through your forum profile signature

Joining a forum seems to be harmless, especially when your profile features a backlink as well. You can actually leave a lot of backlinks by frequently replying to forum threads. You might think that frequently replying to forum threads will make your SEO performance better, but the truth is that just like blog commenting, doing too much also has negative effects.

Submitting your content to low-quality content directories

Low-quality content directories may be cheaper in terms of price (and sometimes free) and easier to be approved, but low-quality directories can’t offer you effective results, and after Google pushed out their series of Penguin updates, the real benefits of content directories have faded away. Instead, it is better for you to write guest posts on more reputable websites. Although the editing is quite strict and sometimes you have to pay more, the results are more effective and reliable.

Redirecting domains (that’s so Black Hat)

This not-so-new trick has recently been used by SEO professionals, where there is 301 redirecting specific domains to funnel link juice right into their web proprieties. Just like many other black hat SEO techniques, it can work well as long as you execute it perfectly. However, once Google finds out, your rankings are gone and your entire time spent on building the juice flow will be in vain.

Getting significant results on SEO may take a long time, but it will be worth waiting for, instead of wanting fast results using black-hat SEO techniques that will damage your SEO process. When you are genuinely taking this SEO process seriously, you will do your best in maintaining and improving your business performance. Therefore, when big efforts may take long, better results will pay it off.

The Writing on the Web: The Importance of Writing in Web Development & Design

web development tips

Picture this scene. You and your team have taken on a job to develop and design a website for a streetwear clothing company, kind of like Supreme on austerity measures, and now your team has reported that they’re done putting the finishing touches on their work and ask you to check the results. You head over to their desk only to see that your team has overlooked one important factor.

Instead of the actual mission statement, lorem ipsum still populates the webpage. Instead of buttons imploring visitors to ‘Explore Our Collection’ you’ve got buttons with the words ‘CTA’ literally displayed on them. It seems that your team has completely forgotten about the writing part. The thing is, instances such as these are pretty common in web development given that designers and developers tend to not be very wordy. At this point, lorem ipsum might as well be printed on web developers’ coat of arms.

The role of writing in websites

Imagine a website without words or with words that have actually nothing to do with the website itself. While it’s not entirely misguided to consider that the visual design and the codes underlining the website are the most important part in web design and development, the actual words is what completes them. Website isn’t just a collection of road signs that tells you when it’s okay for you to stop, as an exercise take a look at Web without Words to see how lost you’re going to be without words.

It’s wrong to consider writing as separate from design and development. Even when you’re coding, you are using words, albeit one that is written for machines instead of the human mind, and the Swoosh is just a swoosh without Nike’s iconic ‘Just Do It’ tagline. It’s more appropriate to consider writing as part of design and development, which is why it’s wrong to not consider them until the design process is done; they should actually be a part of the process.

For example, I can remember one instance where a company uses the exact same words on their printed marketing materials as on their website. It doesn’t matter if the writing’s excellent, in the context of marketing, writing for the web and for the print requires a different approach. The direct and concise approach tends to be favored in digital marketing, which is why for web designers and developers, thinking what words you should put on the website requires proper thinking as the space you’re working with would be limited.

Writing as part of design and development

Let me ask you this, does your design and development work involves designing for the 404 error page or other error messages? In lieu of generic error responses, you could use some original writing to improve your design, especially if you have some ideas on what the 404 error page should look like. The metadata for your website, such as page titles and the description for search engines also involve writing and the latter is especially important for the purpose of SEO.

Yes, those examples might be light on words compared to a Tolstoy novel but that doesn’t mean they’re irrelevant. Nike’s Just Do It only have three words but those three words are now a Holy Grail of sorts in the field of marketing. If you’ve ever seen Mad Men, then you know how important words can be in the realm of marketing back in the 60s. Website is the frontier for marketing in the 21st century so it’s natural that writing would be important in web design as well.

In web design, this is referred to as interface copy, texts that are essentially part of the user interface of the website. Navigation labels, the sitemap, CTA text on buttons and labels on forms are all examples of what constitutes interface copy. Good design might not always need words but they can always be improved by adding labels and this is where interface copy comes in. With enough creativity, you could use interface copy to stand out amidst the generic ones used by most websites.

The second part we’re dealing with is marketing copy. They fall somewhere between the interface copy and actual contents, bigger in length but not quite and usually written to fulfill a sales or promotional role. The text you’re putting in the ‘About Us’ page for example and products and/or services description fall under this umbrella. They’re not as meaty as blog posts or articles but as the focus lies on persuading readers, this is something that you still need to take seriously.

Everybody can write but few are actually good at it

While the actual word count for short stories might vary from anywhere between 1,000 to 10,000 words, the accepted definition is that short stories should be able to be read in a single sitting. Writing a made-up story of 2,000 words doesn’t sound hard, does it? Try doing one however and you’d be surprised at the commitment required for such seemingly simple undertaking. My college professor could write a short story in 10 hours, but she’d need an additional 20 hours refining and editing it into something worth reading.

Writing is hard and copy writing might be even more so given that its goal is to persuade people into spending money. By comparison, trying to make people cry or laugh is easier because those things are free; your time is the only thing you’re sacrificing. My point is, if you’ve been designing and developing websites without considering writing, only leaving them up until the last minute, you might want to reconsider that approach.