Efficient Web Development with Emmet in Visual Studio Code: Lorem Ipsum
Emmet is a web development plugin included by default in the Visual Studio Code editor that helps developers write HTML and CSS code more efficiently. It provides a set of abbreviations and shortcuts that allow users to generate code patterns quickly and easily, making coding faster and more productive. Emmet is a powerful tool that reduces the amount of typing and errors in your code, and it is supported by many popular code editors including Visual Studio Code, Sublime Text, and Atom. As a built-in plugin in Visual Studio Code, Emmet is an essential tool for developers who want to improve their workflow and write code faster and more efficiently.
Generating Lorem ipsum in HTML documents can be a useful tool for web developers and designers to quickly create placeholders for text. Lets see how to generate Lorem ipsum in an HTML document using Visual Studio Code Editor.
To start, open your HTML file in Visual Studio Code Editor. You can either create a new HTML file or use an existing one.
To generate Lorem ipsum text in your HTML file, you can use the Emmet abbreviation lorem followed by the desired number of words or paragraphs. For example, if you want to generate three paragraphs of Lorem ipsum text, you can use the following code:
<div>
p*3>lorem10
</div>
In this code, we’ve created a div container and added a three p element with the lorem10 abbreviation. When you press the “Tab” key on your keyboard after typing this code, Emmet will automatically generate three paragraphs of Lorem ipsum text inside the p element with then words each.
You can change the number of the lorem command to generate a specific number of words instead. For example, if you want to generate 20 words of Lorem ipsum text, you can use the following code:
<span>Lorem20</span>
After typing this code, press the “Tab” key on your keyboard. This will generate 20 words of Lorem ipsum text inside the span element.
Generating Lorem ipsum in an HTML document using Visual Studio Code Editor is a quick and easy process with the built-in Emmet feature. By following the steps, you can easily generate placeholder text for your HTML projects without the need for external plugins.
UX Design Operations: What, Why, and How
UX design operations (DesignOps) is a term that describes the practice of optimizing and orchestrating the people, processes, and craft involved in creating consistent, quality designs. DesignOps aims to amplify the value and impact of design at scale by addressing common challenges such as growing and evolving design teams, finding and hiring talent, creating efficient workflows, and improving the quality and impact of design outputs.
Why is DesignOps important?
DesignOps is important because it helps designers focus on designing and researching instead of being bogged down by administrative tasks, communication overheads, or inconsistent tools and processes. DesignOps also helps designers collaborate better with each other and with other teams by establishing clear roles, responsibilities, standards, and expectations. DesignOps can also help designers demonstrate their value and influence within the organization by aligning their work with strategic goals and measuring their outcomes.
How to implement DesignOps?
There is no one-size-fits-all approach to implementing DesignOps. The structure and scope of a DesignOps practice should be derived from the specific needs and objectives of each organization. However, some common steps to start or improve a DesignOps practice are:
- Assess the current state of design within the organization. Identify the strengths, weaknesses, opportunities, and threats (SWOT) related to design processes, tools, culture, skills, resources, etc.
- Define the vision and mission for design within the organization. Articulate what design means for the organization’s success and how it contributes to its goals. Create a clear statement that communicates the purpose and value proposition of design.
- Prioritize the most critical pain points or opportunities for improvement. Based on the SWOT analysis, select a few areas that have high impact or urgency for addressing with DesignOps solutions.
- Develop a roadmap for implementing DesignOps solutions. Plan how to tackle each priority area with specific actions, timelines, resources, stakeholders, and metrics.
- Execute the roadmap with an agile mindset. Implement DesignOps solutions iteratively and incrementally. Test assumptions, gather feedback, measure results, and adjust accordingly.
What are some examples of DesignOps solutions?
DesignOps solutions can vary depending on the context and needs of each organization, but some common examples are:
- Creating a centralized repository of design assets, guidelines, and best practices that can be easily accessed and updated by all designers and other teams.
- Establishing a standardized workflow for managing design projects, from ideation to delivery, that includes clear stages, roles, deliverables, tools, and handoffs.
- Developing a training program for onboarding new designers or upskilling existing ones on relevant skills, tools, processes, and expectations.
- Setting up a system for measuring and reporting on design outcomes, such as user satisfaction, engagement, conversion, retention, etc.
- Organizing regular events or activities for fostering a culture of collaboration, learning, innovation, and recognition among designers and other teams.
Conclusion
DesignOps is not just a buzzword, but a valuable practice that can help organizations scale their design capabilities and deliver better user experiences. By applying user-centered and design-thinking methods to their own processes, designers can create more efficient, effective, and enjoyable ways of working together and with others.
02.21.23Creating Dynamic and Reactive Components with StencilJS State and Props when passing an Array
In web development, state refers to the data that is used to render the content of a web page or component. In StencilJS, state is an important concept that enables you to define and manage data within your components. By using state, you can create dynamic and reactive web components that respond to changes in user input or other data.
In this blog post, we’ll explore how to use state in StencilJS to refresh and render the template of a component when a prop that is expecting an array type is passed. We’ll start by explaining what state is and how it works in StencilJS, and then move on to a practical example that demonstrates how to use state to create a dynamic and reactive component.
What is State in StencilJS?
State is a built-in feature of StencilJS that enables you to define and manage data within your components. State can be used to represent any type of data, including strings, numbers, arrays, objects, and more. When you define a state property in a StencilJS component, the framework automatically creates a getter and setter function that you can use to retrieve or update the value of the state property.
State is particularly useful when you want to create reactive components that respond to changes in user input or other data. By updating the value of a state property, StencilJS will automatically re-render the component’s template to reflect the new data. This can help to create dynamic and responsive user interfaces that are more engaging and interactive.
Using State to Render a Dynamic Component Template
To demonstrate how to use state in StencilJS to refresh and render the template of a component when a prop that is expecting an array type is passed, we’ll create a simple component that displays a list of items. We’ll start by defining a state property that represents the list of items that we want to display:
import { Component, h, Prop, State, Watch } from '@stencil/core';
@Component({
tag: 'item-list',
})
export class ItemList {
@Prop({ mutable: true }) data: string[] = [];
@State() items: string[] = this.data;
@Watch('data')
dataChanged(newValue: string[]) {
this.items = [...newValue];
}
render() {
return (
<div>
<ul>
{this.items.map((item) => (
<li>{item}</li>
))}
</ul>
</div>
);
}
}
In this example, we have added a @Watch() decorator to the data prop. The @Watch() decorator listens for changes to the data prop and triggers the dataChanged() method, which updates the value of the items state property with the new value of the data prop.
We have also set the mutable option of the @Prop() decorator to true. This allows the data prop to be updated externally, which will trigger the @Watch() decorator and re-render the component.
By using the @Watch() decorator in combination with StencilJS state, we can create dynamic and reactive components that respond to changes in external data.
To test it, we can use our component and set an interval to update the array we pass to our prop every 3 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My StencilJS App</title>
<link rel="stylesheet" href="build/global-styles.css" />
</head>
<body>
<item-list id="my-list"></item-list>
<script>
var alist = document.querySelector('#my-list');
var data = [];
var counter = 0;
setInterval(() => {
data.push(++counter);
alist.data = [...data];
}, 3000);
</script>
</body>
</html>
When the data prop is changed externally, the dataChanged() method is called, which updates the items state property and triggers a re-render of the component. This results in the list being updated with the new data.
Noticed that both in the component declaration and inside the interval we are using the spread operator to copy the array values to a new array. This is because the component keeps a reference to the Array in memory and not whether the data in the array has changed.
You can get away with doing the copy when you assign the data prop externally but you will run into issues if the update is coming internally from a nested child component event through the Listen decorator. In this example, if we do not pass in a new array externally Watch will not fire after the first assignment and we will not be able to update the state and trigger the re-render.
01.24.23
Stencil.js: The Key to Building Advanced and Optimized Web Components for Design Systems
Web components are a way to create custom, reusable elements for use in web pages and web applications. They allow developers to create their own HTML tags and use them in the same way as built-in elements like <div> and <p>. Stencil.js is a popular open-source tool that helps developers create web components with minimal setup and config. It’s a great tool for building design systems, as it allows for consistent and reusable components across an entire application.
Creating web components with Stencil is easy and straightforward. First, you need to install the Stencil CLI by running npm install -g @stencil/cli in your terminal. After that, you can use the create command to create a new project: npx create-stencil my-component. This will create a new project in a folder called my-component with all the necessary files and configs.
Let’s take an example of creating a reusable button component.
import { Component, h, Prop } from '@stencil/core';
@Component({
tag: 'my-button',
styleUrl: 'my-button.css',
shadow: true
})
export class MyButton {
@Prop() text: string;
render() {
return (
<button>
<slot>{this.text}</slot>
</button>
);
}
}
Here, we are creating a component with the tag name “my-button” and it uses the ‘my-button.css’ for styling. The <slot> element is used to insert the text passed as a property.
One of the key benefits of using Stencil.js is that its syntax is familiar to developers who are already familiar with other frameworks such as Angular, React, and Vue. This makes it easy for developers to learn and use, even if they don’t have previous experience with web components. Stencil.js uses JSX for defining the template of the component, which is similar to the JSX used in React. This allows developers to use the same familiar syntax for both building web components and building the rest of their application. Additionally, the use of decorators in Stencil.js is similar to the decorators used in Angular, which makes it easy for developers who are already familiar with Angular to start using Stencil.js. This familiar syntax makes it easy for teams to start using Stencil.js without a steep learning curve, which can help to increase productivity and reduce the time required to build a design system
Once your component is set up, you can start creating your web component by defining a new class in the src/components folder. The class should extend the Component class provided by Stencil and include a render() method that returns the HTML template of the component. You can use JSX syntax to define the template, which makes it easy to include dynamic data and event handlers.
To use your new web component, you’ll need to import it in your HTML file and add it to the DOM like any other HTML element.
<!-- using the new component --> <my-button text="Click me"></my-button>
You can also use the @Prop decorator to define properties for your component and the @State decorator for state variables. These properties and state can be passed in from the parent component and used in the component’s template.
One of the powerful feature of Stencil is its ability to use Web API’s like Shadow DOM, Custom Elements, and ES Modules, which makes it highly performant and also compatible with any framework or library. In addition, Stencil also provides a set of decorators, which makes it easy to handle lifecycle events, props, states and also makes it easy to handle events. This makes it easy to manage the behavior of your design system components, and also allows you to make changes to your design system without affecting other parts of your application.
Another great feature of Stencil is its ability to create highly optimized web components. When you build your component using the npm run build command, Stencil automatically optimizes your code by removing unnecessary code, minifying the output, and bundling all the dependencies. This results in smaller and faster web components that can be easily integrated into any web page or application.
Creating optimized web components with Stencil can greatly improve the performance of your design system. One of the ways that Stencil optimizes your code is by using a technique called “tree shaking” during the build process. This means that it only includes the code that is actually used in the final bundle, and removes any unused code. This results in smaller, more efficient web components that can be easily integrated into any web page or application.
Another way that Stencil optimizes your web components is by using code splitting. This means that your code is divided into smaller chunks, which can be loaded on demand as needed. This improves the initial load time of your application, as the user only needs to load the code that is immediately needed, rather than downloading all the code at once. This also allows for better caching of the code, as the user only needs to download the code that has changed, rather than downloading all the code every time they visit the site.
In addition to these optimization techniques, Stencil also provides a set of performance metrics that you can use to measure the performance of your web components. This allows you to track the performance of your components over time and make adjustments as needed to improve the performance of your design system.
Building design systems with Stencil can bring many benefits to your development process.
01.23.23Exploring the Depths of Recursion: A Beginner’s Guide to JavaScript Recursive Functions
JavaScript recursive functions are a type of function that calls itself in order to accomplish a certain task. These functions are particularly useful for tasks that can be broken down into smaller, similar subtasks, such as traversing a tree-like data structure or solving a mathematical problem.
To write a recursive function in JavaScript, you first need to identify the base case, or the point at which the recursion should stop. In the case of traversing a tree, the base case would be reaching a leaf node. In the case of a mathematical problem, the base case would be reaching a specific value.
Once the base case is identified, you can write the recursive part of the function. This typically involves calling the function again with a modified version of the input, bringing the function closer to the base case.
For example, consider the following function for calculating the factorial of a number:
function factorial(n) {
if (n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
console.log(factorial(5)) // Output: 120
In this example, the base case is when n is equal to 1, at which point the function returns 1. The recursive part of the function is the return n * factorial(n - 1) statement, which calls the function again with n - 1 as the input. This brings the function closer to the base case, until it ultimately reaches it and returns the final result.
One of the main benefits of recursive functions is that they can make complex tasks more manageable by breaking them down into smaller subtasks. Additionally, recursive functions can be more elegant and concise than their iterative counterparts. However, recursive functions can also be less performant, as each function call adds a new call to the call stack, which can lead to stack overflow errors if the recursion is too deep.
Another drawback of recursive functions is that it can be difficult to understand the flow of the code and it’s also hard to debug.
It’s important to note that not all problems are best suited for recursive solutions and it’s always good practice to consider both recursive and iterative solutions before making a choice. It’s also important to consider the performance and memory usage for large inputs.
In summary, recursive functions can be a powerful tool for solving certain types of problems in JavaScript, but they should be used with caution and only when appropriate. By understanding the benefits and drawbacks of recursive functions and considering both recursive and iterative solutions, you can write more efficient and effective code.
01.20.23Unlocking the Power of Native Web Components: Harnessing the Benefits of Reusable, Customizable Code
Web components are a set of technologies that allow developers to create reusable, customizable, and self-contained elements that can be used across multiple web pages and applications. These elements, known as custom elements, are built using a combination of HTML, CSS, and JavaScript, and can be easily integrated into any web page or application.
One of the main benefits of web components is that they are reusable. This means that once a web component is built, it can be used in multiple places across a website or application without having to write the same code over and over again. This can save a lot of time and effort for developers, and also makes it easier to maintain and update the code.
Another benefit of web components is that they are customizable. Because web components are built using standard web technologies, they can be easily styled and modified to fit the look and feel of a website or application. This allows developers to create unique and visually appealing elements that can be used across multiple pages and applications.
Web components also provide a level of encapsulation, meaning that the HTML, CSS, and JavaScript that make up a web component are self-contained, and do not affect the rest of the page or application. This makes web components a great option for building complex UI elements, such as a custom calendar or a data visualization, that can be easily integrated into any web page or application.
Another advantage of web components is that they are platform-agnostic, meaning that they can be used on any platform that supports web standards, such as web browsers and web-based mobile apps. This makes it easy to share and reuse code across different platforms and devices.
To harness the benefits of web components, developers can use a library or framework that provides a simplified API for creating and using web components. For example, the popular JavaScript library Polymer provides a set of tools and best practices for building web components, and also includes a number of pre-built elements that can be used out of the box.
Another option is to use a framework such as React or Angular, which provide a more comprehensive approach to building web applications. These frameworks can be used to build web components, and also provide a set of tools and best practices for managing state and handling events.
In summary, web components provide a way for developers to create reusable, customizable, and self-contained elements that can be used across multiple web pages and applications. By using a library or framework that provides a simplified API for creating and using web components, developers can easily take advantage of these benefits and build more efficient and maintainable code. Additionally, web components are platform-agnostic, meaning that they can be used on any platform that supports web standards, making it easy to share and reuse code across different platforms and devices.
06.7.22How StencilJS solved our UI Component problems
Imagine that you work for a software company that is a about 10 years old. Over the years, many engineers have come and gone, and they brought their favorite UI component libraries to help with the implementation of features. As more engineers come, so did the number of preferred UI libraries. In some cases, designers came up with something that did not exist in any of libraries already in use. Because the goal was to implement features as fast as possible, there was no time to create your own. So what do you do? Most likely you searched for open source library that had the component you needed and introduced it into the source code.
This was the situation our engineering organization found itself in after a decade of development with very little focus on scaling the frontend. The list of libraries being used was lengthy, including several modern frontend frameworks and versions. The list included AngularJS, Angular, Telerik, several versions of jQuery, jQuery UI, Bootstrap, Angular Material for both version of Angular, and KnockoutJS. None of the UI components were compatible with the other technologies and the UI elements looked and functioned differently from page-to-page.
We needed a solution that would be capable of working with all these technologies to maximize the reuse of our code. There was no UI library that met our need of being universal. One option was to continue with Angular Material, but that would mean that the legacy areas of our application could not take advantage of feature rich UI components.
We narrowed it down to Web Components as our solution, but that meant we had to build our own library . There were some reservations because developing your own component library is costly and if management does not invest in it, they tend to be abandoned and never mature. In our case, we also needed a set of consistent UI components to create a consistent user experience. The solution need to work anywhere in our stack. Our design team had already adopted Material Design as their design philosophy and the effort modernize our applications was already on its way using Angular and Angular Material. It would be years for a full rewrite.
The next problem we had to solve was how to create Web Components that are future proof, work with or without a framework, as well as work in IE11. I was already familiar with the Ionic framework and had followed the development of their StencilJS compiler they use to develop their components. For us, Stencil met our needs, and it was easy to learn. It included many of the familiar syntax and features in Angular and React and it was cross-browser compatible.
Once we received the buying from other members of the team, I spent the next 8 months developing a set of components that would replace future use of all other UI components from third-party libraries. When developing I started with the most common elements, form controls such as input fields, selects, radio button, buttons, etc… The design matched the Material UI components There was no design needed to get started. Within 6 months, I was able to release the first version to the engineering team for production use. It included the most common components we used.
To speed up development, our components did not match feature by feature with the Angular Material component API. Rather, we added the basic functionality, and as new functionality was required, it was introduced in a backward compatible approach. The API for each component matched the API for the Material ones to make it easier to replace them in the future. This approach allowed us to quickly get something reusable to production without bloating the components with extra features that were not required at the time. We also chose not to go back and replace the other library components. Rather, as we touched a feature we would replace them with our own.
This solution worked for our team. It may not work for everyone. There are many things to consider when writing your own component library. In particular, whether the team has the frontend expertise to execute, and if the company will invest the necessary time resources to mature the library to extract the value.
One of the advantages with using web components is that you are future proofing your UI from future technology trends. There are many Frontend frameworks am there will be many more to come as the web evolves. StencilJS specifically solve several “getting started” issues for our team. First, development was familiar to Angular and React and it is well documented. It also allows for lazy loading and caching components which speeds up the user experience with faster page loads.
How is your team solving their frontend problems?
How web components took our design system to the next level
After several years of working as a frontend engineer and design manager, I have personally learned many of the challenges of working with an existing codebase. Over the years developers have introduced one or more third-party UI libraries to help speed up the development of features in a product. As you know, people come and ago and new team members may prefer different tools. Once a library is introduced to the development stack, it will be part of the codebase for many years to come, adding to the number of libraries the team has to learn to work with the product.
Over the years, I have worked with several versions of Bootstrap, jQuery UI, Angular Material for AngularJS and Angular, as well as custom components following the Atomic CSS pattern by Brad Frost. While these tools have been great in developing scaleable UI components as part of a design system, many of them run into compatibility problems. For example, we started one application with AngularJS and used the Angular Material library for that version. When the new Angular version was released, our team decided to build new applications and features with it moving forward. It left us in the position many mature products are in, with different technologies as part of the tech stack that are not compatible with each other.
As the design manager, our team struggled to implement a consistent experience for different areas of the product. Common components like checkboxes, buttons and inputs did not look or behave the same. Features were built using old UI libraries that were no longer being maintained. Modern libraries like Angular Material cannot be used without rewriting a product feature. There were other libraries to help with that problem, but that also meant another library to add to the already melting pot of third-party libraries the team was already using.
To solve the problem, I took on as a side project, the development of a UI library built with web components using Stencil JS. At the time, I could not get buy-in from management to dedicate engineering resources because the priority was on other crucial features. It took me about six months to build a good base for the library. I developed the most commonly used components across our stack. Many mistakes were made, but the results were gold.
After a few months we were able to reuse these components in the legacy areas of the product without the Angular framework, as well as the areas developed with both versions of Angular. Today, we are slowly removing the need for 3rd party libraries. We have been able to leave existing libraries alone to minimize the impact. The components were developed with a similar interface to those of Angular Material. This approach has allowed us to easily swap the components when we do touch an existing feature. One-by-one, we have been able to reduce the need for 3rd party UI libraries. While our teams still rely on them in some cases, the benefits of having a component library that works with or without any modern frontend framework is clearly showing for our team. Designers are able to design consistently across the product without having to worry about an increase in development scope due to the UI design.
The components were published as a private NPM package. This approached allowed different apps to work with the different versions of the library, allow my team to continue to develop the library with minimal effect on existing projects. Building with web components also helped us document the components as part of the design system. Developers and designers could visit the documentation website and see real examples of the components, as well have code snippets to quickly get started.
The final result has been a win both for engineers and designers. It’s the one UI library to rule them all. Web components can also work well with Progressive Web Applications(PWA) and hybrid applications for developing native apps. Stencil JS is the core technology behind the Ionic framework and built by the Ionic team.
Let me know what you think, how did you solve this problem?
Building components with StencilJS
StencilJS is an open source compiler for generating web components. It is used by companies like Apple and Amazon. It was built by the team behind the Ionic Framework and it is the technology used to built the Ionic design system itself. It is small, fast and easy to learn. The best part is that you can integrate the components with all major frameworks like Angular, Vue or React. This is awesome because it allows your team to future proof your components regardless of the technology being used to render the UI.
Creating a component
Components are created with the Component decorator. The syntax is exactly to that of an Angular component. Stencil components are rendered using the declarative syntax JSX. For those familiar with React you will find it convenient when declaring component templates. Like react components, the component class requires a render method that returns HTML. Visit the JSX React docs to learn more about the syntax.
// button.tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'my-button',
styleUrls: ["./button.scss"]
})
export class ButtonComponent {
render() {
<Host class="my-button"><slot/></Host>;
}
}
Inner content with Slot
Stencil components can render dynamic children using slots. Slots are similar to Angular transclusion using the <ng-content> tag. Like Angular you can name your slots to allow users to add dynamically rendered children at specific locations. You can have many slots in a component, but only one can be left without a name. To add a named slot you can use the name attribute name="item-start"on the slot tag. To render a child in that slot simply add the slot attribute to the element that will render as a child. <my-button><span slot="item-start">Label</span></my-button>. In our simple example of our button it is unnecessary and we just used a self closing slot element.
Attributes/properties with the Prop Decorator
To pass external data or values to a component we use the Prop decorator. This allows us to create an interface for our component that changes how it behaves or renders depending on the input it is given. Props are similar to the Input decorator in Angular. Let’s say we want our button to render in different colors from our theme. We will add a color property that will add a CSS class to style the button accordingly.
// button.tsx
import { Component, h, Prop } from '@stencil/core';
@Component({
tag: 'my-button',
styleUrls: ["./button.scss"]
})
export class ButtonComponent {
@Prop() color: 'primary' | 'accent' = 'primary'
render() {
const { color } from this;
<Host class={
"my-button": true,
[`my-${color}-button`]: true
}><slot/></Host>;
}
}
With this simple property, developers can use different styles without having to write a single line of CSS.
Triggering events with the Event decorator
Events allow components to emit changes within the component. While Stencil does not provide stencil specific events, it does provide a way to create custom DOM events with the Event decorator.
import { Event, EventEmitter } from '@stencil/core';
export class MyComponent {
@Event() notifyChanges: EventEmitter<any>;
eventHandler(data: any) {
notifyChanges.emit();
}
}
To listen to the event we can use the addEventListener('notifyChanges', () => {}) method and register the event handler just like any other DOM event. It is that simple.
Learn more about Stencil and how to create components by visiting the Stencil documentation website.
Resume tips for UX/UI Designers from an overwhelmed hiring manager
Searching for a job is a painful process. It is full of administrative work like updating our resumes for a position, filling out online applications with information that is in the resume or LinkedIn profile. It is likely that we will go through many rejections or not hear back from most companies. It is hard not to take some of the rejection personally, but we feel the pain of it, shake it off, and keep on searching. All we need is someone to see our potential and give us an opportunity to prove ourselves, right?
On the other side of the search, as a team manager it is time consuming. Large organizations maybe have resources to look through and filter candidates to find the right one for the position. In smaller organizations it is most likely the hiring manager. I have spent countless hours looking through resumes, LinkedIn profiles, and portfolios in search of a Designer and have learn too quickly look at a resume and know whether I would like to learn more about the candidate within the first few seconds. In my experience I have worked both as a designer and web developer and have been on both sides of searching for a job and searching for candidates.
When looking at candidates here are few of the tips I wish I could have given to the hundreds of candidates I have reviewed but never pursued.
You are a designer, design your resume
I cannot tell you how many resumes I have looked at that looked like complete trash. If that is you, forgive me. I am not trying to offend anyone, but think about it. You want to stand out. If the first thing someone looking at your resume sees is line upon line of text without a clear information architecture, it questions whether you really have the skills of a designer. While writing your resume, follow design principles and usability heuristics. This is not the same as making your resume a poster. Simple still works. Think of how your potential future manager will consume your resume. What information do you want to highlight that makes you different from other candidates. They are most likely looking at dozens of resumes in one sitting. Use information architecture principles to design the key information in your resume. It is the first impression. Keep it simple, but design it well.
Make sure all links work
UX Designers are suppose to make the life of end-users easier. Don’t make it difficult for someone looking at your resume online to find your portfolio or LinkedIn profile. You are less likely to be looked at if your links have to be copied and pasted. While it is a small point and it is not difficult to copy and paste, it is all about impressions.
The halo effect is when one trait of a person or item is used to judge that person or thing when making fast decisions. Think of how many times you have judged a business based on how employees dress or the cleanliness of the facility. A simple star rating on an app like Yelp will make us think twice or convince us to buy from a business. At that point we do not know anything about how the business handles complaints or whether their food is good. We make up our minds from a simple first impression based on small traits. Broken links are frustrating.
Fix your portfolio website
Depending on your development skills you may decide to build your own portfolio website. If you do, make sure your portfolio website is not broken. While it can be overlooked because many designers are not expected to be developers, it is up to you to know whether you will take on the task of building a website. If you don’t feel confident, pick a prebuilt solution. The goal is to show case what you are capable of and provide a good experience for those reviewing your work.
Stop writing your entire design process
This point could just be me and I would encourage you to get feedback from others on this topic. In my case, I do not plan on reading through an entire case study of how someone went through an entire process to redesign one page. If that was the case for every single candidate I review, it would take days to review 10 candidates. This conversations usually come up when speaking with a candidate. It is also a bit of a flag that a designer is very junior. Personally I see this format in portfolios from candidates that recently finished a design bootcamp like General Assembly. Do not get me wrong, there is nothing wrong with General Assembly. I personally work with great designers who entered the design world through them. As a manager I want a quick look at the before and after. I want to know how your work improves the experience and the business goals. All other information is secondary.
This goes back to the point of designing your resume. Design your portfolio the same way. Show your potential new employer the win and then expand on it with secondary supporting information. I was a photographer for the U.S. Navy for 6 years. During that time I recall a course I took on journalistic writing. One of the principle that carried over to design was the idea of writing the most important facts of the story at the top. This would allow different editors to truncate the text to fit the publication without losing the main points of the story. Readers could also read the first couple of paragraphs, learn the facts, and decide whether the rest was interesting enough for them. The first couple of sentences hook the reader, do not burry it at the bottom of the page. In your case, display the win at the top. If readers have time, they will dig deeper, do not make them search for it.
Designer are story tellers too
You have to think about getting hired as companies view the entire customer experience. That includes your resume, portfolio, and in-person contact. Think about it the same way you would think about the experience when designing a product. The experience in the customer journey starts the second someone makes any kind of contact with the business. Where are the touch points of your relationship with your user? Design each one of those and view it as a wholistic user experience. Marketers speak of customer journeys and sales of the sales funnel. Designers think of it as the user journeys. What journey are you taking your future hiring manager through and what story are they hearing of you from that journey?
Iterate every part of the journey
It would be accurate to say that a product is never done. There is always something to improve. The same is true for your resume, portfolio, and the rest of our online presence as a candidate for a position. Optimize that experience. When the interview didn’t go well ask why. Most managers would be glad to provide feed back. As for specifics. What made them want to call you? What in particular made them not want to move forward? Iteration is in the DNA of the designer, do not overlook it when you are searching for a new opportunity.
Our experiences are never straight forward. Think about optimizing as a way of depositing good or bad feelings in the minds of those looking at you as a candidate. Every single step that is pleasant adds a positive feeling towards your account in the bank of their minds. An easy to read resume adds a positive point. Working links add positive points. Your website being broken withdraws from the account. Help make users make positive deposits as much as possible. If you find a negative experience, iterate. That’s what designer do!