This week I began a site redesign and merge. I wanted to find a way combine my photo portfolio with my code blog. The entire project is split in two. This week I focused on design and planning and next week I will code the site.

Objective:

  • Come up with a design that accommodates my blog, code, and photography
  • create digital wireframe
  • gather content and assets
  • plan for the second portion of the project

Here is a screenshot of the digital wireframe:

Project 2 checklist:

  • [X] gather and edit content
  • [x] complete digital wire frame
  • [x] chose prototype tools
  • [ ] choose css structure
  • [ ] choose fonts, color, and write copy

Assets and content

Code

Writing

  • [x] post about project 52
  • [ ] travel post

Open source resources:

Misc. things to figure out:

  • [ ] jekyll pretty urls
  • [ ] jekyll custom domain
  • [ ] jekyll categories and tags

Lessons learned:

Using Adobe XD to digital wire frame

This was my first experience with Adobe XD and I thought it was pleasant. I have some experience with other Adobe products but I am a novice. Adobe XD is very user-friendly with little learning curve. It made putting my sketch into life very easy and fun.

Refactoring code

I revisited the some of the code of that I’ve done in the past so that I’d be happy with what I am displaying on my new site. Here is what I learned from refactoring code:

Content management (on Jekyll):

My current photography is maintained on WordPress so the several gigs of photos I have are stored in a database.

Managing large files on Jekyll is different. Right now, while I don’t have many files, I can easily store photos at normal size in an assets folder in the project. I am still researching how to handle several large files in the future.