Landing Page Adobe Xd

Posted onby admin

This design is a great decision, if you want to create landing page for your business or agency in the modern way. This Adobe XD template is perfect for a website project of Wordpress, Drupal, Silverstripe and other systems. Design a landing page experience with Adobe XD and Photoshop Learn how to design a landing page in Adobe XD and leverage assets from Adobe Photoshop. Start by quickly creating a wireframe in XD and see how simple it is to include and edit content from Photoshop within XD.

  1. Unlimited downloads of email, newsletter and landing page templates. Create better projects faster with unlimited downloads of WordPress Themes, plugins, video templates & more. Millions of creative assets from $16.50/m. Go to Envato Elements.
  2. Landing Page Design is the first thing that catches the user's eye in a website and i am going to make it the best. I make Website Landing Pages on Adobe XD. I use Photoshop aside of Adobe XD for better quality of Website design. The Adobe XD file will be layered perfectly. Feel free to present your Landing Page idea if you have in mind.

Designers by nature are focused on creating products and experiences that create delight. Beyond and in pursuit of that goal, there are other considerations to be made, particularly if you’re designing a website or landing page. One thing to consider is the structure of your site, both the information architecture and design layout.

A website’s structure can be defined as the structural projection of an informational space that provides intuitive content access. In particular, a website’s structure is important when designing a systematic approach to the process of developing proper navigation.

For instance, assume that you run a store that sells books and albums, but they’re all piled together in one place. In order to find something to purchase, your customers have to go through every book or album to find what they need. More than likely, your customer is going to leave your store and never come back. Customers (and your users) prefer stores (and websites) that are properly organized. One tool you can use to organize information on your site is a proper structure.

What is a website structure, and why is it needed?

A website’s structure helps to form understandable, discoverable, and predictable patterns. A proper website structure helps the site’s visitors find information easily though consistency. Users feel satisfied when they find information quickly, and a solid and relatable structure is essential to the usability of the website. In fact, UX designers can solve broader issues in UI design and usability through good website structuring.

Good website structure is necessary for grouping and cataloging content. When considering potential architectures, designers can typically choose from either a top-down or bottom-up approach based on their users’ needs and business goals.

  • Top-down approach – A top-down approach focuses first on general categories of the content. Designers can logically divide the content by gradually breaking it up into categories. This can help inform the taxonomy or hierarchical structure of the website.
  • Bottom-up approach – The bottom-up approach is, as you can probably tell, the opposite of the top-down approach. Where the top-down approach focuses on cataloging content into categories, the bottom-up approach focuses first on creating a structure based on the content that is available for the website by grouping the elements into categories of the lowest level first and in turn grouping these categories into higher level ones.

Is there an ideal site structure?

As UX designers, we look for the most ideal site structure when designing a new site based on the needs and business goals of our users. The ideal website structure can be looked at like a pyramid. It consists of a home page, categories, subcategories, and individual posts and pages.

  • Home page – The home page is at the top of the pyramid. It acts as a hub for the visitors of your site. Designers should link to critical or popular pages from the home page. In doing so, designers will be able to more easily guide users to the most important pages.
  • Categories – Categorization is a valuable part of a website’s structure. Designers can help users make decisions faster and easier with good categorization. Designers can use categories to reduce the amount of time spent considering a decision
  • Subcategories – These play a major role in defining a website’s structure. For example, online marketplaces like eBay and Amazon have a nearly unfathomable number of pages. It would be easy for a user to get lost in the information provided. Subcategories provide a structured methodology for browsing and categorizing information in a meaningful manner, especially for websites with complex data.
  • Individual posts and pages – Individual posts and pages are the basic elements of a website. Designers should focus on how to create a meaningful information hierarchy within every page, so the user has less to consider when it comes to consuming content.

Types of website structures

There are four main types of website structures. Having a proper understanding of website structures makes it easier for designers to create a meaningful website information architecture. Let’s look into them one by one.

Hierarchical model

The hierarchical model is one of the most common types of site architecture. The hierarchical model is often used in web applications that contain a large amount of data. The hierarchical model is similar to a tree in that it has a trunk (like a homepage) that branches out into categories and pages. Sites like and are great examples of the hierarchical model.

Sequential model

Sequential models are popular when leading users through a sequence like onboarding or new account creation when the user is taken through the process step-by-step. UX designers can use this model to create flows for a process. Individual pages on are strong examples of pages designed with sequence in mind.

Matrix model

The matrix model is one of the oldest site structure types on the internet. This model is unique and non-traditional in its behavior. A matrix-type structure gives users options to choose where they want to go next. These types of sites are best navigated via search or internal links. Wikipedia is a great example of the matrix model.

App Landing Page Adobe Xd

Database model

A database model is a dynamic approach to the website structure. To build a website structure like this, designers should think about the bottom-up approach by considering a page’s metadata and adhering to strong information architecture and taxonomic best practices. and its posts and pages are a great example of a database model.

Why you should start with the site structure

By considering the user’s needs first when beginning a design, UX designers can create a website structure that helps the user rather than standing in their way. A good structure adds to usability and can help improve the site’s overall user experience. Plainly put, a website’s structure helps the designer create delightful user experiences through improved discoverability and intuitiveness.

Related Content

Landing Page Adobe Xd

The Beginner’s Guide to Information Architecture in UX

Learn about the role IA plays in the UX design process here.

6 Ways to Reduce Cognitive Load for a Better UI

Reducing cognitive load helps to reduce users’ confusion as they navigate a site or product.

What is Interaction Design & How Does it Compare to UX?

“Design is not just what it looks like and feels like Design is how it works.” This famous…

The How, and Why, of Creating an Empathetic Design System

It’s incredibly important to create design systems empathetically. Empathy can solve many frustrating problems that may arise during…

As a UX designer, your portfolio is your business card. It shows what you do, how you do it, and how well you can demonstrate it. For most designers, getting started on your portfolio is the biggest challenge and, for many of us, the best way to jump that hurdle is to get some inspiration from other designers.

Here, I’ve compiled a shortlist of some UX design portfolios that I found inspiring, along with some tips to help you show off your work in the best way possible.

Building your portfolio: Where to start

The best approach to creating a stunning portfolio is to blend strategy and design into an iterative process, just like you do in every project you work on. This means you shouldn’t dive straight into building out your website on Webflow or Squarespace, unless you are a website building pro.

Adobe Xd Landing Page Animation

Instead, start with a concept sketch to hone in on how you want your portfolio to look, then move into mid-fidelity to refine your layout, and finally move into high-fidelity adding your color palette and visual elements. This way, by the time you start building the website, you know exactly what you want, where you want it, and how you want it to behave.

Now, let’s dive into a few common UX portfolio styles and some inspiring designers who have put them into practice.

Long-form case study portfolios

Landing Page Adobe Xd

Long-form case study portfolios are an industry classic that we all know and love. They allow us to fully demonstrate our design thinking and show off all our design artifacts. While case study portfolios are one of the most common forms of doing this, they are also the most difficult to do well because you have to make each part of your design process as clear and detailed as possible without going on for too long.

The key to getting this type of portfolio right is to take a hard look at your process and focus on the most influential parts. Where in the project did you learn the most? Which artifacts gave you an “Aha!” moment? What was the most crucial problem you attempted to solve? Remember to streamline as much as possible and design for scanning, so that the person viewing your design portfolio stays interested and engaged all the way through.

Nan Wang, senior UX designer at Rokid Inc., does an amazing job at this – of balancing the needs of a case study portfolio. Each project page has its own look and feels customized to the product and the case studies are balanced with text and imagery. With Nan’s portfolio, you feel like you’re being immersed into each project and you simply want to learn more about each product.

Another amazing UX design portfolio comes from Bianca Salomon, product designer at Dockwa. Bianca has a passion for clean lines and simplicity that is evident in her UX design portfolio. She fully details her design thinking and shows all of her artifacts in a tidy layout that makes it easy to scan. Bianca is a recent UX bootcamp grad who landed her first role in less than 2 months of graduating. Her portfolio, design thinking, and grit have helped her succeed. You can get to know Bianca better at the Adobe Career Bootcamp, a pre-Adobe MAX day of inspiration and networking, where she will be a panelist sharing her experiences in the UX design world.

Pro Tip: Bianca designed her entire portfolio in Adobe XD before building it out in Webflow.

Specialist portfolios

Landing Page Adobe Xd

These are essentially the, “I know who I am and what I want to do” portfolios, and they come from UX designers who have chosen a specific path. Think of specialized motion designers, UX writers, or AR/VR designers; they work on teams with a variety of specialized designers and can focus highly on their discipline. These portfolios are some of the most inspiring and engaging because they are executed with precision and focus on one aspect of the design process.


This type of UX portfolio is for designers who know exactly what they want to do and have chosen to focus their attention, skills, and energy in that direction. While focused portfolios are best used for specialized roles, we can learn a lot from the way these designers strip down their case studies to focus on the most essential and relevant details. These portfolios can inspire us to find ways to trim out unnecessary details and bring more of ourselves into our case studies.

One of my favorite focused portfolios comes from Anjana Menon, a senior UX writer at Spotify. She offers a simple site with only the essential interactions. Your attention is brought immediately to her work and she guides you through each project with a trimmed down case study focused on her contribution. It’s clean, easy to digest, and very clearly shows you what she brings to each project.

Isa Pinheiro, a senior designer at Hello Monday, has another inspiring portfolio. She hits you immediately with a dramatic and simple interface. Her case studies focus on the design and graphics of her projects with brief, contextual descriptions that speak to her impact on the project. Isa is clearly a designer, through and through, and she makes that abundantly clear through her portfolio.

Minimalist portfolios

A rising trend in the UX portfolio world is the ultra-minimalism seen from some senior designers. Rather than focusing on laying out their design thinking in long, formulaic case studies, they instead focus on simplicity. These portfolios have sleek, pared-down interfaces that link out to the designer’s body of work.

There is a small caveat when it comes to these minimal portfolios, for them to be effective the designer needs to have a good bit of work under their belt and products that have launched or have landing pages. You also have to be relatively sure that your resume and your work can and does speak for itself.

One of my favorite portfolios in this style comes from Kyle Ribant, currently working for Airtable as a designer. The site is beautifully austere with no frills and no fluff. He has created a stunning interface with subtle color transitions, simple interactions, and just a hint of intrigue. Beyond creating an engaging single-page portfolio, he has curated his projects to demonstrate cohesion in style and execution. Each product link leads to a page with similarly intriguing design touches. The simplicity of the portfolio allows his work to take center stage.

Another inspiring minimalistic portfolio comes from Daniel Rodriguez, aka Danny from Miami, who works for Facebook as a product designer in AR/VR. Danny recently transitioned from long-form case studies to the simplified portfolio. His site is clean, easy to navigate, and full of personality. His introduction is one of the most engaging I’ve encountered and every time I read it I wonder what it must be like to be on his team.

Landing Page Adobe Xd Free


Creating a portfolio is a daunting task, luckily we are all part of a global design community from whom we can learn and draw inspiration. When it comes to creating your portfolio, starting your designs in Adobe XD allows you to quickly create interactive portfolios that can be used for job hunting while you build out a site. For portfolio inspiration, check out this curated list of amazing UX portfolios that cover the spectrum from traditional case study layouts to hyper-minimalistic designs.

  • Nan Wang – Senior UX Designer at Rokid Inc.
  • Bianca Salomon – Product Designer at Dockwa
  • Anjana Menon – Senior UX Writer at Spotify
  • Isa Pinheiro – Senior Designer at Hello Monday
  • Kyle Ribant – Designer at Airtable
  • Daniel Rodriquez – Product Designer, AR/VR at Facebook

Related Content

Applying for Design Internships? Here’s How to Nail Your Interviews

Internships can be easier to land, but how you prepare & communicate your value is paramount.

Software Adobe Xd

5 Common Career Paths in UX Design

Learn about 5 common career paths in UX design along with their pros and cons.

Collecting User Feedback: 10 Best Practices

Learn how products become successful by incorporating user feedback into the design process.

Ask a UXpert: How Do You Design for Headless Interfaces?

Adobe Xd Landing Page

User interfaces (UI) have changed dramatically over the last few years. As we access the web on a…