-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
267 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <section class="py-20"> | ||
| <div class="container mx-auto mb-16 px-4"> | ||
| <div class="mx-auto max-w-xl text-center lg:max-w-2xl"> | ||
| <div class="mb-2 flex items-center justify-center"> | ||
| <a class="text-xs text-indigo-500" href="#">Home</a> | ||
| <svg class="mx-1 h-3 w-3 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | ||
| </svg> | ||
| <a class="text-xs text-indigo-500" href="#">Blog</a> | ||
| <svg class="mx-1 h-3 w-3 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | ||
| </svg> | ||
| <a class="text-xs text-indigo-500" href="#">Article</a> | ||
| </div> | ||
| <h2 class="font-heading mb-6 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2> | ||
| <div class="flex items-center justify-center"> | ||
| <div class="mr-6"> | ||
| <img class="h-16 w-16 rounded-full object-cover" src="https://shuffle.dev/plain-assets/images/indigo-500-avatar.png" alt="" /> | ||
| </div> | ||
| <div> | ||
| <h3 class="font-heading text-2xl font-bold">Danny Bailey</h3> | ||
| <p class="text-lg text-indigo-500">February 26, 2021</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="mb-12 h-96 lg:mb-16"> | ||
| <img class="h-full w-full object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" /> | ||
| </div> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="mx-auto max-w-2xl"> | ||
| <p class="mb-6 text-lg leading-loose text-gray-500 lg:mb-8 lg:text-xl lg:leading-relaxed">Building websites from wireframes that I had received. Some of those questions were:</p> | ||
| <p class="mb-6 text-lg leading-loose text-gray-500 lg:mb-8 lg:text-xl lg:leading-relaxed">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p> | ||
| <p class="text-lg leading-loose text-gray-500 lg:text-xl lg:leading-relaxed">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gatheindigo all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <section class="relative py-20"> | ||
| <div class="container mx-auto mb-10 px-4 lg:mb-0"> | ||
| <div class="w-full lg:w-1/2"> | ||
| <div class="flex flex-wrap sm:max-w-lg lg:h-96"> | ||
| <div class="mb-2 flex items-center justify-center"> | ||
| <a class="text-xs text-indigo-500" href="#">Home</a> | ||
| <svg class="mx-1 h-3 w-3 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | ||
| </svg> | ||
| <a class="text-xs text-indigo-500" href="#">Blog</a> | ||
| <svg class="mx-1 h-3 w-3 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | ||
| </svg> | ||
| <a class="text-xs text-indigo-500" href="#">Article</a> | ||
| </div> | ||
| <h2 class="font-heading mb-8 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:mb-2 lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2> | ||
| <div class="flex items-center justify-center"> | ||
| <div class="mr-6"> | ||
| <img class="h-16 w-16 rounded-full object-cover" src="https://shuffle.dev/plain-assets/images/indigo-500-avatar.png" alt="" /> | ||
| </div> | ||
| <div> | ||
| <h3 class="font-heading text-2xl font-bold">Danny Bailey</h3> | ||
| <p class="text-lg text-indigo-500">February 26, 2021</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="h-96 lg:absolute lg:right-0 lg:top-0 lg:mt-20 lg:w-1/2 lg:pl-8"> | ||
| <img class="ml-auto h-full w-full object-cover lg:rounded-l-xl" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" /> | ||
| </div> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="mx-auto max-w-2xl pt-12 lg:pt-20"> | ||
| <p class="mb-6 text-lg leading-loose text-gray-500 lg:mb-8 lg:text-xl lg:leading-relaxed">Building websites from wireframes that I had received. Some of those questions were:</p> | ||
| <p class="mb-6 text-lg leading-loose text-gray-500 lg:mb-8 lg:text-xl lg:leading-relaxed">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p> | ||
| <p class="text-lg leading-loose text-gray-500 lg:text-xl lg:leading-relaxed">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gatheindigo all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <section class="py-20"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="mx-auto mb-16 max-w-2xl text-center"> | ||
| <div class="mb-2 flex items-center justify-center"> | ||
| <a class="text-xs text-indigo-500" href="#">Home</a> | ||
| <svg class="mx-1 h-3 w-3 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | ||
| </svg> | ||
| <a class="text-xs text-indigo-500" href="#">Blog</a> | ||
| <svg class="mx-1 h-3 w-3 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | ||
| </svg> | ||
| <a class="text-xs text-indigo-500" href="#">Article</a> | ||
| </div> | ||
| <h2 class="font-heading mb-6 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2> | ||
| <div class="flex items-center justify-center"> | ||
| <div class="mr-6"> | ||
| <img class="h-16 w-16 rounded-full object-cover" src="https://shuffle.dev/plain-assets/images/indigo-500-avatar.png" alt="" /> | ||
| </div> | ||
| <div> | ||
| <h3 class="font-heading text-2xl font-bold">Danny Bailey</h3> | ||
| <p class="text-lg text-indigo-500">February 26, 2021</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="h-96"> | ||
| <img class="h-full w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" /> | ||
| </div> | ||
| <div class="mx-auto max-w-2xl pt-12 lg:pt-16"> | ||
| <p class="mb-6 text-lg leading-loose text-gray-500 lg:mb-8 lg:text-xl lg:leading-relaxed">Building websites from wireframes that I had received. Some of those questions were:</p> | ||
| <p class="mb-6 text-lg leading-loose text-gray-500 lg:mb-8 lg:text-xl lg:leading-relaxed">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p> | ||
| <p class="text-lg leading-loose text-gray-500 lg:text-xl lg:leading-relaxed">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gatheindigo all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <section class="py-20"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="max-w-2xl mx-auto"> | ||
| <h2 class="mb-8 text-3xl font-bold font-heading text-gray-900">When I was a developer, I often had a hundindigo questions when</h2> | ||
| <p class="mb-6 lg:mb-8 text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">Building websites from wireframes that I had received. Some of those questions were:</p> | ||
| <p class="mb-6 lg:mb-8 text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p> | ||
| <p class="text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gatheindigo all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p> | ||
| </div> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <section class="py-20"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="h-96 mb-16"> | ||
| <img class="w-full h-full object-cover rounded-lg" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt=""> | ||
| </div> | ||
| <div class="max-w-2xl mx-auto text-center"> | ||
| <div class="flex mb-2 items-center justify-center"> | ||
| <a class="text-xs text-indigo-500" href="#">Home</a> | ||
| <svg class="w-3 h-3 mx-1 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | ||
| </svg> | ||
| <a class="text-xs text-indigo-500" href="#">Blog</a> | ||
| <svg class="w-3 h-3 mx-1 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | ||
| </svg> | ||
| <a class="text-xs text-indigo-500" href="#">Article</a> | ||
| </div> | ||
| <h2 class="mb-6 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2> | ||
| <div class="flex items-center justify-center"> | ||
| <div class="mr-6"> | ||
| <img class="w-16 h-16 object-cover rounded-full" src="https://shuffle.dev/plain-assets/images/indigo-500-avatar.png" alt=""> | ||
| </div> | ||
| <div> | ||
| <h3 class="text-2xl font-bold font-heading">Danny Bailey</h3> | ||
| <p class="text-lg text-indigo-500">February 26, 2021</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="max-w-2xl mx-auto pt-12"> | ||
| <p class="mb-6 lg:mb-8 text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">Building websites from wireframes that I had received. Some of those questions were:</p> | ||
| <p class="mb-6 lg:mb-8 text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p> | ||
| <p class="text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gatheindigo all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p> | ||
| </div> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <section class="py-20"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="max-w-2xl mx-auto"> | ||
| <h2 class="mb-8 text-3xl font-bold font-heading text-gray-900">When I was a developer, I often had a hundindigo questions when</h2> | ||
| <p class="mb-6 lg:mb-8 text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">Building websites from wireframes that I had received. Some of those questions were:</p> | ||
| <ul> | ||
| <li class="flex mb-4 items-center"> | ||
| <span class="flex-shrink-0 flex mr-4 items-center justify-center w-8 h-8 bg-indigo-500 rounded-full text-white font-bold font-heading">1</span> | ||
| <h3 class="text-2xl">How will this design scale when I shrink the browser window?</h3> | ||
| </li> | ||
| <li class="flex mb-4 items-center"> | ||
| <span class="flex-shrink-0 flex mr-4 items-center justify-center w-8 h-8 bg-indigo-500 rounded-full text-white font-bold font-heading">2</span> | ||
| <h3 class="text-2xl">What happens when this shape is filled out incorrectly?</h3> | ||
| </li> | ||
| <li class="mb-6 flex items-center"> | ||
| <span class="flex-shrink-0 flex mr-4 items-center justify-center w-8 h-8 bg-indigo-500 rounded-full text-white font-bold font-heading">3</span> | ||
| <h3 class="text-2xl">What are the options in this sorting filter, and what do they do?</h3> | ||
| </li> | ||
| </ul> | ||
| <p class="mb-6 lg:mb-8 text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p> | ||
| <p class="text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-500">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gatheindigo all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p> | ||
| </div> | ||
| </div> | ||
| </section> |
Oops, something went wrong.