Bringing A Better Design Process To Your Organization

Original Source: https://www.smashingmagazine.com/2019/08/better-design-process-organization/

Bringing A Better Design Process To Your Organization

Bringing A Better Design Process To Your Organization

Eric Olive

2019-08-21T13:30:59+02:00
2019-08-22T17:06:41+00:00

As user experience (UX) designers and researchers, the most common complaint we hear from users is:

“Why don’t they think about what I need?”

In fact, many organizations have teams dedicated to delivering what users and customers need. More and more software developers are eager to work with UX designers in order to code interfaces that customers will use and understand. The problem is that complex software projects can easily become bogged down in competing priorities and confusion about what to do next.

The result is poor design that impedes productivity. For example, efficiency in healthcare is hampered by electronic medical records (EMRs). Complaints about these software systems are legion. Dr. Steven Ugent, a Boston-based dermatologist and Yale Medical School alumnus, is no exception.

Since 2010, Dr. Ugent has used two EMR systems: Before 2010, he finished work promptly at 5:15 every day. Since he and his colleagues started using EMRs, he typically works an extra half hour to 1.5 hours in the evening. “I don’t know any doctor who is happy with their medical records system. The crazy thing is that I was much more efficient when I was using pen and paper.”

man holding pen on paper

The EMR systems are clunky, inflexible, and hard to customize. Ugent, for instance, cannot embed photos directly into his chart notes. Instead, he must open the folder with the photo of the mole and then open a different folder to see the text. This setup is particularly cumbersome for dermatologists who rely heavily on photos when treating patients.

Ugent succinctly summarizes the problem with EMRs:

“The people who design it [the EMR system] don’t understand my workflow. If they did, they would design a different system.”

Doctors are not alone in their frustration with clunky software. Consumers and professionals around the world make similar complaints:

“Why can’t I find what I need?”

“Why do they make it so hard?”

“Why do I have to create a login when I simply want to buy this product. I’m giving them money. Isn’t that enough?”

A major contributor to clunky software is flawed design processes. In this article, we’ll outline four design process problems and explain how to address them.

Complexity
Next-Release Syndrome
Insufficient Time For Design Iterations
Surrendering Control To Outside Vendors

1. Complexity

Scale, multiple stakeholders, and the need for sophisticated code are among the many factors contributing to the complexity of large software projects.

Sometimes overlooked, however, are complex laws and regulations. For example, insurance is heavily regulated at the state level, adding a layer of complexity for insurance companies operating in multiple states. Banks and credit unions are subject to regulation while utilities must comply with state and federal environmental laws.

Healthcare products and software subject to FDA regulations offer an even greater challenge. The problem isn’t that the regulations are unreasonable. Safety is paramount. The issues are time, budget, and the planning necessary to meet FDA requirements.

As Jeff Horvath, Ph.D., a UX consultant with extensive experience in healthcare, explains: “These requirements add a couple of orders of magnitude to the rigor for writing test protocols, test setup, data gathering, analysis, quality controls, and getting approval to conduct the research in the first place.” For example, a single round of usability testing jumps from six weeks (a reasonable time frame for a standard usability test) to six months. And that’s with a single round of usability testing. Often, two or more rounds of testing are necessary.

This level of rigor is a wakeup call for companies new to working with the FDA. More than once, Horvath has faced tough conversations with clients who were unprepared for the extended timelines and additional budget necessary to meet FDA requirements. It’s hard, but necessary. “It pays to be thorough,” says Horvath. In 2018 the FDA approved a mere 11% of pre-market submissions.

The demands on researchers, designers, and developers are higher for healthcare software requiring FDA compliance than for traditional software products. For example:

A UX researcher can only conduct one or two usability test sessions per day as opposed to the more common five to six sessions per day for standard software.
UX designers must remain hyper-attentive to every aspect of the user’s interaction with software. Even one confusing interaction could cause a clinician to make an error that could jeopardize a patient’s health. For the same reason, UI designers must draw interfaces that remain faithful to every interaction.
A longer time frame for design and usability testing means that the developer’s coding efforts must be planned carefully. Skilled and well-intentioned developers are often eager to modify the code as soon as new information becomes available. While this approach can work in organizations well practiced in rapid iteration, it carries risk when designing and coding complex systems.

Failure to manage complexity can have fatal consequences as happened when Danielle McCray was admitted to Tallahassee Memorial Hospital as she was about to give birth. To ease her discomfort, healthcare workers connected her to a patient-controlled analgesia machine, a programmable infusion pump.

Eight hours later McCray was pronounced dead from a morphine overdose. A major factor in this tragedy was the flawed design of the infusion pump used to administer medication. The pump required 27 programming steps. Failure to address such complexity by designing a more intuitive user interface contributed to unnecessary death.

Solution

The solution is to acknowledge and address complexity This point sounds logical. Yet, as explained above, complicated FDA regulations often surprise company leaders. Denial doesn’t work. Failing to plan means your organization will likely fall into the 89% of pre-market submissions the FDA rejected in 2018.

When conducting usability tests, user experience researchers must take three steps to manage the complexity associated with FDA regulations:

The moderator (the person who runs the usability test) must be hyper-attentive. For example, if an MRI scan requires a technician to follow a strict sequence of steps while using the associated software, the moderator must observe carefully to determine if the participant follows the instructions to the letter. If not, the task is rated as a failure meaning that both the interface design and associated documentation will require modification;
The moderator must also track close calls. For example, a participant might initially perform the steps out of order, discover the mistake, and recover by following the proper sequence. The FDA considers this a near miss, and the moderator must report it as such;
The moderator must also assess the participant’s knowledge. Does she believe that she has followed the proper sequence? Is this belief accurate?

2. Next-Release Syndrome

One factor in the failure to acknowledge complexity is a fix-it-later mindset we call next-release syndrome. Software bugs are not a problem because “we’ll fix that in the next release.” The emphasis on speed over quality and safety makes it all too easy to postpone solving the hard problems.

Anyone involved in product design and development must tackle next-release syndrome. Two examples make the point:

We discovered serious design flaws with a client’s healthcare tracking software. The company chose to release the software without addressing these problems. Not surprisingly, customers were unhappy.
We conducted usability tests for a large credit union based in the U.S. The participants were seasoned financial advisers. Testing revealed serious design flaws including confusing status icons, buttons with an unclear purpose, and a nearly hidden link that prevented participants from displaying important data. Remember, if the user doesn’t see it, it’s not there. When we reported the findings, the response was: “We’ll fix that in the next release.” As expected, the web application was not well received. Responses from users included: “Why did you ask us to review the app if you had no intention of making changes?”

Solution: Reject The Fix-It-Next-Time Mentality

The solution is to address serious design problems now. Sounds straightforward. But, how do you convince decision-makers to change the entrenched “fix-it-later” mindset?

The key is to shift the conversation about achievement away from product delivery toward the value created. For example, teams that take the time to revise a design based on user research are likely to see better customer reactions and, over time, increased customer loyalty.

Strengthen the case by using quantitative data to show decision-makers the direct connection between user research and increased revenue and a positive customer experience.

Use data to connect research and design improvements to specific business goals

Use data to connect research and design improvements to specific business goals (Large preview)

Re-defining value is, in effect, a process improvement because it establishes a new set of priorities that better serve customers and your company’s long-term interests. As McKinsey reports in The Business Value of Design: “Top-quartile companies embrace the full user experience; they break down internal barriers among physical, digital, and service design.”

3. Insufficient Time For Design Iterations

Related to the next-release syndrome is insufficient time to iterate the design based on research findings or changing business requirements. “We don’t have time for that,” is the common refrain from developers and product owners. Designers working in Agile environments are frequently pressured to avoid “holding up” the development team.

Development speeds along, and the software is released. We’ve all seen the results from confusing phone apps, to clunky medical records software, to the cumbersome user interface for financial advisers referenced above.

Solution: Design Spikes

One solution comes from the coding world. In his article “Fitting Big-Picture UX Into Agile Development”, Damon Dimmick offers the idea of design spikes, “bubbles of time that allow designers to focus on complex UX issues.” They fit into the Scrum framework by temporarily taking the place of a regular sprint.

Design iteration

Design iteration (Large preview)

Design spikes offer several advantages:

They allow UX teams to focus on holistic issues and avoid getting bogged down in granular design issues that are sometimes emphasized within a single sprint;
They offer the opportunity to explore complex UX questions from a high level. If needed, the UX design team can also engage in design-centric thinking at any point in order to solve larger UX challenges;
By adopting design spikes, UX teams can leverage the same flexibility that development teams use in the agile process and devote the time needed to focus on design issues that don’t always fit well into a standard scrum sprint;
Development unlikely to be affected by design decisions can proceed.

Naturally, design iterations often affect certain parts of the code for a site, app, or software product. For this reason, during design spikes any code that will likely be affected by the design spike cannot move forward. But, as Dimmick clearly states, this “delay” will likely save time by avoiding re-work. It simply does not make sense to write code now and then re-write it a few weeks later after the team has agreed on a revised design. In short, postponing some coding actually saves time and budget.

4. Relying Too Heavily On Vendors

Addressing complexity, resisting next-release syndrome, and allowing time for iteration are essential to an effective design process. For many firms, another consideration is their relationship with software vendors. These vendors play an important, even critical, role in development. Yet, granting them too much leverage makes it difficult to control your own product.

Outsourcing to software vendors

Outsourcing to software vendors (Large preview)

Certainly, we should treat colleagues and vendors with respect and make reasonable requests. That doesn’t mean, however, that it’s necessary to surrender all leverage as happened during my tenure at a large finance firm.

While working at this firm as a UX designer, I frequently encountered this dynamic:

Manager: “Hey, Eric can you evaluate this claims software that we’re planning to buy? We just want to make sure it works as intended.”

Me: “Sure, I’ll send you my preliminary findings by the end of the week.”

Manager: “Great”

The following week:

Manager: “Thanks for the review. I see that you found three serious issues: Hard to find the number for an existing claim, screens with too much text that are hard to read, and the difficulty of returning to a previous screen when processing a new claim. That is concerning. Do you think those issues will hinder productivity?”

Me: “Yes, I think these issues will increase stress and processing time in the Claims Center. I’m quite concerned because my previous work with Janet’s team demonstrated that the Claims Center reps are already highly stressed.”

Manager: “Really good to know. I just sent the check. I’ll ask the vendor to fix the problems before they ship.”

Me (screaming inside): “Noooooooooooooo!”

This well-intentioned manager did precisely the wrong thing. He asked for changes after sending the check. No surprise that the vendor never made the requested changes. Why would they? They had their money.

Not only did this scenario play out repeatedly at that company, but I’ve witnessed it throughout my UX career.

Solution

The solution is clear. If the vendor product does not meet customer and business needs, and the changes you request are within scope, don’t pay until the vendor makes the changes. It really is that simple.

Conclusion

In this piece, we’ve identified four common barriers to quality design and corresponding solutions:

Complex regulations and standards
The solution is to acknowledge and address complexity by devising realistic timelines and sufficient budget for research and iterative design.
Shipping software with bugs with a promise to fix them later
The solution is to avoid next-release syndrome and address serious problems now. Persuade decision-makers by re-defining the meaning of value within your organization.
Insufficient time for design iterations
The solution is to include design spikes in the agile development process. These bubbles of time temporarily take the place of a sprint and allow designers to focus on complex UX issues.
Relying too heavily on vendors
The solution is to retain leverage by withholding final payment until the vendor makes requested changes as long as these changes are within the original project scope.

The fourth solution is straightforward. While the first three are not easy, they are concrete because they can be applied directly to existing design processes. Their implementation does not require a massive reorganization or millions of dollars. It simply requires commitment to delivering a better experience.

Smashing Editorial
(ah, il)

Testing Made Easier Via Framework Minimalism And Software Architecture

Original Source: https://www.smashingmagazine.com/2019/08/testing-framework-minimalism-software-architecture/

Testing Made Easier Via Framework Minimalism And Software Architecture

Testing Made Easier Via Framework Minimalism And Software Architecture

Ryan Kay

2019-08-22T13:00:59+02:00
2019-08-22T16:35:57+00:00

Like many other Android developers, my initial foray into testing on the platform lead me to be immediately confronted with a demoralizing degree of jargon. Further, what few examples I came across at the time (circa 2015) did not present practical use cases which may have inclined me to think that the cost to benefit ratio of learning a tool like Espresso in order to verify that a TextView.setText(…) was working properly, was a reasonable investment.

To make matters even worse, I did not have a working understanding of software architecture in theory or practice, which meant that even if I bothered to learn these frameworks, I would have been writing tests for monolithic applications comprised of a few god classes, written in spaghetti code. The punchline is that building, testing, and maintaining such applications is an exercise in self-sabotage quite regardless of your framework expertise; yet this realization only becomes clear after one has built a modular, loosely-coupled, and highly-cohesive application.

From here we arrive at one of the main points of discussion in this article, which I will summarize in plain language here: Among the primary benefits of applying the golden principles of software architecture (do not worry, I will discuss them with simple examples and language), is that your code can become easier to test. There are other benefits to applying such principles, but the relationship between software architecture and testing is the focus of this article.

However, for the sake of those who wish to understand why and how we test our code, we will first explore the concept of testing by analogy; without requiring you to memorize any jargon. Before getting deeper into the primary topic, we will also look at the question of why so many testing frameworks exist, for in examining this we may begin to see their benefits, limitations, and perhaps even an alternative solution.

Testing: Why And How

This section will not be new information for any seasoned tester, but perhaps you may enjoy this analogy nonetheless. Of course I am a software engineer, not a rocket engineer, but for a moment I will borrow an analogy which relates to designing and building objects both in physical space, and in the memory space of a computer. It turns out that while the medium changes, the process is in principle quite the same.

Suppose for a moment that we are rocket engineers, and our job is to build the first stage* rocket booster of a space shuttle. Suppose as well, that we have come up with a serviceable design for the first stage to begin building and testing in various conditions.

“First stage” refers to boosters which are fired when the rocket is first launched

Before we get to the process, I would like to point out why I prefer this analogy: You should not have any difficulty answering the question of why we are bothering to test our design before putting it in situations where human lives are at stake. While I will not try to convince you that testing your applications before launch could save lives (although it is possible depending on the nature of the application), it could save ratings, reviews, and your job. In the broadest sense, testing is the way in which we make sure that single parts, several components, and whole systems work before we employ them in situations where it is critically important for them to not fail.

Returning to the how aspect of this analogy, I will introduce the process by which engineers go about testing a particular design: redundancy. Redundancy is simple in principle: Build copies of the component to be tested to the same design specification as what you wish to use at launch time. Test these copies in an isolated environment which strictly controls for preconditions and variables. While this does not guarantee that the rocket booster will work properly when integrated in the whole shuttle, one can be certain that if it does not work in a controlled environment, it will be very unlikely to work at all.

Suppose that of the hundreds, or perhaps thousands of variables which the copies of the rocket design have been tested against, it comes down to ambient temperatures in which the rocket booster will be test fired. Upon testing at 35° Celsius, we see that everything functions without error. Again, the rocket is tested at roughly room temperature without failure. The final test will be at the lowest recorded temperature for the launch site, at -5° Celcius. During this final test, the rocket fires, but after a short period, the rocket flares up and shortly thereafter explodes violently; but fortunately in a controlled and safe environment.

At this point, we know that changes in temperature appear to be at least involved in the failed test, which leads us to consider what parts of the rocket booster may be adversely effected by cold temperatures. Over time, it is discovered that one key component, a rubber O-ring which serves to staunch the flow of fuel from one compartment to another, becomes rigid and ineffectual when exposed to temperatures approaching or below freezing.

It is possible that you have noticed that his analogy is loosely based on the tragic events of the Challenger space shuttle disaster. For those unfamiliar, the sad truth (insofar as investigations concluded) is that there were plenty of failed tests and warnings from the engineers, and yet administrative and political concerns spurred the launch to proceed regardless. In any case, whether or not you have memorized the term redundancy, my hope is that you have grasped the fundamental process for testing parts of any kind of system.

Concerning Software

Whereas the prior analogy explained the fundamental process for testing rockets (while taking plenty of liberty with the finer details), I will now summarize in a manner which is likely more relevant to you and I. While it is possible to test software by only launching it to devices once it is in any sort of deployable state, I suppose instead that we can apply the principle of redundancy to the individual parts of the application first.

This means that we create copies of the smaller parts of the whole application (commonly referred to as Units of software), set up an isolated test environment, and see how they behave based on whatever variables, arguments, events, and responses which may occur at runtime. Testing is truly as simple as that in theory, but the key to even getting to this process lies in building applications which are feasibly testable. This comes down to two concerns which we will look at in the next two sections. The first concern has to do with the test environment, and the second concern has to do with the way in which we structure applications.

Why Do We Need Frameworks?

In order to test a piece of software (henceforth referred to as a Unit, although this definition is deliberately an over-simplification), it is necessary to have some kind of testing environment which allows you to interact with your software at runtime. For those building applications to be executed purely on a JVM (Java Virtual Machine) environment, all that is required to write tests is a JRE (Java Runtime Environment). Take for example this very simple Calculator class:

class Calculator {
private int add(int a, int b){
return a + b;
}

private int subtract(int a, int b){
return a – b;
}
}

In absence of any frameworks, as long as we have a test class which contains a mainfunction to actually execute our code, we can test it. As you may recall, the main function denotes the starting point of execution for a simple Java program. As for what we are testing for, we simply feed some test data into the Calculator’s functions and verify that it is performing basic arithmetic properly:

public class Main {

public static void main(String[] args){
//create a copy of the Unit to be tested
Calculator calc = new Calculator();
//create test conditions to verify behaviour
int addTest = calc.add(2, 2);
int subtractTest = calc.subtract(2, 2);

//verify behaviour by assertion
if (addTest == 4) System.out.println(“addTest has passed.”);
else System.out.println(“addTest has failed.”);

if (subtractTest == 0) System.out.println(“subtractTest has passed.”);
else System.out.println(“subtractTest has failed.”);
}
}

Testing an Android application is of course, a completely different procedure. Although there is a main function buried deep within the source of the ZygoteInit.java file (the finer details of which are not important here), which is invoked prior to an Android application being launched on the JVM, even a junior Android developer ought to know that the system itself is responsible for calling this function; not the developer. Instead, the entry points for Android applications happen to be the Application class, and any Activity classes which the system can be pointed to via the AndroidManifest.xml file.

All of this is just a lead up to the fact that testing Units in an Android application presents a greater level of complexity, strictly because our testing environment must now account for the Android platform.

Taming The Problem Of Tight Coupling

Tight coupling is a term which describes a function, class, or application module which is dependent on particular platforms, frameworks, languages, and libraries. It is a relative term, meaning that our Calculator.java example is tightly coupled to the Java programming language and standard library, but that is the extent of its coupling. Along the same lines, the problem of testing classes which are tightly coupled to the Android platform, is that you must find a way to work with or around the platform.

For classes tightly coupled to the Android platform, you have two options. The first, is to simply deploy your classes to an Android device (physical or virtual). While I do suggest that you test deploy your application code before shipping it to production, this is a highly inefficient approach during the early and middle stages of the development process with respect to time.

A Unit, however technical a definition you prefer, is generally thought of as a single function in a class (although some expand the definition to include subsequent helper functions which are called internally by the initial single function call). Either way, Units are meant to be small; building, compiling, and deploying an entire application to test a single Unit is to miss the point of testing in isolation entirely.

Another solution to the problem of tight coupling, is to use testing frameworks to interact with, or mock (simulate) platform dependencies. Frameworks such as Espresso and Robolectric give developers far more effective means for testing Units than the previous approach; the former being useful for tests run on a device (known as “instrumented tests” because apparently calling them device tests was not ambiguous enough) and the latter being capable of mocking the Android framework locally on a JVM.

Before I proceed to railing against such frameworks instead of the alternative I will discuss shortly, I want to be clear that I do not mean to imply that you should never use these options. The process which a developer uses to build and test their applications should be born of a combination of personal preference and an eye for efficiency.

For those who are not fond of building modular and loosely coupled applications, you will have no choice but to become familiar with these frameworks if you wish to have an adequate level of test coverage. Many wonderful applications have been built this way, and I am not infrequently accused of making my applications too modular and abstract. Whether you take my approach or decide to lean heavily on frameworks, I salute you for putting in the time and effort to test your applications.

Keep Your Frameworks At Arms Length

For the final preamble to the core lesson of this article, it is worth discussing why you might want to have an attitude of minimalism when it comes to using frameworks (and this applies to more than just testing frameworks). The subtitle above is a paraphrase from the magnanimous teacher of software best practices: Robert “Uncle Bob” C. Martin. Of the many gems he has given me since I first studied his works, this one took several years of direct experience to grasp.

Insofar As I understand what this statement is about, the cost of using frameworks is in the time investment required to learn and maintain them. Some of them change quite frequently and some of them do not change frequently enough. Functions become deprecated, frameworks cease to be maintained, and every 6-24 months a new framework arrives to supplant the last. Therefore, if you can find a solution which can be implemented as a platform or language feature (which tend to last much longer), it will tend to be more resistant to changes of the various types mentioned above.

On a more technical note, frameworks such as Espresso and to a lesser degree Robolectric, can never run as efficiently as simple JUnit tests, or even the framework free test from earlier on. While JUnit is indeed a framework, it is tightly coupled to the JVM, which tends to change at a much slower rate than the Android platform proper. Fewer frameworks almost invariably means code which is more efficient in terms of the time it takes to execute and write one or more tests.

From this, you can probably gather that we will now be discussing an approach which will leverage some techniques which allows us to keep the Android platform at arms length; all the while allowing us plenty of code coverage, test efficiency, and the opportunity to still use a framework here or there when the need arises.

The Art Of Architecture

To use a silly analogy, one might think of frameworks and platforms as being like overbearing colleagues who will take over your development process unless you set appropriate boundaries with them. The golden principles of software architecture can give you the general concepts and specific techniques necessary to both create and enforce these boundaries. As we will see in a moment, if you have ever wondered what the benefits of applying software architecture principles in your code truly are, some directly, and many indirectly make your code easier to test.

Separation Of Concerns

Separation Of Concerns is by my estimation the most universally applicable and useful concept in software architecture as a whole (without meaning to say that others should be neglected). Separation of concerns (SOC) can be applied, or completely ignored, across every perspective of software development I am aware of. To briefly summarize the concept, we will look at SOC when applied to classes, but be aware that SOC can be applied to functions through extensive usage of helper functions, and it can be extrapolated to entire modules of an application (“modules” used in the context of Android/Gradle).

If you have spent much time at all researching software architectural patterns for GUI applications, you will likely have come across at least one of: Model-View-Controller (MVC), Model-View-Presenter (MVP), or Model-View-ViewModel (MVVM). Having built applications in every style, I will say upfront that I do not consider any of them to be the single best option for all projects (or even features within a single project). Ironically, the pattern which the Android team presented some years ago as their recommended approach, MVVM, appears to be the least testable in absence of Android specific testing frameworks (assuming you wish to use the Android platform’s ViewModel classes, which I am admittedly a fan of).

In any case, the specifics of these patterns are less important than their generalities. All of these patterns are just different flavours of SOC which emphasize a fundamental separation of three kinds of code which I refer to as: Data, User Interface, Logic.

So, how exactly does separating Data, User Interface, and Logic help you to test your applications? The answer is that by pulling logic out of classes which must deal with platform/framework dependencies into classes which possess little or no platform/framework dependencies, testing becomes easy and framework minimal. To be clear, I am generally talking about classes which must render the user interface, store data in a SQL table, or connect to a remote server. To demonstrate how this works, let us look at a simplified three layer architecture of a hypothetical Android application.

The first class will manage our user interface. To keep things simple, I have used an Activity for this purpose, but I typically opt for Fragments instead as user interface classes. In either case, both classes present similar tight coupling to the Android platform:

public class CalculatorUserInterface extends Activity implements CalculatorContract.IUserInterface {

private TextView display;
private CalculatorContract.IControlLogic controlLogic;
private final String INVALID_MESSAGE = “Invalid Expression.”;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

controlLogic = new DependencyProvider().provideControlLogic(this);

display = findViewById(R.id.textViewDisplay);
Button evaluate = findViewById(R.id.buttonEvaluate);
evaluate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
controlLogic.handleInput(‘=’);
}
});
//..bindings for the rest of the calculator buttons
}

@Override
public void updateDisplay(String displayText) {
display.setText(displayText);
}

@Override
public String getDisplay() {
return display.getText().toString();
}

@Override
public void showError() {
Toast.makeText(this, INVALID_MESSAGE, Toast.LENGTH_LONG).show();
}
}

As you can see, the Activity has two jobs: First, since it is the entry point of a given feature of an Android application, it acts as a sort of container for the other components of the feature. In simple terms, a container can be thought of as a sort of root class which the other components are ultimately tethered to via references (or private member fields in this case). It also inflates, binds references, and adds listeners to the XML layout (the user interface).

Testing Control Logic

Rather than having the Activity possess a reference to a concrete class in the back end, we have it talk to an interface of type CalculatorContract.IControlLogic. We will discuss why this is an interface in the next section. For now, just understand that whatever is on the other side of that interface is supposed to be something like a Presenter or Controller. Since this class will be controlling interactions between the front-end Activity and the back-end Calculator, I have chosen to call it CalculatorControlLogic:

public class CalculatorControlLogic implements CalculatorContract.IControlLogic {

private CalculatorContract.IUserInterface ui;
private CalculatorContract.IComputationLogic comp;

public CalculatorControlLogic(CalculatorContract.IUserInterface ui, CalculatorContract.IComputationLogic comp) {
this.ui = ui;
this.comp = comp;
}

@Override
public void handleInput(char inputChar) {
switch (inputChar){
case ‘=’:
evaluateExpression();
break;
//…handle other input events
}
}
private void evaluateExpression() {
Optional result = comp.computeResult(ui.getDisplay());

if (result.isPresent()) ui.updateDisplay(result.get());
else ui.showError();
}
}

There are many subtle things about the way in which this class is designed that make it easier to test. Firstly, all of its references are either from the Java standard library, or interfaces which are defined within the application. This means that testing this class without any frameworks is an absolute breeze, and it could be done locally on a JVM. Another small but useful tip is that all of the different interactions of this class can be called via a single generic handleInput(…) function. This provides a single entry point to test every behaviour of this class.

Also note that in the evaluateExpression() function, I am returning a class of type Optional<String> from the back end. Normally I would use what functional programmers call an Either Monad, or as I prefer to call it, a Result Wrapper. Whatever stupid name you use, it is an object which is capable of representing multiple different states through a single function call. Optional is a simpler construct which can represent either a null, or some value of the supplied generic type. In any case, since the back end might be given an invalid expression, we want to give the ControlLogicclass some means of determining the result of the backend operation; accounting for both success and failure. In this case, null will represent a failure.

Below is an example test class which has been written using JUnit, and a class which in testing jargon is called a Fake:

public class CalculatorControlLogicTest {

@Test
public void validExpressionTest() {

CalculatorContract.IComputationLogic comp = new FakeComputationLogic();
CalculatorContract.IUserInterface ui = new FakeUserInterface();
CalculatorControlLogic controller = new CalculatorControlLogic(ui, comp);

controller.handleInput(‘=’);

assertTrue(((FakeUserInterface) ui).displayUpdateCalled);
assertTrue(((FakeUserInterface) ui).displayValueFinal.equals(“10.0”));
assertTrue(((FakeComputationLogic) comp).computeResultCalled);

}

@Test
public void invalidExpressionTest() {

CalculatorContract.IComputationLogic comp = new FakeComputationLogic();
((FakeComputationLogic) comp).returnEmpty = true;
CalculatorContract.IUserInterface ui = new FakeUserInterface();
((FakeUserInterface) ui).displayValueInitial = “+7+7”;
CalculatorControlLogic controller = new CalculatorControlLogic(ui, comp);

controller.handleInput(‘=’);

assertTrue(((FakeUserInterface) ui).showErrorCalled);
assertTrue(((FakeComputationLogic) comp).computeResultCalled);

}

private class FakeUserInterface implements CalculatorContract.IUserInterface{
boolean displayUpdateCalled = false;
boolean showErrorCalled = false;
String displayValueInitial = “5+5”;
String displayValueFinal = “”;

@Override
public void updateDisplay(String displayText) {
displayUpdateCalled = true;
displayValueFinal = displayText;
}

@Override
public String getDisplay() {
return displayValueInitial;
}

@Override
public void showError() {
showErrorCalled = true;
}
}

private class FakeComputationLogic implements CalculatorContract.IComputationLogic{
boolean computeResultCalled = false;
boolean returnEmpty = false;

@Override
public Optional computeResult(String expression) {
computeResultCalled = true;
if (returnEmpty) return Optional.empty();
else return Optional.of(“10.0”);
}
}
}

As you can see, not only can this test suite be executed very rapidly, but it did not take very much time at all to write. In any case, we will now look at some more subtle things which made writing this test class very easy.

The Power Of Abstraction And Dependency Inversion

There are two other important concepts which have been applied to CalculatorControlLogic which have made it trivially easy to test. Firstly, if you have ever wondered what the benefits of using Interfaces and Abstract Classes (collectively referred to as abstractions) in Java are, the code above is a direct demonstration. Since the class to be tested references abstractions instead of concrete classes, we were able to create Fake test doubles for the user interface and back end from within our test class. As long as these test doubles implement the appropriate interfaces, CalculatorControlLogiccould not care less that they are not the real thing.

Secondly, CalculatorControlLogichas been given its dependencies via the constructor (yes, that is a form of Dependency Injection), instead of creating its own dependencies. Therefore, it does not need to be re-written when used in a production or testing environment, which is a bonus for efficiency.

Dependency Injection is a form of Inversion Of Control, which is a tricky concept to define in plain language. Whether you use Dependency Injection or a Service Locator Pattern, they both achieve what Martin Fowler (my favourite teacher on such topics) describes as “the principle of separating configuration from use.” This results in classes which are easier to test, and easier to build in isolation from one another.

Testing Computation Logic

Finally, we come to the ComputationLogic class, which is supposed to approximate an IO device such as an adapter to a remote server, or a local database. Since we need neither of those for a simple calculator, it will just be responsible for encapsulating the logic required to validate and evaluate the expressions we give it:

public class CalculatorComputationLogic implements CalculatorContract.IComputationLogic {

private final char ADD = ‘+’;
private final char SUBTRACT = ‘-‘;
private final char MULTIPLY = ‘*’;
private final char DIVIDE = ‘/’;

@Override
public Optional computeResult(String expression) {
if (hasOperator(expression)) return attemptEvaluation(expression);
else return Optional.empty();

}

private Optional attemptEvaluation(String expression) {
String delimiter = getOperator(expression);
Binomial b = buildBinomial(expression, delimiter);
return evaluateBinomial(b);
}

private Optional evaluateBinomial(Binomial b) {
String result;
switch (b.getOperatorChar()) {
case ADD:
result = Double.toString(b.firstTerm + b.secondTerm);
break;
case SUBTRACT:
result = Double.toString(b.firstTerm – b.secondTerm);
break;
case MULTIPLY:
result = Double.toString(b.firstTerm * b.secondTerm);
break;
case DIVIDE:
result = Double.toString(b.firstTerm / b.secondTerm);
break;
default:
return Optional.empty();
}
return Optional.of(result);
}

private Binomial buildBinomial(String expression, String delimiter) {
String[] operands = expression.split(delimiter);
return new Binomial(
delimiter,
Double.parseDouble(operands[0]),
Double.parseDouble(operands[1])
);
}

private String getOperator(String expression) {
for (char c : expression.toCharArray()) {
if (c == ADD || c == SUBTRACT || c == MULTIPLY || c == DIVIDE)
return “\” + c;
}

//default
return “+”;
}

private boolean hasOperator(String expression) {
for (char c : expression.toCharArray()) {
if (c == ADD || c == SUBTRACT || c == MULTIPLY || c == DIVIDE) return true;
}
return false;
}

private class Binomial {
String operator;
double firstTerm;
double secondTerm;

Binomial(String operator, double firstTerm, double secondTerm) {
this.operator = operator;
this.firstTerm = firstTerm;
this.secondTerm = secondTerm;
}

char getOperatorChar(){
return operator.charAt(operator.length() – 1);
}
}

}

There is not too much to say about this class since typically there would be some tight coupling to a particular back-end library which would present similar problems as a class tightly coupled to Android. In a moment we will discuss what to do about such classes, but this one is so easy to test that we may as well have a try:

public class CalculatorComputationLogicTest {

private CalculatorComputationLogic comp = new CalculatorComputationLogic();

@Test
public void additionTest() {
String EXPRESSION = “5+5”;
String ANSWER = “10.0”;

Optional result = comp.computeResult(EXPRESSION);

assertTrue(result.isPresent());
assertEquals(result.get(), ANSWER);
}

@Test
public void subtractTest() {
String EXPRESSION = “5-5”;
String ANSWER = “0.0”;

Optional result = comp.computeResult(EXPRESSION);

assertTrue(result.isPresent());
assertEquals(result.get(), ANSWER);
}

@Test
public void multiplyTest() {
String EXPRESSION = “5*5”;
String ANSWER = “25.0”;

Optional result = comp.computeResult(EXPRESSION);

assertTrue(result.isPresent());
assertEquals(result.get(), ANSWER);
}

@Test
public void divideTest() {
String EXPRESSION = “5/5”;
String ANSWER = “1.0”;

Optional result = comp.computeResult(EXPRESSION);

assertTrue(result.isPresent());
assertEquals(result.get(), ANSWER);
}

@Test
public void invalidTest() {
String EXPRESSION = “Potato”;

Optional result = comp.computeResult(EXPRESSION);

assertTrue(!result.isPresent());
}
}

The easiest classes to test, are those which are simply given some value or object, and are expected to return a result without the necessity of calling some external dependencies. In any case, there comes a point where no matter how much software architecture wizardry you apply, you will still need to worry about classes which cannot be decoupled from platforms and frameworks. Fortunately, there is still a way we can employ software architecture to: At worst make these classes easier to test, and at best, so trivially simple that testing can be done at a glance.

Humble Objects And Passive Views

The above two names refer to a pattern in which an object that must talk to low-level dependencies, is simplified so much that it arguably does not need to be tested. I was first introduced to this pattern via Martin Fowler’s blog on variations of Model-View-Presenter. Later on, through Robert C. Martin’s works, I was introduced to the idea of treating certain classes as Humble Objects, which implies that this pattern does not need to be limited to user interface classes (although I do not mean to say that Fowler ever implied such a limitation).

Whatever you choose to call this pattern, it is delightfully simple to understand, and in some sense I believe it is actually just the result of rigorously applying SOC to your classes. While this pattern applies also to back end classes, we will use our user interface class to demonstrate this principle in action. The separation is very simple: Classes which interact with platform and framework dependencies, do not think for themselves (hence the monikers Humble and Passive). When an event occurs, the only thing they do is forward the details of this event to whatever logic class happens to be listening:

//from CalculatorActivity’s onCreate() function:
evaluate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
controlLogic.handleInput(‘=’);
}
});

The logic class, which should be trivially easy to test, is then responsible for controlling the user interface in a very fine-grained manner. Rather than calling a single generic updateUserInterface(…) function on the user interface class and leaving it to do the work of a bulk update, the user interface (or other such class) will possess small and specific functions which should be easy to name and implement:

//Interface functions of CalculatorActivity:
@Override
public void updateDisplay(String displayText) {
display.setText(displayText);
}

@Override
public String getDisplay() {
return display.getText().toString();
}

@Override
public void showError() {
Toast.makeText(this, INVALID_MESSAGE, Toast.LENGTH_LONG).show();
}
//…

In principal, these two examples ought to give you enough to understand how to go about implementing this pattern. The object which possesses the logic is loosely coupled, and the object which is tightly coupled to pesky dependencies becomes almost devoid of logic.

Now, at the start of this subsection, I made the statement that these classes become arguably unnecessary to test, and it is important we look at both sides of this argument. In an absolute sense, it is impossible to achieve 100% test coverage by employing this pattern, unless you still write tests for such humble/passive classes. It is also worth noting that my decision to use a Calculator as an example App, means that I cannot escape having a gigantic mass of findViewById(…) calls present in the Activity. Giant masses of repetitive code are a common cause of typing errors, and in the absence of some Android UI testing frameworks, my only recourse for testing would be via deploying the feature to a device and manually testing each interaction. Ouch.

It is at this point that I will humbly say that I do not know if 100% code coverage is absolutely necessary. I do not know many developers who strive for absolute test coverage in production code, and I have never done so myself. One day I might, but I will reserve my opinions on this matter until I have the reference experiences to back them up. In any case, I would argue that applying this pattern will still ultimately make it simpler and easier to test tightly coupled classes; if for no reason other than they become simpler to write.

Another objection to this approach, was raised by a fellow programmer when I described this approach in another context. The objection was that the logic class (whether it be a Controller, Presenter, or even a ViewModel depending on how you use it), becomes a God class.

While I do not agree with that sentiment, I do agree that the end result of applying this pattern is that your Logic classes become larger than if you left more decisions up to your user interface class.

This has never been an issue for me as I treat each feature of my applications as self-contained components, as opposed to having one giant controller for managing multiple user interface screens. In any case, I think this argument holds reasonably true if you fail to apply SOC to your front end or back end components. Therefore, my advice is to apply SOC to your front end and back end components quite rigorously.

Further Considerations

After all of this discussion on applying the principles of software architecture to reduce the necessity of using a wide-array of testing frameworks, improve the testability of classes in general, and a pattern which allows classes to be tested indirectly (at least to some degree), I am not actually here to tell you to stop using your preferred frameworks.

For those curious, I often use a library to generate mock classes for my Unit tests (for Java I prefer Mockito, but these days I mostly write Kotlin and prefer Mockk in that language), and JUnit is a framework which I use quite invariably. Since all of these options are coupled to languages as opposed to the Android platform, I can use them quite interchangeably across mobile and web application development. From time to time (if project requirements demand it), I will even use tools like Robolectric, MockWebServer, and in my five years of studying Android, I did begrudgingly use Espresso once.

My hope is that in reading this article, anyone who has experienced a similar degree of aversion to testing due to paralysis by jargon analysis, will come to see that getting started with testing really can be simple and framework minimal.

Further Reading on SmashingMag:

Sliding In And Out Of Vue.js
Designing And Building A Progressive Web Application Without A Framework
CSS Frameworks Or CSS Grid: What Should I Use For My Project?
Using Google’s Flutter For Truly Cross-Platform Mobile Development

Smashing Editorial
(dm, il)

Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/pTAMn4qU4vk/moment-dropping-37mm-cinema-filters-your-phone-no-lens-needed

Moment dropping a 37mm Cinema Filters for your phone, no lens needed.
Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

AoiroStudioAug 22, 2019

Moment is easily one of my favorite brands out there, we have witnessed their early beginnings to this uplifting brand always making awesome new products and involving the community right to its core. If you don’t know what Moment is and love mobile photography and filmmaking, check them out now. We are featuring today their new 37mm cinema filters for your phone, to polarize light, leaving you with a better image that you can’t replicate post-production. I might get this one for my collection.

Mobile Filmmaking

37mm Cine Phone Filter Complete Set

Moment dropping a 37mm Cinema Filters for your phone, no lens needed. Moment dropping a 37mm Cinema Filters for your phone, no lens needed. Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

Java Compact Shoulder Bag

Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

Java Mini Hip Pack

Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

Groove Compact Shoulder Bag

Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

Groove Deluxe Hip Pack

Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

Midnight Compact Shoulder Bag

Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

Midnight Basic Hip Pack

Moment dropping a 37mm Cinema Filters for your phone, no lens needed.

Shop on Moment


Proven Strategies for Building Creative Websites That Get Results

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/5mPu2dbCXok/

Good news, not so good news, fabulous news, and a bonus.

The global market is getting bigger and bigger. That’s good news.

Clients, meanwhile, are getting more selective and demanding in their drive to share their messages with the world through the use of highly creative websites – that may not be such good news if it means a heavy dose of arduous work for you.

The fabulous news? Be Theme’s size and versatility make it the perfect web design tool for meeting the challenges brought on by the need to design creative, eye-catching websites that will pass muster with the most selective and eagle-eyed client. This is your opportunity to cash in by showing these clients what you can do for them.

The bonus is 5 simple steps to create a website your client will love and a website that converts.

5 Steps to Building Amazingly Creative Websites
Step 1: Choose a Mesmerizing Color Palette

There are 3 simple rules you need to follow when choosing your color palette.

It needs to immediately attract attention;
It needs to be on brand, and;
It needs to be compatible with and supportive of your messages;

Artist’s BOLD color touches immediately attract attention.

Artist WordPress Theme

This Be Theme pre-built website offers an excellent example of an attractive, eye-catching color palette.

BeCreative WordPress Theme

Carbon8, with its shades of green and contrasting colors perfectly aligns the color palette with the brand to produce a visually remarkable website.

Carbon8 WordPress Theme

The BeInsurance color palette is crisp, yet subtle; just the right combination of factors to reinforce a message and attract more clients.

BeInsurance WordPress Theme

The BeFestival color palette is a perfect example of an approach you can take to appeal to a larger audience.

BeFestival WordPress Theme

Step 2: Display Crystal-Clear Pictures

Presenting crystal clear images should be a no brainer. It’s the best way to let people know precisely what your business offers; as opposed to artsy, somewhat out of focus images that keep them guessing.

Flair and clarity always triumph over mystery and ambiguity when it comes to marketing a product – or a service for that matter.

BeStylist makes excellent use of both flair and clarity in its images. Color schemes are easier to figure out when images are sharp.

BeStylist WordPress Theme

See if you can come up with a website design similar to RansomLTD.  This website was built from scratch to display sharp, pixel-perfect digital images.  Check this one out against what’s currently out there.

RansomLTD WordPress Theme

Or, you can go with a more conventional website like Zajno.

Zajno WordPress Theme

The Design Shop offers a no-nonsense approach to displaying your products with flair, dignity, and creativity. Compelling and crisp would be a good summary description.

The Design Shop WordPress Theme

Step 3: Show Visitors How Your Creativity Benefits Them

Showing people what’s in it for them is always a powerful marketing tactic, and one way to do that is to help them imagine themselves as being actual customers.

BeMarketing’s video on the homepage shows visitors how they can expect to benefit from using your product.

BeMarketing WordPress Theme

Lane, on the other hand, expresses a structural design perspective with its example of flexibility and functionality in workplace design.

Lane WordPress Theme

BeSimple demonstrates the power of a minimalist view; attractive, yet to the point.

BeSimple WordPress Theme

If you’re a travel blogger this one’s for you. BeTravelBlogger’s graphics layout makes it a travel blogger’s dream.

BeTravelBlogger WordPress Theme

Step 4: (Over)Use “White” Space in Even in Creative Websites

“Overusing” white space is actually difficult to do. After all, it’s the #1 visual element found in many, if not most, successful websites. Don’t be hesitant about using it to highlight your creativity.

Makespace has a clean design that makes it oh-so-easy for the eye to focus on what’s most important.

Makespace WordPress Theme

You can accomplish the same with either BeSketch or The Drive New York (or both). White space is used in these two websites to enhance the overall visual experience in addition to highlighting the page’s key elements.

BeSketch WordPress Theme

The Drive New York WordPress Theme

BeIceCream might well be THE most extreme example of effective use of white space. Its use definitely supports the brand while effectively driving the message home.

BeIceCream WordPress Theme

Step 5: Make Your CTAs Grab Visitors by the Eyeballs

If a CTA button doesn’t command immediate attention, why use one at all? Why not just let the visitor try to figure out what to do next?

Not a good idea. You want big, bold, bright buttons that are impossible to ignore, buttons that compel visitors to click.

Look at BeDrawing. It has a CTA button that clearly stands out. It’s centered nicely right below the sub-headline, where it acts like a welcoming invitation to step forward.

BeDrawing WordPress Theme

Stuart has the same idea; two CTA buttons, with the main one at the bottom.

Stuart WordPress Theme

Here’s a great example of having the CTA match other elements on the page. Even though BeKids uses blue to match other blue elements, the CTA button still stands out.

BeKids WordPress Theme

Surefire Ways to Build Creative Websites

These 5 surefire tactics will take you a long way in your quest to building eye-catching websites that will convert. You should find the examples helpful in selecting your color combinations, positioning key elements, understanding the power of the generous use (or overuse) of white space, designing and placing CTA buttons that practically demand to be clicked, and of course showing your visitors, through your creativity, how they will benefit.

You’ll find the web’s most comprehensive and visually impressive gallery of fully-functional, professionally-designed creative websites on Be Theme. There are currently more than 450, and counting, pre-built websites to choose from and customize to your needs and to your liking.


Compilation of 45 Web Tools to Try in 2019 (If You Haven’t Already)

Original Source: https://www.hongkiat.com/blog/45-web-tools-for-designers-developers-2019/

The internet is crowded, literally, with tens of thousands of web tools. Every moment a new web tool or service is launched, even as we speak. How are you selecting the ones that are the best fit for…

Visit hongkiat.com for full content.

What’s the Best Way to Share Your Work Online?

Original Source: https://www.webdesignerdepot.com/2019/08/whats-the-best-way-to-share-your-work-online/

Thankfully, you no longer have to rely on a resume to try to communicate how talented you are to others.

Your skills as a freelancer should be shared with others through visual media. It makes a lot more sense than writing up a one page summary that says, “I graduated from so-and-so university in 2010 and worked as a designer for XYZ Agency for three years.” Yes, your history is important, but not as much as what you’re able to do with the knowledge and skills acquired over that time period.

Whether you’re a web designer, graphic designer, web developer, photographer, or another type of digital creative, there’s a lot of value in being able to show off your work online.

However, with all of the different ways there are to share your work and expertise, which channels will guarantee a return? And is that all that should matter when sharing your work online?

The Pros and Cons of Sharing Your Work

While there are dozens of places that make it easy for designers and developers to share their work, as well as other samples they’ve created, many of them won’t be worth your time. It could be because the audience reach isn’t ideal, because they make you pay to share your work, or because it requires too much effort to pitch your idea or work in the first place.

If you want to share your work and get something out of it (which you really should), these are the channels you should focus on:

1. Your Website

First and foremost, your work needs to be published to your website. That’s non-negotiable. However, you should be selective of what you show and how you show it. You should also consider what format you want to share your work and expertise because you have a lot more flexibility with a website.

For example, this is the Work page for Semiqolon:

It’s not just a block of client logos that show off who this agency has worked for nor is it a lifeless case studies page with screenshots of websites they’ve designed. These are in-depth, well-written case studies that show their process and results.

Another place to show off your expertise is your blog:

This is where you take the knowledge you’ve acquired and turn it into actionable references for anyone looking to leverage your expertise. This is less about promoting your work and more about promoting your knowledge.

Pros

You have 100% control over what you share;
There are no distractions from competitors;
Professionally written and designed content provide no-nonsense proof to prospects that you can do what you promise.

Cons

It takes time to create case studies and blog posts;
You have to optimize for search and actively share with others if you want people to see it;
Because writing is a heavy component, what you write needs to be done well.

2. Social Media

You can do a lot of things on social media. However, there’s no universal use case that applies to all social media channels.

For instance, LinkedIn is a good place to share authoritative content and make professional connections. But it’s probably not the best place to share photos of your work.

On the other hand, a platform like Instagram would be perfect for that. Web developer Andriy Haydash (@the_web_expert) has a great example of how to do this:

First, he uses his bio to succinctly explain what he does as a web developer and shows people to his website.

Next, his feed is full of development samples:

The trouble a lot of designers and developers run into is that they merge the personal with the professional. But how many prospective clients are going to want to see you running around the beach with your kids or dog? If you’ve pointed them towards Instagram as a professional reference, then the expectation is that you’ll show your work there.

So, when sharing your samples on social media, choose platforms that are geared towards visuals (e.g. Instagram and Pinterest). Then, make sure you create a channel specifically dedicated to your brand.

Pros

Social media is free and easy to use;
It requires significantly less work to publish samples of your work than other channels do.

Cons

Many people just use social media to make connections. Not to have someone’s work pushed in their face.
You can build a reputation by sharing high-quality content, but no more than 20% of those promotions should be your own on certain platforms.

3. Codepad

Unlike a code-sharing/storage platform like Github which is mainly a place to collaborate, Codepad enables developers to create client-friendly demos. If you’re in the business of designing custom features and functionality, and you don’t mind sharing your code with other developers, this is a good place to do so.

What’s more, you can use Codepad to create extensive collections of demos as Avan C. has done here:

This gives you the chance to show off what you’re good at without having to create extensive case studies for your website. It also allows you to add value to the web development community by sharing code snippets they can use.

Pros

Share your custom-made snippets and demos for other developers to use and repurpose;
Create a collection of demos you can show to clients to demonstrate your vision without having to waste your time building something they don’t understand or want.

Cons

Clients probably aren’t looking for you on Codepad or might be too intimidated to enter a website where developers share code;
You can’t share snippets or demos from client work you’ve done, so this means publishing stuff you’ve created in your spare time (if you have any).

4. Behance

If you’re looking for an external website to show off your portfolio of work, Behance is a fantastic choice.

Just keep in mind that it’s not enough to create high-quality graphics of your project. If you want people to find your work and explore it, you have to properly optimize your project with a description, tools used, and tags.

Here’s an example of a project Navid Fard contributed to:

There’s a lot of engagement with this project: 9,609 views, 1,024 likes, 56 comments.

This aspect of Behance is great for allowing your work to become a source of inspiration for other designers and developers. But there’s another benefit to using Behance:

Personal profiles on Behance show off various projects you’ve contributed to, how much love the Behance community has shown the work, and also provides people with the ability to follow and get in touch.

Pros

Gives you a place to share client work as well as stuff you’ve done on your own, so you can show off a wider, bolder range of content if you want;
Engagement rates are readily available, so you can see how many people viewed your project, liked it, and commented on it;
You have a shareable to send to clients you want to work with or employers you want to work for.

Cons

Need to get client permission before you share their intellectual property here;
Have to do some work to optimize each project in order for people to find it;
Your projects have to compete for attention against similar-looking work.

So, Is It a Good Idea to Share Your Work?

Yes! It’s a great idea to share your work online.

However, it’s important to manage your expectations. The channels above — while great places to share samples — can take awhile to get you in front of a sizable and worthwhile audience. Especially if you’re competing side-by-side against similar looking creations.

You also need to be very careful with copyright and security. Sharing clients’ work online is fine if they’ve given you permission to do so. If you’re sharing work you’ve done in your free time, that’s risky as well, but more so because of the possibility of theft.

But there are pluses and minuses to everything you do in marketing your business. And sharing your work can really help you gain exposure, establish credibility, and more effectively sell your services.

 

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Pitching Your Writing To Publications

Original Source: https://www.smashingmagazine.com/2019/08/pitching-writing-publications/

Pitching Your Writing To Publications

Pitching Your Writing To Publications

Rachel Andrew

2019-08-19T14:00:59+02:00
2019-08-20T11:35:37+00:00

Recently, I had a chat with Chris Coyier and Dave Rupert over on the Shoptalk Podcast about writing for publications such as Smashing Magazine and CSS-Tricks. One of the things we talked about was submitting ideas to publications — something that can feel quite daunting even as an experienced writer.

In this article, I’m going to go through the process for pitching, heavily based on my own experience as a writer and as Editor in Chief of Smashing. However, I’ve also taken a look at the guidelines for other publications in order to help you find the right places to pitch your article ideas.

Do Your Research

Read existing articles on the site that you would like to write for. Who do they seem to be aimed at? What tone of voice do the writers take? Does the publication tend to publish news pieces, opinion, or how-to tutorials? Check to see if there are already other pieces which are on the same subject as your idea, i.e. will your piece add to the conversation already started by those articles? If you can show that you are aware of existing content on a particular subject, and explain how you will reference it or add to that information, the editor will know you have done some research.

Research more widely; are there already good pieces on the subject that an editor will consider your piece to be a repeat of? There is always space for a new take on an issue, but in general, publications want fresh material. You should be ready to explain how your piece will reference this earlier work and build upon it, or introduce the subject to a new audience.

A good example from our own archives is the piece, “Replacing jQuery With Vue.js”. There are a lot of introductions to Vue.js, however, this piece was squarely aimed at the web developer who knows jQuery. It introduced the subject in a familiar way specifically for the target audience.

Find The Submission Guide

The next thing to do is to find the submission information on the site you want to write for. Most publications will have information about who to contact and what information to include. From my point of view, simply following that information and demonstrating you have done some research puts you pretty high up the queue to be taken seriously. At Smashing Magazine, we have a link to the guide to writing for us right there on the contact form. I’d estimate that only 20% of people read and follow those instructions.

Screenshot of the Smashing Contact FormThe link to our submission guide on our Contact Us page.

When you submit your idea, it is up to you to sell it to the publication. Why should I run with your idea over the many others that will show up today? Spending time over your submissions will make a huge difference in how many pieces you have accepted.

Different publications have different requirements. At Smashing Magazine, we ask you to send an outline first, along with some information about you so that we can understand your expertise in the subject matter. We’re very keen to feature new voices, and so we’ll accept pieces from writers who haven’t got a huge string of writing credentials.

The information we request helps us to decide if you are likely to be able to deliver a coherent piece. As our articles are technical in nature (often tutorials), I find that an outline is the best way to quickly see the shape of the proposal and the scope it will cover. A good outline will include the main headings or sections of the article, along with an explanation of what will be taught in that section.

For many other publications, a common request is for you to send a pitch for the article. This would typically be a couple of paragraphs explaining the direction your piece will take. Once again, check the submission guide for any specific details that publication is interested to see.

The Verge has an excellent submission guide which explains exactly what they want to see in a pitch:

“A good pitch contains a story, a narrative backbone. Pitches should clearly and concisely convey the story you plan to write and why it matters. The best pitches display promising pre-reporting and deep knowledge of the topic as well as a sense of the angle or insight you plan to pursue. If your story depends on access to a person or company, you should say whether you have obtained it already (and if not, what your prospects are). Pitches should also be written in the style you expect to write the story.”

— “How To Pitch The Verge,” The Verge

A List Apart explains what they will accept in their contribution page:

“… a rough draft, a partial draft, or a short pitch (a paragraph or two summarizing your argument and why it matters to our readers) paired with an outline. The more complete your submission is, the better feedback we can give you.”

— “Write For Us,” A List Apart

The Slate has a list of Do’s and Don’ts for pitching:

“Do distill your idea into a pitch, even if you have a full draft already written. If you happen to have a draft ready, feel free to attach it, but please make sure you still include a full pitch describing the piece in the body of the email.”

— “How To Pitch Slate,” The Slate

Including your pitch or outline in the body of the email is a common theme of pitch guidelines. Remember that your aim is to make it as easy as possible for the editor to think, “that looks interesting”.

Include A Short Biography

The editor doesn’t need your life story, however, a couple of sentences about you is helpful. This is especially useful if you are a newer writer who has subject matter expertise but fewer writing credentials. If you are proposing an article to me about moving a site from WordPress to Gatsby, and tell me that the article is based on your experience of doing this on a large site, that is more interesting to me than a more experienced writer who has just thought it would be a good topic to write about.

If you do have writing credits, a few relevant links are more helpful than a link to your entire portfolio.

When You Can’t Find A Submission Guide

Some publications will publish an email address or contact form for submissions, but have no obvious guide. In that case, assume that a short pitch as described above is appropriate. Include the pitch in the body of the email rather than an attachment, and make sure you include contact details in addition to your email address.

If you can’t find any information about submitting, then check to see if the publication is actually accepting external posts. Are all the articles written by staff? If unsure, then get in touch via a published contact method and ask if they accept pitches.

I’ve Already Written My Article, Why Should I Send An Outline Or Pitch?

We ask for an outline for a few reasons. Firstly, we’re a very small team. Each proposal is assessed by me, and I don’t have time in the day to read numerous 3000-word first draft proposals. In addition, we often have around 100 articles in the writing process at any one time. It’s quite likely that two authors will want to write on the same subject.

On receiving an outline, if it is going in a similar direction to something we already have in the pipeline, I can often spot something that would add to — rather than repeat — the other piece. We can then guide you towards that direction, and be able to accept the proposal where a completed piece may have been rejected as too similar.

If you are a new writer, the ability to structure an outline tells me a lot about your ability to deliver us something useful. We are going to spend time and energy working with you on your article, and I want to know it will be worthwhile for all of us.

If you are an experienced writer, the fact that you have read and worked with our guidelines tells me a lot about you as a professional. Are you going to be difficult for our editorial team to work with and refuse to make requested changes? Or are you keen to work with us to shape a piece that will be most useful and practical for the audience?

In The Verge submission guide included above, they ask you to “clearly and concisely” convey the story you plan to write. Your pitch shouldn’t be an article with bits removed or about the first two paragraphs. It’s literally a sales pitch for your proposed article; your job is to make the editor excited to read your full proposal! Some publications — in particular those that publish timely pieces on news topics — will ask you to attach your draft along with the pitch, however, you still need to get the editor to think it is worth opening that document.

Promoting Yourself Or Your Business

In many guides to self-promotion or bootstrapping the promotion of a startup, writing guest posts is something that will often be suggested. Be aware that the majority of publications are not going to publish an advert and pay you for the privilege.

Writing an article that refers to your product may be appropriate, as most of our expertise comes from doing the job that we do. It is worth being upfront when proposing a piece that would need to mention your product or the product of the company you work for. Explain how your idea will not be an advert for the company and that the product will only be mentioned in the context of the experience gained in your work.

Some publications will accept a trade of an article for some promotion. CSS-Tricks is one such publication, and describes what they are looking for as follows:

“The article is intended to promote something. In that case, no money changes hands. In this scenario, your pitch must be different from a sponsored post in that you aren’t just straight up pitching your product or service and that you’re writing a useful article about the web; it just so happens to be something that the promotion you’ll get from this article is valuable to you.”

— “Guest Posting,” CSS-Tricks

Writing for a popular publication will give you a byline, i.e. your credit as an author. That will generally give you at least one link to your own site. Writing well-received articles can be a way to build up your reputation and even introduce people to your products and services, but if you try and slide an advert in as an article, you can be sure that editors are very well used to spotting that!

Pitching The Same Idea To Multiple Publications

For time-sensitive pieces, you might be keen to spread the net. In that case, you should make publications aware of submitting that you have submitted it elsewhere. Otherwise, it is generally good practice to wait for a response before offering the piece to another publication. The Slate writes,

“Do be mindful if you pitch your idea to multiple publications. We try to reply to everyone in a timely manner, typically within one to two days. As a general rule, and if the story isn’t too timely, it’s best to wait that amount of time before sharing the pitch with another publication. If you do decide to cast a wide net, it’s always helpful to let us know ahead of time so we can respond accordingly.”

— “How To Pitch Slate,” The Slate

If Your Pitch Is Rejected

You will have ideas rejected. Sometimes, the editor will let you know why, but most often you’ll get a quick no, thanks. Try not to take these to heart; there are many reasons why the piece might be rejected that have nothing to do with the article idea or the quality of your proposal.

The main reasons I reject pitches are as follows:

Obvious Spam
This is the easy one. People wanting to publish a “guest post” on vague subjects, and people wanting “do-follow links”. We don’t tend to reply to these as they are essentially spam.
No Attempt At A Serious Outline
I can’t tell anything about an idea from two sentences or three bullet points, and if the author can’t spend the time to write an outline, I don’t think I want to have a team member working with them.
Not A Good Topic For Us
There are some outlines that I can’t ever see being a great fit for our readers.
An Attempt To Hide An Advert
In this case, I’ll suggest that you talk to our advertising team!
Difficult To Work With
Last but not least, authors who have behaved so badly during the pitch process that I can’t bring myself to inflict them on anyone else. Don’t be that person!

If I have a decent outline on a relevant subject in front of me, then one of two things are going to happen: I’ll accept the outline and get the author into the writing process or I’ll reply to the author because there is some reason why we can’t accept the outline as it is. That will usually be because the target audience or tone is wrong, or we already have a very similar piece in development.

Quite often in these scenarios, I will suggest changes or a different approach. Many of those initial soft rejections become an accepted idea, or the author comes back with a different idea that does indeed work.

Ultimately, those of us who need to fill a publication with content really want you to bring us good ideas. To open my inbox and find interesting pitches for Smashing is a genuine highlight of my day. So please do write for us.

Things To Do

Research the publication, and the type of articles they publish;
Read their submissions guide, and follow it;
Be upfront if you have sent the pitch to other publications;
Include a couple of sentences about you, and why you are the person to write the article. Link to some other relevant writing if you have it;
Be polite and friendly, but concise.

Things To Avoid

Sending a complete draft along with the words, “How do I publish this on your site?”;
Sending things in a format other than suggested in the submissions guide;
Pitching a piece that is already published somewhere else;
Pitching a hidden advert for your product or services;
Following up aggressively, or sending the pitch to multiple editors, Facebook messenger, and Twitter, in an attempt to get noticed. We publish a pitch contact, because we want pitches. It might take a day or two to follow up though!

More Pitching Tips

“How To Write A Pitch That Gets You Published,” Format
with tips for creatives pitching to magazines
“How To Successfully Pitch The New York Times (Or, Well, Anyone Else),” Tim Herrera, NiemanLab
some excellent tips on writing good pitches

Smashing Editorial
(il)

Skype users desperately want its old icon back

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/_MUcQqMmbtM/skype-users-desperately-want-its-old-icon-back

It's been a rough week for people who are overly attached to Android and iOS app icons. Not only were youngsters sent into a tailspin when Snapchat updated its icon, but now it's the turn of Skype users to go through the pain of watching their beloved app get a visual update.

That's because Skype has got a new icon on iPhones and iPads. It's part of a larger aesthetic overhaul of Microsoft Office icons, which has been in the works since last year. And while the new icon is arguably more noticeable than the Snapchat update, is this redesign a case of users getting angry over nothing?

Skype app icon

Expect to see the new icon shortly

In the redesign we can see that it's inverted the colours of the previous app icon, so now the S is white and the circular background is a blue gradient. The new Skype icon is in line with Microsoft's Fluent Design System and will roll out to all platforms in the next few weeks.

As is often the case with redesigns of familiar products, the new icon has provoked a negative reaction from users. Plenty were quick to point out that the new colour scheme makes the telecommunications application look suspiciously similar to Facebook Messenger. Meanwhile, others noticed that the sizing of the new icon made it appear bloated and overweight, leading to them to consider removing it from their devices altogether – a response Skype probably wasn't going for.

Let's just hope people aren't jumping ship too soon. The updated icon is part of a wider upgrade to the app that sees Microsoft fix some of the bugs that have plagued previous iterations. So while it might take a while to get used to the new icon, at least Skype will work better than before.

In the cut-throat and fickle world of communications apps though, maybe this will be the nail in the coffin for Skype. After all, it's been flagging behind Whatsapp and Facebook Messenger for some time now. Or perhaps new features, such as Microsoft's plan to allow Skype users to make VoIP calls to each other in the start of 2020, will give the app a new lease of life.

Related articles:

How to design app icons25 stunning iOS app icon designsHow to nail your social media strategy

Showcase of Beautiful Dashboard Design Inspiration

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/2G7z580hp-8/

UI design is a delicate, and often overlooked, art. A beautiful user interface is half of what makes a website great. The best UI combines amazing design and useful functionality to make an app or website simple and fun to navigate.

But if you’re a designer making your own website, finding examples to draw inspiration from can be difficult. You might stumble upon an amazing creation as you browse the web, but if you need some great dashboard UI inspiration right now, we’ve got something for you.

These 13 awesome examples showcase a variety of different dashboards. From simplistic user backends to info-packed analytics reports, striking dark design to elegant light UI, those creating menus and dashboards will find some beautiful inspiration in this collection.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

DOWNLOAD NOW

Sprint Report Dashboard by Rafał Staromłyński

Example of Sprint Report Dashboard by Rafał Staromłyński

Paat Bank by Sarah-D

Example of Paat Bank by Sarah-D

Vector Trade Dashboard for Bitcoin

Example of Vector Trade Dashboard for Bitcoin

Product Analytics Management System Dashboard by Kostia Varhatiuk

Example of Product Analytics Management System Dashboard by Kostia Varhatiuk

Money Management Dashboard by Riko Sapto Dimo

Example of Money Management Dashboard by Riko Sapto Dimo

#Exploration – Dashboard by Dwinawan

Example of #Exploration - Dashboard by Dwinawan

User Dashboard UI KIT, Human Resources, Employer

Example of User Dashboard UI KIT, Human Resources, Employer

Cryptocurrency Exchange Dashboard by Den Klenkov

Example of Cryptocurrency Exchange Dashboard by Den Klenkov

Car Dashboard Interface by Aga Ciurysek

Example of Car Dashboard Interface by Aga Ciurysek

 

Product Analytics Management System Dashboard Dark Version by Kostia Varhatiuk

Example of Product Analytics Management System Dashboard Dark Version by Kostia Varhatiuk

Robo Advisor Web App by Michal Parulski

Example of Robo Advisor Web App by Michal Parulski

Dashboard UI Concept – Dark Theme

Example of Dashboard UI Concept - Dark Theme

Create Stunning Dashboard UI

Finding great sources of inspiration is a crucial step for any designer. Unless you’ve been making interfaces and outlines for many years, it’s a good idea to draw inspiration from other sources. That way you can see what works well in action and expand on it with your own unique style.

This list was compiled with variety in mind, so no matter what kind of dashboard UI you’re creating, you can find something to base your design off of. There are user backends, helpful interfaces, graphs and analytics, and everything in between.

We hope this compilation gave you the inspiration you needed to create a beautiful dashboard of your own.


Awesome Demos Roundup #7

Original Source: http://feedproxy.google.com/~r/tympanus/~3/7RNE1cwYbrA/

So many awesome work has been done over the past month! There’s lots of demos and experiments that will make your jaw drop, that’s for sure. From procedurally generated CSS numbers to amazing CSS animations, there’s much to explore and wonder about.

We hope you enjoy this creative compilation!

Dandelion

Dandelion

Anime inspired self portrait

Anime-inspired-self-portrait

Walking Sprites Demo

Walking-Sprites-Demo

Ghibli Slider

Ghibli-Slider

∞ Loader animation

Loader-animation

Analog Clock in Three.js

Analog-Clock-in-Three

Toast Pop!

Toast-Pop

Wobbly underline

Wobbly-underline

Plasma

Plasma

Liquidfun

ShakeLiquidWindow

Kalli Hero

Kalli-Hero

Highway Race

Highway-Race

Cassie!

Cassie

anime.js grid staggering demo

AnimeJSStaggering

Distortion and Parallax Shader

DistortionParallaxShader

Fireworks

Fireworks

Grid Jr. (Web Audio API + Canvas visualizer)

Grid-Jr.-Web-Audio-API-+-Canvas-visualizer

Paint Drop Hover

Paint-Drop-Hover

Fishing Game

Fishing-Game

Clip Clop Clippity Clop

Clip-Clop-Clippity-Clop

Text by circles

Text-by-circles

Social Links Cube (PlayCanvas)

Social-Links-Cube-PlayCanvas

Color Search w/ React Hooks

Color-Search-wReact-Hooks

React Slider w/ Hover Effect

React-Slider-wHover-Effect

30 – 50 hogs

30—50-hogs

GLSL: 3D rotational spatial modification

GLSL-3D-rotational-spatial-modification

Procedurally Generated CSS Numbers

Procedurally-Generated-CSS-Numbers

Plibt

plibt

Glitched circles

glitched-circles

ThreeJS Hover Zoom Channel Displacement

ThreeJS-Hover-Zoom-Channel-Displacement

react-three-fiber: suspense + GLTF loader

threejs_PaulHenschel

Awesome Demos Roundup #7 was written by Mary Lou and published on Codrops.