You are all set to present your design, you have faith in your design work, and you spent hours on giving a final touch to the design presentation, and your client loved it. So, what happens after that?
Did you get that design project?
Maybe someone else presented the same idea, thought, or design but in a better way. Someone else had a better presentation than you, quality mockup, and other stuff and impressed the client.
Maybe, your work is good, but your idea of selling was not that great. The client is a human-being, impresses with good words and works, and convinces if something tangible and believable comes across. So, with the little guide, we would try to explain how to present your design to get more leads greatly.
You might want to take a look at the following related articles:
It is a good practice before presenting your design to a client, present the same design to your colleagues who are unaware of your project. Present your whole product design work to them and try to explain the benefits or solutions. Try to explain as you would do to your client and pen down different types of questions that come up.
Write questions that come up
Try to answer ones you can, and check the number of question what you can answer and what you cannot
Redesign your work or try to solve unanswered questions.
By following this method, you would be able to know the opinions from the other sides. The same way is followed by show business guys. When they make a movie, they show it to the people who are not linked to the movie. And answer the question of what did you like in that movie and what did not. They note all questions, and if something negative is coming about a particular scene or character, they try to recreate that scene.
Show your story
When a designer presents a design work, most of the time, a non-designer or a person who does not know how hard it is to come up with a final design, do not appreciate. They think it the easiest job of this project, just putting some good lines is not that difficult compare to laying foundation or putting bricks.
For example, if a client hires someone for building a house. He knows the entire process takes time; it is not an easy task to do. But the designer works goes sideline, and no one knows how hard it was to come up with that good solution with all features the client mentioned.
You spent some time days or weeks in isolation, but unfortunately, unlike building a house, car, laptop, mobile phone, your product fits on one sheet paper.
It would be ideal for showing your story, present your effort on different stages. It is recommended to take a snapshot with some lines on the stage of the project and difficulties you were facing at that time. From your first idea to the final design, show the hard work you have to go through to come up with the final stage of work.
By telling this story, the client will understand and appreciate the amount of hard work put into doing a project.
Create realistic mockups
The most important step, a crucial one is to display your design in the best light possible. Create realistic mockups; mockups will make your presentation more appealing.
If you are designing a website or working on an application, present it realistically. For a website, create a mockup of the website on a still image on your computer. Close all irreverent windows opened in your computer, and to avoid distraction, activate the full-screen mode.
The closer you get showing how the design will look in the real world, the higher your chances of getting the project accepted.
There are really no more excuses not to do it – all you need is Photoshop and some image manipulation skills. If you are designing a project and want to view your design for iPad, iPad Mockup can do the best for you.
The best thing about mockups is a smart object layer feature – all you need is to add your own design to the smart object and impress your customers with a professionally-looking, eye-catching mockup.
There are many great resources where you can find ready-made iPad and many other mockups. Be sure to find and use good design mockups in a conversation with the client, because they help not only present your work in your own unique style but also save a lot of time.
Show Read world examples
While displaying your design work, you should use real-world examples. You are a designer, many technical terms or words that seem so easy and understanding for you might not be easy to grasp for a non-technical or non-designer client. Your client might be clueless about what you are talking about.
So, rather using technical terms, make it easy for your client and use some real-world examples that are relatable and graspable. For instance, if the project is related to micro-interaction, you can give an example of Facebook. It will give the client a feeling of acceptance, and he will engage in your presentation more than before.
Follow User Experience:
User experience is one of the things that matter in every design. It sometimes even reshift the entire industry like the way Apple iPhone did in the previous decade. Their touchpad idea transitioned the smartphone world altogether.
You must add value to the user’s lives and think about it as its own project. Think that what would you like to have in that particular project or what can make this project stand out.
I want to narrate a simple story; I was working with an organization and given application development tasks. The task was simple, but I felt major loopholes in the previous design. The previous design was simple to develop, but I took it as my own project and mentioned those loopholes in the user experience. The company was more than happy with the design change, that simple user-experience change helped the company to deal with less workload than before.
And a few more words..
In my view, a good idea is all about presenting it in the best possible way. As per my experience, a good presentation can make you sell a bad product, not the other way round. Be confident and have faith in your idea; if you are losing faith in your idea, you might not be able to convince the client. If doubts are coming there in mind, clear them first, before going to meet the client.
No matter how you present your work, don’t use too much text, no one in this age reads too much text, at least clients would not be happy with reading too much content, other than that, this takes time to read too much content.
In the end, do not forget to ask the client to give true feedback. If a client needs some redesigning or something else, do it happily.
John is a storyteller with design and development skills. By day he designs and builds websites and mobile apps, by night he spins sci-fi stories at StoryLab … More about John
Rhea …
When someone reads a story, they have certain expectations about how that story will unfold whether they know how to articulate them or not. The same is true about users coming to our websites. We can pull principles from storytelling to help us meet and, hopefully, exceed those user expectations.
Whether it’s in a novel, the latest box office smash, or when Uncle Elmer mistook a potted cactus for a stress ball, we all love stories. There are stories we love, stories we hate, and stories we wish we’d never experienced. Most of the good stories share structure and principles that can help us create consistent website experiences. Experiences that speak to user expectations and guide them to engage with our sites in a way that benefits both of us.
In this article, we’ll pull out and discuss just a few examples of how thinking about your users’ stories can increase user engagement and satisfaction. We’ll look at deus ex machina, ensemble stories, consistency, and cognitive dissonance, all of which center on audience expectations and how your site is meeting those expectations or not.
We can define a story as the process of solving a problem. Heroes have an issue, and they set out on a quest to solve it. Sometimes that’s epic and expansive like the Lord of the Rings or Star Wars and sometimes it’s small and intimate such as Driving Miss Daisy or Rear Window. At its core, every story is about heroes who have a problem and what they do to solve it. So too are visits to a website.
The user is the hero, coming to your site because they have a problem. They need to buy a tchotchke, hire an agency or find the video game news they like. Your site can solve that problem and thus play an important role in the user’s story.
Deus Ex Machina
It’s a term meaning “god from the machine” that goes back to Greek plays — even though it’s Latin — when a large, movable scaffolding or “machine” would bring out an actor playing a god. In the context of story, it’s often used to describe something that comes out of nowhere to solve a problem. It’s like Zeus showing up at the end of a play and killing the villain. It’s not satisfying to the audience. They’ve watched the tension grow between the hero and the villain and feel cheated when Zeus releases the dramatic tension without solving that tension. They watched a journey that didn’t matter because the character they loved did not affect the ending.
The danger of deus ex machina is most visible in content marketing. You hook the audience with content that’s interesting and applicable but then bring your product/site/whatever in out of nowhere and drop the mic like you won a rap battle. The audience won’t believe your conclusion because you didn’t journey with them to find the solution.
If, however, the author integrates Zeus into the story from the beginning, Zeus will be part of the story and not a convenient plot device. Your solutions must honor the story that’s come before, the problem and the pain your users have experienced. You can then speak to how your product/site/whatever solves that problem and heals that pain.
State Farm recently launched a “Don’t Mess With My Discount!” campaign:
Kim comes in to talk to a State Farm rep who asks about a Drive Safe and Save discount. First, for the sake of the discount, Kim won’t speed up to make a meeting. Next, she makes herself and her child hold it till they can get home driving the speed limit. Last, in the midst of labor, she won’t let her partner speed up to get them to the hospital. (Don’t mess with a pregnant lady or her discount.) Lastly, it cuts back to Kim and the agent.
State Farm’s branding and their signature red color are strong presences in both bookend scenes with the State Farm representative. By the end, when they give you details about their “Drive Safe and Save” discount you know who State Farm is, how they can help you, and what you need to do to get the discount.
Throughout the ad, we know State Farm’s motivations and don’t feel duped into liking something whose only goal is to separate us from our money. They set the expectation of this story being an ad in the beginning and support that throughout.
Another Approach
Sometimes putting your name upfront in the piece might feel wrong or too self-serving. Another way to get at this is to acknowledge the user’s struggle, the pain the user or customer already feels. If your site doesn’t acknowledge that struggle, then your product/site/whatever seems detached from their reality, a deus ex machina. But if your content recognizes the struggle they’ve been through and how your site can solve their problem, the pitch for deeper engagement with your site will be a natural progression of the user’s story. It will be the answer they’ve been searching for all along.
Take this testimonial from Bizzabo:
Bizzabo solved a real world problem for Greenbook. (Large preview)
It shows the user where Greenbook was, i.e. mired in tedious tasks, and how Bizzabo helped them get past tedium to do what Greenbook says they do best: make memorable experiences. Bizzabo doesn’t come out of the woodwork to say “I’m awesome” or solve a problem you never had. They have someone attesting to how Bizzabo solved a real problem that this real customer needed to be fixed. If you’re in the market to solve that problem too, Bizzabo might be the place to look.
Ensemble Stories
Some experiences, like some stories, aren’t about a single person. They’re about multiple people. If the story doesn’t give enough attention to each member, that person won’t seem important or like a necessary part of the story. If that person has a role in the ending, we feel cheated or think it’s a deus ex machina event. If any character is left out of a story, it should change the story. It’s the same way with websites. The user is the story’s hero, but she’s rarely the only character. If we ignore the other characters, they won’t feel needed or be interested in our websites.
Sometimes a decision involves multiple people because a single user doesn’t have the authority to decide. For instance, Drupalcon Seattle 2019 has a “Convince Your Boss” page. They showcase the benefits of the conference and provide materials to help you get your boss to agree to send you.
You could also offer a friends-and-family discount that rewards both the sharer and the sharee. (Yes, as of this moment, “sharee” is now a word.) Dropbox does this with their sharing program. If you share their service with someone else and they create an account, you get additional storage space.
You get extra space, you get extra space, and you get extra space (when you invite a friend). (Large preview)
But you don’t have to be that explicit about targeting other audiences than the user themselves. In social networks and communities, the audience is both the user and their friends. The site won’t reach a critical mass if you don’t appeal to both. I believe Facebook beat MySpace early on by focusing on the connection between users and thus serving both the user and their friends. MySpace focused on individual expression. To put it another way, Facebook included the user’s friends in their audience while MySpace didn’t.
Serving Diametrically Opposed Heros
Many sites that run on ad revenue also have to think about multiple audiences, both the users they serve and the advertisers who want to reach those users. They are equally important in the story, even if their goals are sometimes at odds. If you push one of these audiences to the side, they’ll feel like they don’t matter. When all you care about is ad revenue, users will flee because you’re not speaking to their story any longer or giving them a good experience. If advertisers can’t get good access to the user then they won’t want to pay you for ads and revenue drops off.
Just about any small market newspaper website will show you what happens when you focus only on advertisers’ desires. Newspaper revenue streams have gone so low they have to push ads hard to stay alive. Take, for instance, the major newspaper from my home state of Delaware, the News Journal. The page skips and stutters as ad content loads. Click on any story and you’ll find a short article surrounded by block after block after block of ad content. Ads are paying the bills but with this kind of user experience, I fear it won’t be for long.
Let me be clear that advertisers and users do not have to be diametrically opposed, it’s just difficult to find a balance that pleases both. Sites often lean towards one or the other and risk tipping the scales too far either way. Including the desires of both audiences in your decisions will help you keep that precarious balance.
One way to do both is to have ads conform to the essence of your website, meaning the thing that makes your site different i.e. the “killer app” or sine qua non of your website. In this way, you get ads that conform to the reason the users are going to the site. Advertisers have to conform to the ad policy, but, if it really hits on the reason users are going to the site, advertisers should get much greater engagement.
On my own site, 8wordstories.com, ads are allowed, but they’re only allowed an image, eight words of copy, and a two-word call to action. Thus when users go to the site to get pithy stories, eight words in length, the advertisements will similarly be pithy and short.
The hero doesn’t train as a medieval knight for the first half of the story and then find herself in space for the second half. That drastic shift can make the audience turn on the story for dashing their expectations. They think you did a bait-and-switch, showing them the medieval story they wanted and then switching to a space story they didn’t want.
If you try to hook users with free pie, but you sell tubas, you will get lots of pie lovers and very few tuba lovers. Worse yet is to have the free pie contingent on buying a tuba. The thing they want comes with a commitment or price tag they don’t. This happens a lot with a free e-book when you have to create an account and fill out a lengthy form. For me, that price has often been too high.
Make sure the way you’re hooking the audience is consistent with what you want them to read, do, or buy. If you sell tubas offer a free tuba lesson or polishing cloth. This’ll ensure they want what you provide and they’ll think of you the next time they need to buy a tuba.
That said, it doesn’t mean you can’t offer free pie, but it shouldn’t get them in the door, it should push them over the edge.
Audible gives you a thirty-day free trial plus an audio book to keep even if you don’t stay past the trial. They’re giving you a taste of the product. When you say, “I want more.” You know where to get it.
While not offering a freebie, Dinnerly (and most of the other bazillion meal kit delivery companies) offers a big discount on your first few orders, encouraging new customers to try them out. This can be an especially good model for products or services that have fixed costs with enticing new customers.
Hmmm… maybe they should offer free pie. (Large preview)
Cognitive Dissonance
There’s another danger concerning consistency, but this one’s more subtle. If you’re reading a medieval story and the author says the “trebuchet launched a rock straight and true, like a spaceship into orbit.” It might be an appropriate allusion for a modern audience, but it’s anachronistic in a medieval story, a cognitive dissonance. Something doesn’t quite make sense or goes against what they know to be true. In the same way, websites that break the flow of their content can alienate their audience without even meaning to (such as statistics that seem unbelievable or are so specific anyone could achieve them).
112% of people reading this article are physically attractive.
(Here’s lookin’ at you, reader.)
This article is the number one choice by physicians in Ohio who drive Yugos.
(Among other questions, why would a European car driving, Ohioan Doctor read a web user experience article?)
These “statistics” break the flow of the website because they make the user stop and wonder about the website’s reputability. Any time a user is pulled out of the flow of a website, they must decide whether to continue with the website or go watch cat videos.
Recently, I reviewed proposals for a website build at my day job. The developers listed in the proposal gave me pause. One with the title “Lead Senior Developer” had seven years of experience. That seemed low for a “lead, senior” developer, but possible. The next guy was just a “web developer” but had twenty years of experience. Even if that’s all correct, their juxtaposition made them look ridiculous. That cognitive dissonance pulled me out of the flow of the proposal and made me question the firm’s abilities.
Similarly poor quality photos, pixelated graphics, unrelated images, tpyos, mispelllings, weird bolding and anything else that sticks out potato can cause cognitive dissonance and tank a proposal or website (or article). The more often you break the spell of the site, the harder it will be for clients/users to believe you/your product/site/thing are as good as you say. Those cat videos will win every time because they always meet the “lolz” expectation.
Conclusion
Users have many expectations when they come to your site. Placing your users in the context of a story helps you understand those expectations and their motivations. You’ll see what they want and expect, but also what they need. Once you know their needs, you can meet those needs. And, if you’ll pardon my sense of humor, you can both …live happily ever after.
Beautiful web fonts aren’t particularly difficult to find. A quick search
will undoubtedly turn up a number of attractive typefaces that
will complement your website’s look and messaging.
However, many of these fonts tend to have very specific use cases.
For instance, a wide font may be perfect for header text but would work
poorly in the body of your page. And certain decorative fonts are only appropriate for limited use–perhaps no more than a full-sized word or two within a design element.
With that in mind, we’d like to introduce you to a selection of the best web fonts that offer a bit more versatility. They go beyond standard looks,
yet are still able to be read at small sizes. Each one is available
with your subscription to Envato Elements, home to an ever-growing library of 2,500 web fonts and a whole lot more.
Envato Elements library of 2,500 web fonts and a whole lot more
First, let’s take a look at some areas where these fonts can
really shine. Then, we’ll cover the basics of how to implement them into your
website.
Small Fonts, Big Possibilities
A well-designed website is all about the details. And while it’s
often the big, over-the-top design elements that grab our immediate
attention, the little things certainly shouldn’t be forgotten. It’s here where
users are compelled to stick around for a while.
The fonts in this showcase can help in both the big stuff
(headlines, hero areas) and the not-so-big (buttons, blockquotes,
sub-headings). This is good news for designers, as it offers the
potential for more consistency in our projects.
That means, for example, you can add more stylish accents that
reflect your brand across various areas of a website. A fancy font
becomes something you are just as likely to use in your site’s footer
as it is in the header.
Of course, legibility is still of utmost importance. So, be sure to test your designs and make adjustments as necessary.
How to Use a Custom Web Font
You can implement a custom web font into your site with just a few
easy steps. But you’ll want to note that it does require a little bit of
CSS to get going.
First, you’ll want to make sure that any fonts you download include a
version specifically created for the web. Envato Elements makes this
process easy with handy filtering options on the sidebar. For instance,
finding all of the fonts that are designed for use at smaller sizes
and include a web version only takes a couple of clicks.
Now, on to the steps:
1. Find a font you like and download it to your device.
2. Unzip the font package you’ve downloaded (remember to look for
any web-specific fonts) and place the files into a folder within the
root directory of your website. In our case, we’ll just call it “fonts”.
3. Upload the fonts to your web server, maintaining the directory structure you just created above.
4. Next, add each font using the CSS @font-face property, like so:
@font-face {
font-family: 'Fiona Regular'; /* Change to your font's name. */
src: url('fonts/Fiona-Regular.woff'); /* Change to match your font file's location. */
}
5. From there, you can call your font anywhere within your site’s
CSS file. For example, if you’d like to use it with your H1 tag, you
might add something like this:
h1 {
font-family: 'Fiona Regular'; /* Change to your font's name. */
}
If you run into any problems, use your browser’s inspection tools to verify that the font is installed correctly.
Download These Versatile Web Fonts
We’ve covered the what, why and how. Now, it’s time to discover some
fonts! Here’s a unique selection you can use to enhance your web
projects. And since we’re focusing on smaller sizes, we’ll also sprinkle
in some ideas as to where each may work best.
Fiona offers up a classic, elegant style that can be used just about
anywhere. It would be a perfect fit for sub-headlines within
content or even a sidebar.
This selection is actually a package of two separate-but-related
fonts: Mille and Fleur. Mille is a traditional, easy-to-read bold font
while Fleur brings some uniquely-styled letterforms. Put them together
and you have a great combination for headings and subheadings.
Numhead offers a techno-industrial look in three weights (light,
regular and bold). Each one is crystal-clear, giving you the freedom to
use the font all over. You might even consider utilizing it in short
passages of body text that you want to emphasize.
Talk about versatile, Bw Modelica Condensed is built to be utilized
virtually everywhere. The font comes in four widths, each with eight
weight variants. It’s everything you need to mix and match with
headlines, logos and even body text.
While handwritten fonts are very popular these days, they can also
be difficult to read. That’s not the case with Borderland, as each
letterform is clear and legible. This one has the potential to be used
for all manner of design accents.
With a detailed, vintage look, Riley will provide your project a
touch of class. And the unique style of its punctuation lends itself
to being used for quotes and other standout elements.
Little Hearts is a fun, casual typeface that is perfect for sites
focused on crafts or kids. The included glyphs bring it to a whole new
level, with playful illustrations that can be used to decorate areas big
and small.
This art-deco slab font is reminiscent of those used in the early
20th century. The ligatures are incredibly detailed, and the package
also includes a set of alternates. Still, it might be most effective on
short bits of text like sub-headlines or call-to-action buttons.
An ultra-modern, square typeface, Manurewah offers both a
sophisticated and futuristic look. And, the use of capital and lowercase
letters also allows for some distinctive combinations. You might use
an all-caps look for large, single-word titles, with mixed-case text
used for better legibility on lengthier passages.
Featuring a sharp, clean look, Rodian Serif is a great choice for
attracting attention. You’ll find two styles and multiple font weights.
Of particular interest is the stencil variant. It stands out as very
unique, yet it also maintains legibility. Use it anywhere that you need
to add an extra bit of personality.
Rodian Serif
Small or Mighty
Unique fonts that can stand up to use at both larger and
smaller sizes are rare. Quite often, you’re limited to utilizing
a more decorative font on the former, while settling for something a
bit more ordinary on the latter.
However, our collection of the best web fonts for the job which we’ve shown here remove much of this compromise. While
each font may have its own specific limitations, each one also has a wider
range of potential uses. This opens up the door to a whole new world
of design possibilities.
Feel free to experiment with the fonts above and see how they can dress up your website!
One of our focuses at Viget is to always be good consultants—even when it means pushing boundaries, challenging our clients to think critically about how they talk about themselves, or breaking the status quo with cutting-edge design and technology.
We always have a common goal with our clients: to make the best end product possible. We want to get there with a shared understanding, process, and enthusiasm about the work.
This context is always helpful to lay out at the beginning of any new engagement. But it also lets our clients know they’re in this with us—and that there are certain expectations that come with being a client. With this article, organizations on the receiving end of work like ours can learn concrete ways to help keep a project moving forward.
Appoint a client-side Project Manager.
While consultants are tasked with handling the work, there will certainly be times when we’ll need to get feedback on a deliverable, get a download of some organizational structure or industry, learn about a client’s product, and more.
Likewise, we always like to review budget, timeline, and tasks to keep our clients abreast of what’s happening on their project at any given time. All this means we need streamlined communication.
It’s most efficient to channel everything through one person on the client side. We recommend up to eight hours per week over the course of the project—sometimes it can be more, and sometimes less. This works best when that time is set aside as an actual commitment—it gets everyone in a regular and predictable cadence and will prevent your staff from experiencing project burnout.
Deliver batched feedback.
The best client contacts are skilled wranglers of batched feedback. We’ve experienced both sides of this coin—a single collated list from one person, and a smattering of thoughts collected from executives and other departments that often contradict one another, copied and pasted into multiple emails. The former is much more productive. Then we don’t have to spend a client’s budget combing through a list of line items that don’t add up, make sense, or convey different messages, and then have the back and forth needed to resolve them.
If there’s one person we’re communicating with, they’ll also have a good idea of the decisions we’ve made along the way, and why we’ve made them. That will help them filter out irrelevant requests or spark internal discussions that can be beneficial.
Along these lines, it’s also very helpful when a client provides feedback that is:
Thoughtful
Specific
Actionable
Rationalized
Timely
Candid
Goal-oriented
Supported with alternatives
Vetted
This is a lot to ask for, but the closer we all can adhere to this model, the more efficiently the project can move without sacrificing quality.
Get your stakeholders involved in key decisions.
More often than not, the executives who approved the budget or key decision makers for the company will need to weigh in. It’s crucial to identify these people early on, which is something we can do collaboratively, and get them in the room during strategic milestones.
This mostly falls under a client’s domain, but we are eager to support those conversations. We can assist by sending out an early agenda, conveying the importance of the subject matter, and impressing upon stakeholders how ignoring big milestone decisions throughout the project can have implications for budget and timeline down the road.
The repercussions of not getting the right stakeholders involved are significant. It’s important to take early steps to avoid it. Internally, agencies should work to figure out those milestone dates. And on the client side, do whatever you can to loop the right people in, and don’t be afraid to ask us for help. (We can always record a meeting or take diligent notes as a last resort, but this removes the opportunity for stakeholders to interact.)
Timeliness is key.
At the start of a project, you’ll more than likely see a wonderfully laid out timeline with phases, key milestones, and review dates. Sometimes, this falls apart as we go through the project. As one thing gets delayed, it causes another to get delayed, and so on. These timelines inevitably turn into living documents.
That said, there is a tendency near the beginning of projects to feel more comfortable letting things slip because the end of the project may feel far away. One of our jobs as consultants is to get as hyper-specific as we can plotting milestones out across a calendar, which means it doesn’t matter when something slips, just if it does.
We do everything we can to stick to schedules, so it’s important that clients try to do the same. If things start to slide, we’ll encounter blockers, may have to pause work, or be forced to make decisions that may impact work down the road. These feedback loops should be established and agreed upon before feedback actually needs to start happening—that way, everyone knows what to expect when we move into that phase together.
Help us prioritize.
If there are strict time or budget constraints for a project, it’s fair to think of software development in terms of trade-offs—a rapid development cycle often means starting with an off-the-shelf solution; comprehensive documentation means a less polished product; adding a new feature may require sacrificing an old one. The examples are numerous, but it’s best not to think about this kind of work in a silo.
The concept in its barest form is simple: there is only a certain amount of time that can be spent, so adding more things adds more time (and therefore, budget). We can use our best judgement for prioritizing one feature, artifact, or design over another, but decisions like these are best made in conjunction with a client. They will know better than anyone what is most important to them.
Ask questions.
Our clients’ levels of familiarity with digital work varies. Sometimes, explaining how to interpret a wireframe is a waste of time—sometimes, it’s a totally new concept and worthwhile exercise.
A client should feel empowered to ask questions about anything and everything that doesn’t make sense to them. Questions make the work better. Specific inquiries about how we landed on a certain design pattern, why we chose one tool over another, or why an interaction is prototyped a certain way can help facilitate critical thinking across both teams. Don’t be afraid to ask questions about our decisions—and certainly if what something means isn’t immediately clear.
We do the same on our side. As a Project Manager, I’m often reviewing designs or feature sets before they are presented to a client. It’s my job to interpret these with an outsider’s perspective as well. This sometimes airs requirements we may have not accounted for, helps uncover bugs, and gives the creators an opportunity to hear how their work is interpreted from someone who hasn’t been thinking about it as much (which is usually more representative of what the end user’s perspective will be).
Tell us when you don’t feel comfortable.
We’re going to extend a client’s comfort zone. There will be times when they’ll be pushed, hesitant, or surprised. That’s good.
What’s not good is when they feel uncomfortable about the state of the work, the budget, the timeline, or overall project health. We want to know that as soon as possible so we can course correct together.
Let’s be forthright about scope.
The word “scope” can make people cringe. It’s often a nebulous term used to encompass an individual perspective upon what fits within a project. The reason it’s nebulous and individual is because it’s impossible to fully define all work that will happen to get a software project across the finish line, and one person’s opinion on what goes into that may be vastly different than another’s. Unexpected items will come up.
However, there should be enough clarity established throughout the sales process to create a shared understanding of what we’re all working towards. With this idea as a guidepost, we can have productive discussions about what work can fit within budget, and what can’t. If budget can flex, scope can grow. If it can’t, we’ll have to think in terms of trade-offs. Our best clients understand this, and want to work together to find solutions.
I mentioned at the beginning of this article that we always try to be good consultants. A big part of that means setting expectations, both for what clients can expect to see from us throughout the project, and what we’re looking for from them. They’re both equally important.
If I had to condense this article into one takeaway, it’d be this: the more aware clients are of how big an impact they can have on process and the end product, the better everything will turn out.
Stay engaged, be transparent, and work hard—and we’ll do the same.
This is not an article about “Should designers code?” neither about designer titles nor about what UI/UX stands for. However, there is a problem out there with so many titles and misconceptions. They create tension, making everything even more complex especially for people who are not involved in the production process. At the end, of course, it all goes to one pool.
What type of knowledge should production-oriented designers possess in order to be a vital part of every product team?
The first step of every project would be to learn the frameworks and technologies that are used. This is a good stepping stone for you as a Product-oriented designer, so you know how and where to focus your skillset. Frameworks are one of the best things that ever happened to designers. I don’t believe that being constrained by a framework, ruins your creative or design process. It is way more challenging and interesting when you have the constraints, you have to find your way with and around them, in order to come up with a solution. This is the real production design here. The end result is so rewarding, knowing you connected all the dots.
I got triggered to share some insights around design and “The Great Wall of Development”, because of what Brad Frost shared around alerts in his recent blog post. I will share examples around how we handled some alert changes. We used this libraryreact-notification-system. Due to the fact that most of the developers are Javascript oriented and this is a common and normal thing, the usability and functionalities of that important feature were left aside. It was working and everything was fine, but there were a couple of problems:
Not prominent enough
Not handling all user scenarios
Not in the current styles of the application
Those types of examples are perfect for backing up that statement about frameworks, libraries, using technology to communicate better with the development team and creating a meaningful and well functioning interface. You can stand your ground and make it to the top of the wall. You will be able to see what the other land holds. That Holy development land?.
Stand your ground and rise ⚔️
So for that specific case of alerts, I will share some insights about how the design team took up that challenge and improved it.
Start by reading carefully the whole documentation, so many handy things are hidden behind the words of the well-written Github repo.
Read about the properties
Learn about the structure and functionality of your library. That way you will know how it was built and what purpose it should serve.
Read about styling
Test it to see what and how it works. You can jump straight up with the DevTools.
The fear of the designer to read documentations is true, but everyone should handle those situations with passion and also have the courage to ask. The developers helped me set up an environment, so I can actually have full control over the alert library and see what it is capable of. That’s how we found out that there is more behind the alerts, more functionalities that can help usability and create a better experience of our application.
We found more about the flexibility of delays and prominent messaging.
An actual scenario can be:
If a user creates a request and should be educated where to look when the request is handled and ready to be used, he should go to a different page outside the current one. We put the autoDismiss property to 0 and added a link which redirects to the page where the pending requests live. This way we make all the focus to the alert and educate where the user can find specific things across the application.
The styling of every library is held in a CSS file. In the case of react-notification-system it was in a styles.js. It is even part of the documentation that we just reviewed.
Once we find that, we can start experimenting both inside the browser (via Inspect elements from the DevTools panel) and in the text editor. That way we can come to a conclusion what are the best styles and features for the cases we are trying to solve.
Sorry for the bad quality, but you can easily see what can quickly be achieved.
Proper visual communication and balance of the composition are stepping stones for well-executed user experience ?.
Once all the styles are overridden or added they should live in the styles.js in your version of the library. By committing the styles you can easily hand over to the developer responsible for that feature to review and continue working on it. This is such an organic way for a designer to get involved in the production and actually make interface decisions, which most of the time are left to be done by him either way.
Now designers have the chance to make a real difference on how the interface looks like and behaves. Meeting the business goals, creating a consistent experience and handling cases with care to details while having a real architecture in mind. Not everything is Dribbble material and this would be the best way for you to understand that. I always appreciate articles like Responsive deliverables, so they can remind me how simple and yet complex the design discipline can be in the terms of Interface creation.
The top of the Dribbble homepage is a header, nav with unordered lists and wrappers of ordered lists for the posts.
I like the term Front-End Developer. It’s encapsulates the nature of your job if your concerns are:
Building UIs for web browsers
The spectrum of devices and platforms those web browsers run on
The people who use those web browsers and related assistive technology
The breadth of knowledge for all-things front-end development has gotten super deep. I’ve found that front-end developers that have stretched themselves to the point they are thinking of themselves as full-stack developers more and more. I think that’s kinda cool and empowering, but it doesn’t mean that everyone needs to go that wide.
Brad Frost referred to sides of the spectrum as “back of the front” and “front of the front.” I once drew the line, in The Great Divide, as heavy JavaScript vs. not. These distinctions aren’t to divide people, but to acknowledge the spectrum and that there are people all over it.
In a new article called “Frontend Design, React, and a Bridge over the Great Divide,” Brad makes the point that the role of “Front-End Designer” exists on the spectrum right smack in the middle between design and development, where “development” refers to the back-end or deeper JavaScript stuff.
The jobs?
Crafting semantic HTML markup
Creating CSS code
Authoring JavaScript that primarily manipulates objects in the DOM
Testing across browsers and devices
Optimizing the performance of front-end code
Working with designers
Working with back-end and application developers
That sounds like the “traditional” explanation of a front-end developer to me — if there is such a thing — but it makes sense to rename that role since front-end development is the term that got so wide.
Brad adds these responsibilties to the list:
Create a library of presentational UI components
Author and document a robust, intuitive component API for each presentational component
Determine how flexible or rigid the component library should be
Maintain the presentational components as a product
That’s where I think this metaphor comes in:
Me, Brad and a slew of you out there are front-end developers. We work in browsers and we care about the users and where and how they interact with those browsers. We do the things on Brad’s first list like craft HTML and CSS, work with designs and do testing. We share that common trunk of skills on the tree above.
But Brad is more of a systems designer than I am. His dot lands somewhere differently on that tree. I don’t know if I’m particularly skilled at anything, but my dot definitely falls elsewhere on that tree. Perhaps on an entirely different branch, as I quite like working with JavaScript tooling and logic and APIs and such. The bulk of Brad’s article is about React and finding a place in the realm of front-end development where the job isn’t ignoring React, but working with it in such a way that doesn’t mean every other aspect of development doesn’t have to come along for the ride.
