Speckyboy Design Magazine - Web Design News, Resources & Inspiration
Speckyboy Design Magazine offers insightful tutorials, time-saving techniques, fresh and useful resources and inspirational art, covering web design and development, graphic design, advertising, mobile applications and even, the occasional Lego post.
When trying to get your point across to users, serving them up mountains of text just isn’t effective. People are looking for instant gratification and most won’t stick around to read long passages. We can better spark their interest through compelling visuals.
Timelines are among the more popular visual elements we have at our disposal. A good one can present a story in an easy-to-follow, and even interactive, manner. They can grab a user’s attention and invite them to participate in the experience.
That gives us the perfect opportunity to share some top examples of timelines that are both attractive and engaging. Enjoy!
The Complete Toolbox for Web Designers Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
One potential pitfall of a content-heavy timeline is that all of its entries can get bunched together. This makes it difficult to give each item the focus it deserves. This example takes a unique approach, where each entry’s image is faded until it comes to the top of the viewport via scroll. Once that occurs, the image is fully realized, thus allowing the entry some time to shine.
A timeline can be used to display all sorts of chronological or even categorized content. Here, this attractive date-based layout is used to list blog posts. The format is simple and easy to follow. It offers a different perspective on the standard vertical listing of posts.
Let’s look at another unique method for displaying lots of information in a limited space. What’s great about this example is how versatile it is. You can navigate via keyboard, drag or click. Then there is the ability to zoom in or out of the listings and to rewind things back the beginning. Not only does it look great, but it also gives users some choice in how they interact.
Sometimes the most interesting examples are the ones that look nothing like you’d expect. We’ve come to see timelines as very linear, with text or images jutting out from a line of some sort. Here, not so much. Instead, we have a series of tall, skinny panels. Hovering over a panel reveals a full-color image and some text. Even more impressive is that it was all done with pure HTML and CSS.
Scroll-based animations are kind of a big deal these days. And it makes perfect sense that some of the best timeline examples we found integrate them to some degree. This summary of the great Albert Einstein’s life features some slick animations, thanks to jQuery. It makes the user experience feel a bit more interactive and just flows along naturally with the content.
At first glance, there doesn’t appear to be much behind this look at artists in Amsterdam. However, click on one of the artists and you’re taken to a page that features a second timeline displaying their works. The timeline format works beautifully here, complimenting the overall aesthetic.
There’s still much to be said for simple solutions. After all, not everything has to knock the user’s socks off. This Vue.js-based example isn’t overdone in the least. But what it does offer is an interactive way to navigate through a listing of important events. It’s fast, legible and intuitive. What more could you want?
Finally, let’s explore another unexpected type of setup. This horizontal timeline is reminiscent of a chart or graph. Again, it’s very simplistic in design. But that also means that you won’t struggle to discern one entry from another, as each is on its own line. Text is also kept to a minimum, with hyperlinks being used to lead us to more information.
The free Document Folder collection includes icons for most file types and the most common folder uses, making them perfect for any designer that is currently working on a business or office-related project, or even to add some much-needed design flair to a dashboard, admin backend or even a mobile application.
In total there are 150 individual folder icons in this free collection. They come in three unique styles (flat, lined, and colored lined), and are available in both PNG and SVG formats. And you can, of course, freely download and use these icons in both your commercial and personal projects. This free set has been created by Freepik.
Scroll down to preview and download the entire collection.
Being a busy web designer is a little bit like being a parent. You’re so focused on taking care of everyone else’s needs that you may well neglect your own.
Nowhere is that more visible than on your own website. While we love to talk about crafting a killer portfolio and all the great projects we’ll feature, it’s almost never that simple. I should know, as I’ve been struggling with it for some time now.
My own redesign process has been ongoing for nearly two years (I know!) – and it feels like it may just drag on forever. But my guess is that I’m not alone. When viewing the virtual homes of other freelance designers, I often see stale blogs, dated designs and other signs of neglect.
As such, I thought it might be worthwhile to dive in and examine just why I’m struggling and maybe find a solution. Sure, this is the time I could be spending on my own site. But that’s only helping myself. Perhaps by putting this out into the world, someone else may find inspiration for building their own shiny new website. At least, that’s what I’m going with.
Personal Project Time Is Hard to Find
It used to be that, every so often, I’d run into a period where client work was minimal at best. For instance, the dead of summer and times surrounding the winter holidays were always slow. These were prime opportunities for brainstorming and tackling personal projects.
But in the last few years, it seems that the slowdowns aren’t nearly as frequent and are much shorter than before. This has led to a lot less time to think of anything outside of my normal workload.
It’s a good problem to have (better to have too little time than too much). Yet, it also takes time away from the creative experimentation that comes from building something for yourself. Quite often, my own site has served as a playground for new ideas that I hadn’t implemented into client projects yet.
Because time has become so limited, that means working on the redesign outside of normal business hours. Yet after parenting, husbanding and all the things that need to be done around the house, the motivation just isn’t there.
Perhaps that lack of motivation is a tell-tale sign that the situation also lacks urgency. A busy schedule, combined with the existence of an older, yet still functional, website may mean that a redesign isn’t the biggest thing on my to-do list right now.
The Great Content Debate
While a new design is always nice, I’ve found the decision of whether or not to keep my existing content to be difficult. The question comes down to what provides the most benefit.
On one hand, the content I have has served me well. Maybe it’s a little too wordy in spots (that’s my style), but overall, I haven’t found it severely lacking. The lone exception may be my blog, which just hasn’t seen many new additions for a while.
But on the other hand, part of me feels like leaving the existing content in place is sort of like doing only half the job. For a completely fresh start, it seems that both the look and content should be refreshed.
There is a valid argument to be had either way. Ultimately, I think the best path for my particular situation is to simply make tweaks where I think they’ll help. For instance, making content more concise and easier to follow. Perhaps adding a few more visual aids as well.
My advice for those stuck in a similar debate is to take stock of what you currently have and see if it still reflects who you are. If so, maybe some minor changes will do. Otherwise, it could be time to go back to the drawing board.
Why It’s Important (And Why It’s Not)
Having a beautiful, functional website is a key component in branding your business. It’s what we recommend to our clients, and it also applies to designers as well. You want to show your talent and professionalism, along with your grasp of the latest technologies.
For some potential clients, seeing your portfolio site could be a deciding factor in whether or not they reach out and contact you. In short, this is both a vital and expected part of your business.
However, once you have established yourself in the market, it’s worth wondering how often your website needs a refresh. At this point, maybe smaller, more iterative change is what’s called for.
Being old school as I am, I long followed the unwritten rule of a full redesign every couple of years. While that’s still necessary in some situations, it’s also not a must-do anymore, either. Unless your site is a complete design disaster or is suffering from some other major flaw, there’s nothing wrong with making a slow and steady improvement to what you already have.
So, besides my time and content concerns, this may be another reason I just don’t feel the burning desire to get something new up in short order.
It’ll Get Done…Eventually
Part of running a freelance design business is making sure that your clients are well taken care of. Sometimes that means putting your own stuff on the back burner. And while a younger version of myself might have been frustrated by that, now it doesn’t seem like a bad bargain.
And so, while I feel some level of guilt about the amount of time I’ve taken in redesigning my own website, I also recognize that it’s far from an emergency.
Therefore, I’ll continue to work on things when I get inspired to do so. Most certainly, I’ll go back to the drawing board a few more times. But when the time is right, I believe it will all have been worth the wait.
Sometimes all you need is a name. It is a powerful thing. It always has a meaning and, even more, it has a subtext and undertone. A name can speak for itself. It can elicit trust in potential clients and quickly establish the proper atmosphere. As a rule, this name is the one associated with a company. It lies at the heart of the brand and serves as a source for inspiration when it comes to creating a visual identity.
So it is not surprising that instead of using modern features, mind-blowing illustrations or extraordinary typography, creatives prefer to build their designs around their name, using it as a primary detail of the composition. Yes, it can be tricky since you need to turn this minimal approach to your advantage. It requires a vivid imagination and excellent skills. But when done right, it can lead to a fantastic outcome.
To show this in practice, we have compiled a list of business cards centered around a name. There are a number of excellent examples that give you hints as to how to create a name-based card that looks stylish and attention-grabbing.
We all know that a font choice can make or break your final design. What’s more, there are plenty of designs online that rely on fonts as the central part of the design. And with so many different fonts out there, it can be hard to identify which font was used in a particular design.
Luckily, there are several tools that can help you identify fonts and in this article, we’ve rounded up the best of them. Some are browser extensions and some are web apps. Scroll through the list below and be sure to bookmark them so you never have to wonder what font was used in a design or in a website.
Web design and development are vast subjects. And it seems that those of us within the industry are simply expected to know every nook and cranny of it. There’s a narrative that sees us as all-knowing beings who can solve any web-related problem.
However, buying into this narrative means putting a massive amount of weight on our shoulders. Whatever the actual expectations of our clients, we can feel the need to project an image of having it all under control.
The truth is that we’re not superheroes, even if there is pressure to act the part. And, you know what? That’s okay! We don’t need to be perfect.
Yet, there can be a bit of a stigma attached to letting our clients see us as we really are – flaws and all. But today, I’m going to make the argument for dropping the façade and just being yourself. It might just be the best thing for your career, your client relationships and your mental health.
The Freelance Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
Now, I’m not suggesting that you start showing up to meetings (virtual or in-person) in tank tops and flip-flops. You still need to look presentable and act in a professional, courteous manner.
What I am saying is that there’s no need to have a perfect answer for every question. And you don’t have to pretend that you have every skill known to man. You don’t even need to have an endless amount of time to fit what a client is looking for. In fact, do the exact opposite. If there’s something you’re not sure of or doesn’t fit with who you are, say so.
This not only relieves you of some internal pressure, but it also breaks down a wall between you and your client. Instead of acting as if you have the keys to the online universe, you can have a real, honest discussion about client needs and the challenges involved in meeting them.
The result may be that you see each other as more authentically human. It builds a level of trust can be near-impossible to achieve when you’re playing a role, as opposed to just interacting as people.
The Potential for Better Projects
This newly-authentic you can also bring a new sense of freedom when it comes to the type of projects you take on. If there’s no pretense that you know it all and are willing to do anything, you can freely state if there’s something that doesn’t make sense for you.
To use my own experience as an example, I’ve been approached with projects that require skills that are outside of my specialty. Or sometimes they take a level of commitment that I can’t fit into my schedule. Once in a great while, I’ve even been faced with a project that might just be life-altering.
Early on in my career, I would often force myself into projects where I knew I wouldn’t be comfortable. Over time I’ve learned that the best policy is to be upfront with my concerns. If a project isn’t a good fit for me, I communicate it to the prospective client. If it requires that I get up to speed on a certain skill, I admit it. The result is that sometimes we move forward together, while other times we part ways.
You might wonder what advantage there might be in admitting your own shortcomings. Certainly, it’s possible that some clients aren’t going to be happy with your answers.
In my opinion, I figure that if a project has me in over my head in some capacity, eventually it will be brought into view. That may come in the form of a mistake, or it may be that we hit a proverbial brick wall in building out functionality. Either way, it’s likely that we’ll have to face reality at some point in the process.
Getting this out in the open right from the start is best for both parties. Clients understand my limitations, while I don’t feel the need to pretend.
When in Doubt, Just Be Yourself
Being more authentic with clients, especially when initially discussing a project with them, can be difficult. You want to put your best foot forward. Plus, there’s the fear of either scaring them away or showing yourself as unqualified for the gig.
But when you think about it, the reality is that not every project is going to work out. Wouldn’t it be better to realize this right away, rather than six months into doing the work?
Beyond the ability to filter out less-desirable opportunities, authenticity enables you to establish a better relationship with the clients who do sign on. When someone knows who you really are, they’re more likely to give that same level of honesty in return. This fosters a better working partnership, and increases the odds of a successful finished product.
The bottom line is that, no, you don’t have to be a superhero. Instead, being yourself – flaws and all – is more than enough.
You can implement Vue incrementally and it has the ability to work in conjunction with other libraries. There’s a high level of flexibility here that opens up a world of possibilities.
In order to show you what this open source framework is capable of, we looked far and wide into the archives of CodePen. Here are some of the more powerful and interesting uses we found.
The Designer & Developer Toolbox Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins & Design Assets
This snippet shows Vue’s ability to create an interactive UI that goes beyond just your normal button-clicking. Simply drag your cursor around the screen and see your drawings appear – then fade into nothing. You have tons of color choices, or go all-out with the “Psycho” mode.
When you have a tool that will help you build just about any type of UI, why not go retro? This Windows 98-like screen is pretty faithful to the original. Click the “Start” button and a small menu appears. Click on “Settings” and you can change features such as the background and even the clock display. Now, if it could just recreate the vaunted BSoD…
While the examples above were fairly narrow in their scope, here we have a full-blown chat application. To try it out, create an “account” (please, no passwords that you use elsewhere) and you’ll be taken to a page where, yes, you can really chat and see a list of online users. It goes to show that you can build something as in-depth as you like.
Perhaps the best reason to use a tool like Vue is to improve the user experience. All the fancy animations and transitions in the world mean nothing if your interface is too difficult to use. That’s what makes this Wikipedia search UI so great. It not only looks awesome, but it brings a sophisticated search capability that is also easy to navigate.
Odds are, you probably purchased a pack of trading cards at some point during your childhood. Whether it was for your favorite sport (such as the fictional baseball cards in this pen) or game, these little bits of cardboard brought you closer to what you love. Here, we have a set of Vue-powered virtual cards that can be flipped over so that you can check out some interactive stats. There is also a neat search feature included.
Here’s an example of how Vue is able to work with other frameworks and libraries. This slick mail app leverages the magic of GSAP to provide some outstanding special effects. You can click around to view messages, write a message of your own or hit the settings icon and change the theme.
When you have a large amount of tabular data, it can be difficult for users to pick out the information they need. One way to simplify the process is to allow the data to be sorted and filtered in various ways. That’s exactly what this table of top-grossing films does. You can sort the listing by column and a search feature lets you instantly find a specific item. This is how code can help to solve problems.
Frameworks like Vue, or its counterpart React, allow us to implement some powerful form and function into our projects. The idea is to combine a fast, user-friendly interface with the ability for users to easily interact with it. In other words, it’s about providing a more app-like experience.
And it seems like we’re only starting to scratch the surface of what’s possible. It’s easy to see why many consider these interfaces as the future of the web.
It seems like every industry has their own set of fiercely debated topics. They pit tool against tool, theory against theory and can be great fun (or infuriating, depending upon your perspective). But since web designers spend an inordinate amount of their lives online, our debates tend to stir a whole lot of both participation and passion.
Today, we’re going to look at some of the subjects of debate that have taken on a life of their own. Some are completely organic to the industry, while others have been adapted from society at large. Regardless, they have resulted in some epic arguments.
So, let’s poke the bear and bring up those topics you may not want to discuss during an after-work get together!
Page Builders vs Old School Design
If you use a page builder – does that make you something less than professional? Does it mean that you’re taking unnecessary shortcuts?
These are among the questions raised by the use of the popular class of drag-and-drop tools. They’re most often associated with DIY providers like Squarespace and Wix, in addition to WordPress – thanks to a plethora of available plugins.
Part of the appeal of a page builder is that, in theory, it should allow a non-designer to put together a complex layout full of high-tech goodies. In practice, this isn’t always the case. Even an advanced tool can’t fully make up for a novice user who makes questionable decisions.
For web designers, some see the use of this type of tool as akin to making a frozen pizza. Sure, it’s easier. But the final product may miss some of that authenticity that would make it truly stand out. In some ways, it’s a similar argument to the one we had way back when WYSIWYG tools like Dreamweaver first hit the market. It’s the classic battle of tradition vs progress.
Eric’s Take: This one still elicits a lot of debate – including from yours truly. I’m proud to say that I’ve stood firmly in both camps at various times. I used to have plenty of reservations regarding page builders. It seemed like their aim was to replace professional designers (although, they were kind of lousy at it). Lately, however, I’ve warmed up to them a little. Like most relationships, this one is a bit complicated.
React vs Vue
Both of these packages are quite capable. However, there are core differences that tend to split the development world into two camps.
Vue is widely thought to be easier to learn and is much more of a traditional community-based open source project. In some ways, it seems to be the feisty underdog that is always nipping at React’s heels. Never underestimate this kind of appeal.
Eric’s Take: Frameworks, regardless of language, are always hotly debated. It doesn’t seem like either project (or competitors like Angular) are going away any time soon.
Personally, I always advocate for peace. Therefore, I think everyone should use what they’re comfortable with. If you can build what you need with your favorite framework, go for it! Otherwise, we’re arguing about apples and oranges.
Mac vs PC / iOS vs Android
Okay, this argument goes well beyond just designers. It’s been going on for decades – even before the web was a mainstream medium. But it’s still quite relevant in our industry.
Back in the day, many creative professionals chose Mac as it offered a lot of tools that simply weren’t available on a Windows PC. Photoshop, for instance, was Macintosh-only until version 2.5. Not to mention that, from the very beginning, it seemed that Apple courted a cult-like following of devotees. Bill Gates and Microsoft weren’t in the same league when it came to the cool factor.
These days, the Apple-faithful also battle another juggernaut – Google. When it comes to the mobile device wars of this decade, Microsoft is nowhere to be found (at least, not in the OS market). Therefore, Google and its Android OS have taken over as the boogeymen.
In both segments, Apple has a much smaller (yet, not insignificant) market share. When it comes to traditional computers, Windows has a commanding 87% of the market, compared to just under 10% for Mac OS. Mobile is a little closer, but Android still dominates with a 70% to 28% edge.
Eric’s Take: The differences in hardware on these various platforms seems negligible. On the computing side, Apple charges a premium for slick industrial design, while a Windows PC can be built on the cheap and still look decent enough (for my tastes, at least).
Still, whenever I attend events such as WordCamps, I see those ultra-expensive MacBook Pros everywhere. Yes, they are quite beautiful. But my vote still goes with the PC for providing much more bang for the buck.
The mobile competition seems a little closer. On one hand, there are a number of cheap Android devices available for the budget-conscious among us. Yet, you can still waste a few paychecks on a Google Pixel or Samsung Galaxy – just the same as you can with an iPhone. The difference is that Android provides a wider array of options (along with varying degrees of hardware quality).
Whichever you choose, you’re still getting a high-quality operating system. That said, it’s mainly a matter of how much you’re willing to pay in order to look cool.
This Way vs That Way
Finally, we have arrived at the one category of argument that will never go out of style. One of the truisms of design and development is that there is more than one way to achieve a desired goal. Whether you want to make your site responsive or add a shopping cart – there are no shortage of options and approaches.
Not only are these debates ubiquitous (just post a question in a support forum and see how many different answers you receive), they are perhaps the most entertaining and useful. People will often try to one-up each other and might even boast of their solution over others.
What’s really fascinating is that we can take wildly different approaches and still reach the same conclusion. Some are more efficient than others, but still worth discussing nonetheless.
Eric’s Take: Usually, this is all in good fun. It shows the true nature of the community and its passion for solving problems. And these solutions also serve as an archive that is there for us whenever we need a helping hand.
A Sign of Caring
The classic arguments above can sometimes become tired and even a little less than friendly. Yet, they are a representation of just how passionate the designer community is. Sure, some people just like to butt heads (see what I did there?) – but in most cases, these debates come from a place of genuine caring. It’s also a healthy part of any open society.
So, feel free to join in a debate. Sometimes it takes you around in circles, but there’s a chance that it may also help push things forward.
If you want to stand out from the competition and make yourself heard, you need to go the extra mile. That’s the first rule of the online jungle of these days. However, it does not mean that you need to reinvent the wheel or have a bunch of money to afford a grandiose solution in order to impress.
The thing is, despite all the hustle and bustle around big ideas, small details still matter. They always make a difference. You can have a regular website with the basic structure and conventional design and still stand out from the crowd. All you need to do is to enrich the user experience with some little, well-thought-out features. And it seems that many creatives have an eye on this workaround since modern websites are teeming with microscopic solutions. Therefore we can witness many tiny trends.
One of such small, but smart and impressive trend is a liquid-like effect. Its superpower lies in the fact that it just quietly works – enhancing the overall user experience and reinforcing the general impression. It is smooth, elegant and sophisticated.
The Complete Toolbox for Web Designers Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
Consider the personal portfolio of Davide Perozzi, Nature Elixir and Nesatex. These three examples show the tendency from different angles.
Davide Perozzi uses a watery behavior to put the tagline of his website into the spotlight without making it loud. The solution is barely perceptible here. Nevertheless, it is enough to grab attention. It gives a clean and neat interface a lovely zest. Also, it helps to reflect the creative soul of the artist, as well as show everyone that Davide is one who follows the trends and knows how to apply them without overpowering the audience.
The team behind Nature Elixir leverages water surface within one of the sections of the homepage slider. You are welcome to play with it using your mouse cursor. You can leave ripples and traces – disturbing the serenity of the surface. Here the solution is used to support the product’s essence as well as lighten the mood.
In the case of Nesatex, the liquid-like behavior is a mere extravaganza that gives the hero area a nice touch of individuality and peculiarity. It is also featured in the slider, but this time it spices up slides with some extra dynamics as well as enriches the transitions between them.
The liquid-like effect can be seen everywhere. It is quite popular among website artists nowadays. Its sphere of usage is not limited to just backgrounds in hero areas, even though it is here where it flourishes. You may have already seen that it is an ideal candidate for taking sliders to the next level. Consider eumRay Academy, where the solution benefits the overall user experience with fanciful transition effects.
It has a conventional design in terms of layout and coloring. However, the liquid-like effect keeps it from looking banal. It makes the interface feel intriguing and fancy. And, at the same time, this technique manages to save its business-like nature. The solution is used in the slider and as a main revealing effect for showing sections on the scroll.
The teams behind Fleava and Kombu Drinks easily enrich the classy aesthetics with a note of bizarreness. In both cases, the latter serves as a lovely transition effect between the slides that make this basic carousel look original and inviting.
When it comes to transition effect, the trend can be beneficial for all the slide-out navigation menus that are hidden behind hamburger buttons. Let’s take a look at Ruya Digital as a vivid example. Every opening and closing of the main menu is accompanied by a special layer that flows down from the top.
It has a beautiful retro gradient background, with very smooth and subtle behavior. It vividly separates the front side from the back – yet still skilfully ties everything together.
The liquid-like effect can be brought into play as an alluring twist. Consider Balconi and the personal portfolio of Lukas Jardin.
The creative team of the Balconi official website uses the solution to add some spice to the fairly trivial design of the homepage. As you can see, the background has been split into two horizontal sections. The top part is set in motion. And its movements are so gentle and subtle that they add to the aesthetic – rather than make everything about themselves. The solution provides users with some unobtrusive focus anchors as well as keeps the theme alive (literally).
Lukas Jardin matches the tone of his creative personal portfolio with liquid-like behavior. Here it is applied to images placed in the hero area slider. The idea leaves a good first impression. It does not overwhelm nor annoy – it just makes things exciting.
The effect nicely cooperates with the rest of the website, adding a little more personality to the project. It is an excellent example of how to make a regular image-based carousel feel special and unique.
Of course, one of the areas where the liquid-like effect feels at home are designs with a water-inspired theme. Let’s explore Azure The Oceanic and Cobra Ultra Swipe.
The name of the first website speaks for itself. From the get-go, it becomes evident that the water theme runs the show here. And, without a skilfully reproduced liquid-like behavior, it will undoubtedly lose something. Much like in the case of Nature Elixir, here you are invited to participate in a small playground with a dynamic surface where you can leave ripples. Fun and engaging.
As for Cobra Ultra Swipe, even though the nameplate does not make the story behind the project clear at first, the hero area says it all. The website is dedicated to underwater goggles, so it comes as no surprise that the team has chosen water motifs. The liquid-like effect that can be seen in the hero area as well as throughout the entire website fits like a glove.
A Tidal Force
The magnetic power of this tiny trend lies in its origin. In essence, it is a skillfully imitated water behavior. And we all know, there are three things people can watch forever – and water is one of them.
The liquid-like effect is just destined to win over visitors’ hearts. And it certainly does that. Used in small doses it effortlessly contributes to the projects – making the user experience unforgettable.