Ultimate portfolio process (part 1)

Hi, there. You're not logged in. So, you must be a visitor. Welcome!

What is this? You are viewing one of our supplemental "Stories." In addition to our core design curriculum, we are constantly building out additional resources. Stories are a collection of real work tasks, design history, UX explorations, and work-throughs. Stories are often off-the-cuff and less concerned with production value.

Everything in this series are things we’ve gone over in detail in the course. But we’re learning a lot! So, you might have missed a few “Ah ha!” moments. Hopefully, this can solidify the concepts through all of the various stages – now that you have more perspective.

Let’s break it down…

We suggest you take notes about the thought process. Does this all make sense? and write down any of your questions so you can clear anything up – that doesn’t.

Part 1

First, you have to know how to create a valid HTML document. You’ll need to know about files paths and link up a stylesheet too.

Even at this very humble stage, you could create a very effective business card site or a site for a business. It turns out that most projects require more humanity and time spent thinking than they do – code.

Part 2

At some point, your content will grow and you’ll want to break it up into pages. This way you can direct people to the specific content. And then they can navigate the pages as they wish. It’s interactive! And hey, no JavaScript needed 😉

Part 3

Once you get a bunch of pages, there will be a lot of repetition. You’ll be creating a lot of tech debt if you copy and paste the majority of the pieces to each page.

This is the phase where you’ll use some system to break your code into some smaller partial files. In this case, we used MAMP and PHP. But you might use Node or anything else that does the job the way you want it to. It was also time to get this thing into version control.

Part 4

Depending on your goals and content, the site will ask for some consistent structure. Header and footer partials are one-offs, but it’s likely that your pages will be made up of many reused modules across the site. Keeping the modules decoupled will help you in all of the ways.

Part-5

Breaking the actual files up into pieces is one thing, but how do you get unique dynamic data into them, so they are reusable? In the case of a serverside scripting language like PHP, it’s going to read the program from top to bottom.

Part 6

There are many ways to structure a site. You can always make it look wild and get super graphic with it, but under the hood, you need clear structured data. How do you plan for both? Also, how to you style the sections and modules based on their context? How can you layer the CSS to have the most control with the least mess?

Part 7

So far, CSS has just sorta happened as we went. But we already have a nice set of base CSS that we’ve been maintaining. You don’t need to write everything for every project / from scratch – every time.

Part 8

There are only about 20 files so far, but there are going to be a lot more. So, it’s time to make a plan about how to organize those. You can always change the plan later, but it’s a lot harder to change from a “not plan” to a plan – than it is to change from one solid plan to another solid plan.

Part 9

Working to the type patterns in place. Also getting the specific module style files in place.

Part 10

Adding a dynamic list of project cards. Multi-dimensional associative arrays and iterating over them. Plus: what is a component?

That’s the first 10

So, prove you can do those things, and we’ll give you the next 10!