My (Simple) Workflow To Design And Develop A Portfolio Website

Advertisement

Please notice that this article is targeted at newcomers to the industry rather than seasoned designers and developers. The point of the article is to provide a general guide to building meaningful, future-friendly websites today, including strategies, techniques and tools that most Web designers are used to today. — Ed.

A long time ago in a galaxy far, far away… a young designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take in order to stand proud with their peers in this wide world we call the Web. Yes, I’m talking about creating your own portfolio website.

I recently redesigned my own portfolio website1. It was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represents my personality and displays my design work in detail, while of course serving as a promotional medium to gain more exposure and business.

Behind the scenes look at my design and development workflow.2
A look behind the scenes of my design and development workflow

After receiving a bunch of emails asking me about the design decisions I made during the redesign of my website, I decided to write this article to give a peek at my journey and some of the things I learned along the way. I’ll discuss best practices in modern Web design and go through the entire design and development workflow that I followed to create my website, from the initial planning stage to the final live website, including these steps:

  • project planning,
  • branding,
  • wireframes,
  • responsive design and flexible grids,
  • LESS and SASS,
  • high-definition screens,
  • flexible images,
  • content animation,
  • WordPress development,
  • testing and analytics.

I hope this helps and inspires other designers out there who are looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.

Plan The Project

Define Your Brief

The first thing I do with any project is figure out exactly what I want to achieve, and I write it down. What is the purpose of the project? What problem am I trying to solve? My goal was to create an online profile to promote my design work and gain more exposure. I needed to be able to write articles, display my design work and have people contact me easily. I also wanted it to be unique and memorable, while representing my personality.

At this point, we simply need to figure out our ultimate goal; we’re not worried about how we will get there. Write down your goals, and look back at them in later stages of the project to ensure that you’re on track.

Initial Research and Idea Generation

Do some initial research to get the creative juices flowing. Inspiration can come from anywhere and can strike at any time, often while you’re in bed and on the verge of falling asleep (with, of course, not a notebook in sight). Sometimes you might want to look at other sites for inspiration, but sometimes not looking at what other designers have done is best, because once you’ve seen it, thinking of your own ideas can be hard.

Instead, make a cup of tea, find a comfortable spot and brainstorm your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully, you’ll come up with something innovative that hasn’t been done before. You can employ plenty of methods to generate ideas3. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain aspect of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.

portfolio of justin aguilar4
Justin Aguilar illustrates his workspace in his portfolio.

portfolio of meng to5
Meng To gets straight to the point with his case studies.

portfolio of stephen burgess6
Stephen Burgess is a developer but shows a great understanding of design and UX with his unique website.

After some initial research, I wrote down a few ideas and elements to include in my portfolio:

  • My skill set is a mix of both coding and design, and I wanted this to be prominent.
  • I’m a big fan of minimalist design and wanted to stick with a mainly black and white palette to allow the design to shine through.
  • I wanted to use my own photo as a hero image to inject some personality into the website.
  • I enjoy the experience of seeing animation as I scroll down a page.
  • I’ve never liked the way in which one Web page jerks to another, so I wanted my transitions to be smooth.
  • I like a generous amount of white space and a full-width layout.
  • Responsiveness is important to me because I want mobile and tablet users to also have an optimal experience.
  • I wanted my case studies to tell a story about my design process, rather than just be a gallery of random images without context.

Create a Timeline

Once your ideas are together and you know which direction to head in, draw a rough timeline. I’m not talking about strict deadlines or anything, but more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks that you need to do, and estimate the amount of time each will take. This will give you a rough estimate of how long the project will take, as well as create a task list to work from. Of course, some of your estimates might be a little off, but that’s fine; you can adjust the timeline as you go. A bit of organization goes a long way, so get into this habit.

Design

Design Your Brand

Your brand is basically the visual language that describes who you are and that determines how others see you. I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials, using a minimal black and white palette. I sketched some ideas and experimented with typography and letter arrangement before deciding on the final logo (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo, you might want to read “A Systematic Approach to Logo Design7.”

adham dannaway logo design8
My final logo design

As part of my branding, I also wanted to design an avatar for my website and various social media platforms. It would need to represent me as a designer and developer, while being unique and memorable. After countless hours of brainstorming (more like procrastination), I finally had an idea that makes sense. The idea was to take a photo of my face and cut it in half. One side would depict the creative designer in me, while the other would show my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the concept. I used pastels, grunge-style brushes and masks to achieve the aesthetic I was after.

adham dannaway avatar concept9
My final avatar

Create Content

Many designers leave content creation until the end because they’re more interested in layout and aesthetics (the fun stuff). Create content early on in the project because it will determine the design. What information do you need to convey to visitors? Think about what you want to say and how to say it. Should a given point be written as simple text, or would it make more sense as an image or diagram?

Be concise and friendly in your copy. I like to write in the first person to make it feel more personable. Break your copy into small chunks to improve readability and scannability. I wrote a draft of my content and broke it down into six main parts: home page introduction, a bit about me, places I’ve been featured, my design work, my blog, and my contact details.

Show Your Work

Your work is the most important piece of content in the portfolio because it is what most visitors have come to see. Gather your best projects, and explain the process and workflow behind each. Nothing is worse than a vague portfolio of random images with no context or explanation. Including only the type of work you’re looking to do more of, rather than all of your work, will help you target the right clients.

Your potential customers will want to see your work in as much detail as possible, so don’t shrink it to a small size. I decided to keep the actual sizes if possible to make it easy for visitors to quickly navigate my work. I also decided to talk about the challenges I encountered and how I tried to solve them. Design is all about solving problems, so letting visitors know why a design looks and works the way it does is very useful, and it also gives you an opportunity to reflect on your work and your design process and perhaps improve it next time. Remember that you’re telling a story, so it’s been important to me to make it as interesting and informative as possible.

portfolio case study10
Soft Facade has beautiful, in-depth case studies.

Now that our content is figured out, we can move onto sketching wireframes.

Sketch Wireframes

The approach I take to wireframes is simple but effective, and all you need is a pen and sketchbook. I first list all of the elements to include on a Web page. I then group related elements, before prioritizing these groups according to importance. Here is my list of elements for the contact page.

wireframe elements list11
List of elements for my contact page

Once the page’s elements are grouped and prioritized, arranging them on the page will be much easier. Place more important elements towards the top of the page, and use white space to create groupings. I took a desktop-first approach because I wanted to focus on displaying my work in detail on large screens. When we come to write the CSS later on, we’ll take a mobile-first approach, which will simplify the code (we’ll get to that shortly). I usually sketch my wireframes with pen and paper, but you can use tools such as Balsamiq12 or even Photoshop or Illustrator. Below is a wireframe for my contact page. It doesn’t need to look pretty — it’s simply a plan of a Web page to work from.

contact page wireframe13
Contact page wireframe

Responsive Design and Flexible Grids

I wanted to make my website responsive to ensure an optimal experience for visitors on desktop, tablet and mobiles. When designing websites, I like to use a grid because it provides a structural foundation, while making the development process easier and more efficient. Joshua Mauldin sums up a grid14 pretty well:

Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along.

Some designers find a grid to be limiting, but it really depends on the design. I find that it results in a neater and more organized design. My design is quite simple, so I used a custom 12-column flexible grid, but a 16-column grid would give more definition and accuracy. I also defined a maximum width of 1040 pixels to ensure that the design doesn’t look stretched on larger monitors.

Using a flexible grid (rather than three separate fixed widths for mobile, tablet and desktop) enables a website to scale dynamically to fit any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit the design. Use tools such as Gridpak15, Responsive Grid System16, Golden Grid System17 and Responsify18 to create your own responsive grid. I’ve used ideas from a few of these tools to create my own custom flexible grid.

/* 12-column responsive grid */

.row {
    clear: both;
    max-width: 1040px;
    margin: 0 auto;
}

[class^="col-"] {
    float: left;
    margin: 0 3.84615384615% 0 0;
    list-style: none;
    position: relative;
}

[class^="col-"]:last-child {
    margin: 0;
}

.col-1 { width: 4.8076923077% }
.col-2 { width: 13.4615384615% }
.col-3 { width: 22.1153846154% }
.col-4 { width: 30.7692307692% }
.col-5 { width: 39.4230769231% }
.col-6 { width: 48.0769230769% }
.col-7 { width: 56.7307692308% }
.col-8 { width: 65.3846153846% }
.col-9 { width: 74.0384615385% }
.col-10 { width: 82.6923076923% }
.col-11 { width: 91.3461538462% }
.col-12 { width: 100%; margin: 0 }

Upon looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector19, and all it does is select any class that begins with the string col-. You can also use substring matching to select other attributes that end with a certain string, or even those that contain a certain string. Substring matching is a handy way to create more complex and powerful CSS selectors, and they’re well supported20, too, going as far back as Internet Explorer 7.

The HTML is quite simple, too, consisting of rows and columns, much like a table. Here is a simple two-column responsive grid that I use on my website. The left column spans five columns, while the column on the right spans seven.

<div class="row">
    <div class="col-5">Content spans five columns</div>
    <div class="col-7">Content spans seven columns</div>
</div>

Set Logical Breakpoints

When you design a responsive website, at certain widths the layout will break or the text will become squished and difficult to read (45 to 75 characters21 is a comfortable length per line). These special widths are known as breakpoints, and they’re often set to common device widths, such as 320 to 480 pixels for mobile, 768 to 1024 pixels for tablets, and 1024 pixels and up for desktops. The problem is that “common” widths don’t really exist anymore with the growing number of devices, so this solution doesn’t scale well.

Setting breakpoints based on content22 rather than device width is a more scalable solution. For example, rather than blindly setting a breakpoint at 768 pixels wide for tablets, I instead looked at my content and found that it looked fine until it got squashed under 600 pixels. I thus set a breakpoint at 600 pixels to change the layout to ensure that the content remains legible at and below this width. Yes, you will need to optimize the presentation of your website for various devices, but your content should always determine where the breakpoints lie. These are the four breakpoints I needed for my design: 320, 600, 1024 and 1140 pixels.

When writing the CSS media queries for my website, I took a mobile-first approach. This basically meant writing the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally simpler than desktop styles, so writing them first makes sense. They form the foundation of your styles, and we can then add more complex styles for wider screens. Cascading your style sheet in this way keeps your code clean and DRY (“don’t repeat yourself”23).

Here are the media queries I used:

/* Mobile styles go first, without media queries. */

@media only screen and (min-width: 321px) {
    /* Larger mobile styles (wider than 320 pixels) */
}

@media only screen and (min-width: 600px) {
    /* Tablet styles (wider than 600 pixels) */
}

@media only screen and (min-width: 1024px) {
    /* Large laptop styles (wider than 1024 pixels) */
}

@media only screen and (min-width: 1140px) {
    /* Desktop styles (wider than 1140 pixels) */
}

With the breakpoints defined, I could sketch the tablet and mobile wireframes. Sometimes hiding or omitting content on small devices makes sense, but I wanted as much content to be available across all devices as possible. Why should mobile users miss out on valuable content? People are used to scrolling on phones anyway, so think first before you remove or hide content. The easiest solution isn’t always the best one.

Design High-Fidelity Mockups

Once the desktop and mobile wireframes were sketched, I moved into Photoshop and started mocking up the website in more detail. I don’t like spending much time in Photoshop because it slows down the development process. Don’t worry too much about creating a pixel-perfect design; you’ll have time to refine it during the coding process. Instead, simply mock up the main page templates, along with any other design elements and assets you need. I mocked up the header and footer, along with the basic elements of the “About me” page below, to make sure I was happy with the aesthetic.

adham dannaway about me page24
“About me” page mockup

Similarly, I didn’t mock up any mobile or tablet designs in Photoshop, because I find that simply coding these based on the wireframes to be quicker. I did, however, spend some time on details such as icons and textures, which can make a big difference in the polish of the final website.

Develop

Now that our website is planned and all of our image assets are ready to go, it’s time to start coding. So, get your headphones and favorite text editor! My text editor of choice is Sublime Text25. It’s simple, fast, powerful and easy to use. If you’re a Windows user, I’d recommend Notepad++26.

I usually start from the top of the Web page and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first, and then move on to the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of the project, you can either code from scratch or use a framework such as HTML5 Boilerplate27, Foundation28 or Compass3529.

CSS Preprocessors (LESS/Sass)

If you’re not yet familiar with CSS preprocessors such as LESS30 and Sass31, definitely familiarize yourself with them because they’ll save you a lot of time and effort and will streamline your CSS. A preprocessor gives you more power when coding CSS, enabling you to use object-oriented programming practices32 when writing styles.

less sass css pre processors33
LESS and Sass CSS preprocessors

We’ve all wished that we could use variables in CSS, define functions and reuse code snippets without having to continually copy and paste. CSS preprocessors enable you to do that and much more, while keeping your styles clean and organized. Your LESS or Sass code is then compiled and outputted as regular CSS.

I used LESS to create the CSS for my website. However, after experimenting with both LESS and Sass, I feel that Sass is more powerful, so I’ll be sticking with it from now on. Chris Coyier compares LESS and Sass34 and shows the subtle yet important differences between the two. The deciding factor for me was that Sass uses Compass3529 and gives you access to a library of useful and well-maintained mixins; LESS doesn’t. Feel free to play with both to see which you prefer.

Progressively Enhance With Modernizr

Modernizr36 is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5 features, but what happens in older browsers that don’t support them? Modernizr basically tells us which features are supported in the visitor’s browser, allowing us to write conditional CSS and JavaScript for each situation. Thus, we can easily progressively enhance37, providing everyone with basic features, while enhancing the experience for those with modern browsers.

Create Flexible Images

Flexible images are a simple yet important part of any responsive website. To make your images flexible, simply place them in your responsive grid container and add the CSS below to your style sheet. Insert them using the <img> tag, although there are ways to achieve flexible images using CSS background images38, too. If you want to get more technical and serve different images according to the device being used (for example, serving small images to phones to conserve bandwidth), you can look into certain techniques for serving truly responsive images39 and avoiding duplicate image downloading40.

img {
  max-width: 100%; 
  height: auto !important;
}

Use CSS Image Sprites

We all know to combine our icons and image assets into CSS sprites41, rather than leave multiple individual images to load one after another. This decreases loading time and makes it easy for you to edit and maintain image files later on. I usually create several sprites for the different sections of a website. For example, one of my sprites contains all of my icons, while another contains global elements (including logo, header icons, navigation background and footer icons).

When creating sprites, think about how your website will load. If a bunch of icons are only used on a single page of the website, then separate them from the main sprite. This will ensure that they’re loaded only when needed, while keeping your main sprite small. Using sprites will also make it easier to prepare your images for high-definition screens later on. The process can be cumbersome, so use a handy tool such as Sprite Cow42 to create them quickly and easily. You can also use a combination of Sass and Compass to generate sprites automatically from separate images43.

Catering to High-Definition Screens

To ensure that your website looks crisp on high-definition (or “Retina”) screens, use CSS as much as possible for presentation. Remember that some of the newer CSS styles won’t render in old browsers — this is where progressive enhancement makes sense. In most cases, you won’t be able to build the website completely from CSS; you’ll need images. Luckily, preparing your images for high-definition screens is not hard.

Basically, you’ll need to create larger versions of your images to be used on high-definition screens. Because our images are contained in a sprite, all we need to do is create another version of the sprite that is exactly twice as large. Let’s say our sprite is named sprite.png; we would name our high-definition sprite sprite@2x.png. To decrease loading time (especially on mobile devices), compress your images using JPEGmini44, TinyPNG45 or, if you’re on a Mac, ImageOptim46.

retina image47
Simply create another image twice the size of the original for high-definition devices.

Once you’ve created the larger images, simply use media queries to show the large images on high-definition screens. Be careful with your media queries because iPhones aren’t the only high-definition devices around at the moment. There are other mobile phones, along with Retina iPads and MacBook Pros, too. I use two high-definition media queries on my website: the first for high-definition mobile devices, and the second for tablets and laptops.

Here are the media queries to target high-definition screens:

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    /* Target all high-definition screens. */
}

@media 
only screen and (min-width : 600px) and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min-width : 600px) and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-width : 600px) and (min-device-pixel-ratio: 1.5) {
    /* Target high-definition devices with screens wider than 600 pixels. */
}

Wouldn’t it be great if we could eliminate the need for media queries and separate high-definition images altogether? An even better way to cater to high-definition screens is to use images that are vectors, which will scale to fit any screen size and look crisp on any device. You can draw your images or icons in Illustrator and export them as scalable vector graphics48 (SVG) files. The SVG file basically consists of XML-based code that describes the image to the browser.

Another clever way to get scalable vector icons that look crisp on high-definition devices is to use icon fonts49, such as those from IcoMoon50 and Font Awesome51. I didn’t use these methods on my website, mainly because I don’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your website, then these techniques will come in handy.

Page Transitions

I’ve never been a fan of the abrupt way in which one Web page jumps to another. When the user clicks a link, there’s usually a sharp jump, followed by images loading awkwardly on the page in no particular order. I wanted to control the way my content appears, to create a smooth transition from one page to the next as the visitor navigates the website. When a visitor clicks a link to another page, the current page should fade to white before the next page loads. The next page would start from a white background, and then the content would animate smoothly onto the page. This makes for a pleasant and consistent user experience.

To achieve this transition effect, I needed to use a jQuery preloader plugin, such as jPreLoader52 or QueryLoader253. This ensures that images load before being animated onto the page (otherwise, the animations would occur before the images have loaded). When it comes to Web development, jQuery plugins shouldn’t be your first option because you rely on jQuery and it’s a performance hit. It’s always a better idea to search for more lightweight, single-purpose JavaScript libraries and use them instead. You could also use CSS transitions in some cases.

I’m not a fan of preloaders in general because the user has to wait until the page loads to see anything, but using one is necessary to achieve the effect I want. I’m going to experiment with hiding the preloader when the page loads quickly, and introduce it only on long page loads. This means that most people would simply see one page seamlessly fade to the next, without a preloader being shown. I’d be interested to hear of any other methods to achieve page transitions without the need for a preloader.

Here is a simple jQuery function to fade out the page when the visitor clicks a link:

/* 
* Function to animate leaving a page
*/
$.fn.leavePage = function() {   
    
  this.click(function(event){

    // Don't go to the next page yet.
    event.preventDefault();
    linkLocation = this.href;
    
    // Fade out this page first.
    $('body').fadeOut(500, function(){
      
      // Then go to the next page.
      window.location = linkLocation;
    });      
  }); 
};


/* 
* Call the leavePage function upon link clicks with the "transition" class
*/
$('.transition').leavePage();

I want the leavePage animation to happen when visitors click on a link to another page of my website, so I simply added a transition class to the appropriate links. When a visitor clicks on any link with the transition class, the leavePage animation is triggered. This example is simple, but you can build on it for more complex animation.

So, the user has clicked a link, the current page has faded out, and they’ve landed on the next page. What happens now? Our jQuery preloader takes care of the rest. The preloader basically displays an overlay that covers the page as it loads. Once the loading is complete, the overlay fades away to reveal the page. Of course, you can create your own custom animation to animate content onto the page in a more interesting way.

I won’t get into much detail because there are many ways to animate content onto the page. You could slide content in from the side, one element after another, or fade in elements from top to bottom. Basically you just need to write a function to animate content onto the page, and then call this function once the page has completely loaded. Luckily, both jQuery preloaders mentioned above have callback functions that enable you to call an animation function after the page has completely loaded.

Prevent Flash of Unstyled Content

One of the most annoying issues I faced in trying to achieve the smooth transition between pages was the flash of unstyled content (FOUC) before the jQuery preloader had even started. It wasn’t always there, but every now and then I saw some content flash onto the page before the animation had even started. Luckily, I found a clean and simple way to prevent FOUC54 that works perfectly.

Animate Content on Scroll

I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish. I use a simple yet powerful jQuery plugin called Waypoints55 to create the on-scroll animations. It enables you to trigger animations at different page scroll distances.

If you’re looking for an easy way to do more complex animations on scroll, then check out the SuperScrollorama56 jQuery plugin.

Custom WordPress Development

I decided to build my website in WordPress, mainly because I’m familiar with it and wanted blogging functionality. Being able to easily install plugins to add functionality is also a nice time-saver. Installing WordPress on a server57 and turning static HTML pages into a WordPress theme58 is a pretty simple process. If you’re not familiar with WordPress, you could always use another platform, such as Drupal59. Or feel free to just build from scratch in PHP (depending on the complexity of the website).

Because some of my pages have quite varied layouts, I needed a few custom page templates. For instance, I couldn’t use a standard WordPress page for my home page because that design is quite different. So, I created a custom template for the home page. Creating a custom page template in WordPress60 is quite easy. I also created custom templates for my portfolio item pages and contact page.

In order to separate my portfolio item posts from my blog posts, I created a custom post type61 especially for my portfolio items. You might be able to get away with displaying your portfolio items as blog posts and categorizing them in a “portfolio” category, to separate them from standard blog posts. I needed the flexibility of a custom post type with a different layout. I won’t get into any more detail about WordPress development because plenty of great WordPress documentation62 is already out there.

Testing and Analytics

Test Across Browsers

I’m sure you’re all aware of the importance of testing to ensure that your website renders correctly across relevant browsers. You’ll notice that I didn’t say “all browsers,” because you really only need to ensure that your website renders properly for your particular audience. If you know that all of your visitors will be using modern browsers, then you don’t need to spend valuable time and effort supporting old ones.

major browsers63
Test your website on the major browsers.

So, how do you test a website across all relevant browsers? If you’re on a Mac like me, then just download all modern browsers, including Chrome, Safari, Opera and Firefox. But how do you test Internet Explorer on a Mac? One simple and free way is to set up a virtual machine running Windows64.

You can also use an Internet Explorer emulator, such as IE Tester65. Or sign up to a service such as Spoon66 or BrowserStack67, which allows you to test the website on all major browsers, including Internet Explorer 6, 7, 8, 9 and 10. Rather than leave cross-browser testing until the end, test the website every now and then during the development process.

Set Up Google Analytics

Add Google Analytics68 to your website to collect valuable statistics on visitors. You’ll know the location of visitors and whether they’re arriving via Google searches or from referring websites. One of your blog posts could get mentioned on another website; if you’re not monitoring your traffic sources, you might not even know about it. Analytics also help you build a profile of visitors, including their country of origin and browser. You can use this data on an ongoing basis to optimize the website for visitors. Setting up Google Analytics on your website is free and takes only a few minutes. Simply sign up, copy and paste the small JavaScript snippet into the footer of your website, and you’re ready to go!

Time To Launch

So, we’ve designed, built and tested our new portfolio, and we’re finally ready to launch — high five! This is one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my website and learned a lot in the process. Sure, there were hurdles along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences in creating your own portfolio.

Hopefully, hearing about my journey will help and inspire you to create your own website or to finally start that redesign you’ve been contemplating for the past few years. So, get out your headphones, knuckle down, and start pushing those pixels. I wish you all the best on your epic quest ahead. Good luck, and may the force be with you.

(al)

Footnotes

  1. 1 http://www.adhamdannaway.com
  2. 2 http://www.adhamdannaway.com
  3. 3 http://www.mindtools.com/pages/article/newCT_88.htm
  4. 4 http://justinaguilar.com/
  5. 5 http://www.mengto.com
  6. 6 http://www.minimalmonkey.com
  7. 7 http://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2013/06/adham-dannaway-logo-design.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2013/06/adham-dannaway-half-face_mini1.jpg
  10. 10 http://www.softfacade.com/
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2013/06/wireframe-list.jpg
  12. 12 http://www.balsamiq.com/
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2013/06/contact-page-wireframe.jpg
  14. 14 http://fireworks.smashingmagazine.com/2013/05/02/ios-grid-system-free-extension-adobe-fireworks/
  15. 15 http://gridpak.com
  16. 16 http://www.responsivegridsystem.com/
  17. 17 http://goldengridsystem.com/
  18. 18 http://responsify.it/
  19. 19 http://www.impressivewebs.com/css3-attribute-selectors-substring-matching/
  20. 20 http://www.impressivewebs.com/browser-support-css3-selectors/
  21. 21 http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
  22. 22 http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
  23. 23 http://en.wikipedia.org/wiki/Don't_repeat_yourself
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2013/06/Adham-Dannaway-about-me-large_mini1.jpg
  25. 25 http://www.sublimetext.com/2
  26. 26 http://notepad-plus-plus.org/
  27. 27 http://html5boilerplate.com/
  28. 28 http://foundation.zurb.com/
  29. 29 http://compass-style.org/
  30. 30 http://lesscss.org/
  31. 31 http://sass-lang.com/
  32. 32 http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2013/06/less-sass-css-pre-processors.jpg
  34. 34 http://www.css-tricks.com/sass-vs-less
  35. 35 http://compass-style.org/
  36. 36 http://modernizr.com/
  37. 37 http://alistapart.com/article/understandingprogressiveenhancement
  38. 38 http://kimili.com/journal/the-flexible-scalable-background-image-redux
  39. 39 http://css-tricks.com/which-responsive-images-solution-should-you-use/
  40. 40 http://www.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/
  41. 41 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-CSS-sprites-techniques-tools-and-tutorials/
  42. 42 http://www.spritecow.com/
  43. 43 http://www.codechewing.com/library/automatically-generate-css-sprites-with-sass/
  44. 44 http://www.jpegmini.com/
  45. 45 http://tinypng.org/
  46. 46 http://imageoptim.com/
  47. 47 http://www.smashingmagazine.com/wp-content/uploads/2013/06/retina-image.jpg
  48. 48 http://css-tricks.com/using-svg/
  49. 49 http://css-tricks.com/html-for-icon-font-usage/
  50. 50 http://icomoon.io/
  51. 51 http://fortawesome.github.io/Font-Awesome/
  52. 52 http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/
  53. 53 http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
  54. 54 http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content
  55. 55 http://imakewebthings.com/jquery-waypoints/
  56. 56 http://johnpolacek.github.io/superscrollorama/
  57. 57 http://codex.wordpress.org/Installing_WordPress
  58. 58 http://codex.wordpress.org/Theme_Development
  59. 59 http://drupal.org/
  60. 60 http://codex.wordpress.org/Page_Templates#Custom_Page_Template
  61. 61 http://www.smashingmagazine.com/2012/11/08/complete-guide-custom-post-types/
  62. 62 http://codex.wordpress.org/
  63. 63 http://www.smashingmagazine.com/wp-content/uploads/2013/06/major-browsers.jpg
  64. 64 http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/
  65. 65 http://my-debugbar.com/wiki/IETester/HomePage
  66. 66 http://spoon.net/
  67. 67 http://www.browserstack.com/
  68. 68 http://www.google.com/analytics

↑ Back to topShare on Twitter

UI Designer and Front-End Developer at Campaign Monitor, Co-founder of Growth Giant, writer, Jedi Master and trance music lover. Follow me on Twitter, Facebook, Dribbble and check out my website.

Advertising
  1. 1

    Awesome post here Adham!

    Although I’m totally new to design and coding I feel that I’ve already picked up a lot of bad habits in terms of handling projects, this post has actually inspired me to stop those bad habits now!

    I’m going to force myself to take a more logical and effective approach to future projects from now, as I can clearly see it benefited you greatly on creating your portfolio site.

    Thanks again for the amazing article!

    5
    • 2

      Thanks Joe, glad to hear that you’re inspired to change. I agree that it definitely helps to have a process to follow when creating any type of website. A lot of the techniques discussed here are quite simple but I think they do help in building a strong foundation for any web designer.

      0
  2. 3

    Very nice post. There is far to few articles likes this where people share their process and their thoughts while working on projects.

    One thing I saw is that your media queries for high resolution devices are a bit outdated. The `-webkit` version is fine but other vendors now use `min-resolution: 144dpi` (as equivalent of `-webkit-min-device-pixel-ratio: 1.5`). There is a pretty good blog post about it here: http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/

    Cheers

    0
  3. 5

    Adham! Dude wonderful article! Seeing as how I’m currently designing and developing my new portfolio site with some developer friends of mine I couldn’t agree more with so many points that you make in this article! Not only is the article a great look at what goes on behind the scenes of a “portfolio” site but it’s wonderfully written in a very easy to understand way. Kudos on that!

    I also wanted to say that I can’t agree more about creating the content for your site first! I sketched out the “design” of each page and then when I went to implement those sketches and ideas into PS I noticed that I had not accounted for the work itself being displayed and what that might be as well as the about page content – how was I going to display that and what was that content actually going to be? For anyone designing a new site for yourself or a client, please think about the content and the layout/design/context of it for multiple pages and not just the homepage! It will save you time and frustration later.

    Thanks again for the insight Adham – good stuff!

    10
    • 6

      No worries Lucas, good luck with your portfolio site design, looking forward to seeing it :-)

      5
    • 7

      Dear Adham,
      I am a newbie in web design. and i find your post awesome and inspiring.
      thanks. it will benefit be immensely in my new venture.

      Paul
      from India

      0
  4. 8

    Okay? All you’re doing is describing how to building and brand a website. Any professional should know this process like the back of their hand. Articles like this is why our industry is losing its values. This why every other human being thinks they’re UI or web designer. Because they read nonsense like this and then go post a ‘pretty picture’ on Dribbble.

    -143
    • 9

      Ole Fredrik Lie

      June 26, 2013 12:22 pm

      Oh please. All you’re doing is being negative. Comments like this makes absolutely no sense. Looking forward to reading your super top draw high quality posts, Sam. Keep ‘em coming!

      15
    • 10

      Did you even read the “Title” of the article? This is HIS workflow. If you use a different workflow, that’s YOURS!

      The first sentence of this article says this is for “New Comers” to the industry. NOT Veteran developers.

      1
  5. 11

    Great article Adham (cool name BTW)! I’m just starting out with front-end development, and this article has been eye opening. I always have wondered how much time and effort creating a cool responsive website like yours would take, and this is just what I needed.
    I’d like to ask you some questions, if you don’t mind.
    1. Did you use a WordPress framework? If so, which one and why?
    2. I was looking in your source, and it’s perfectly organized: CSS at the beginning, JS at the end, very little code bloat. How did you do that? All the WordPress blog I see aren’t as “clean” as yours.
    3. How did you deploy all the HTML5 and CSS3 into your WordPress?

    Thanks!

    1
    • 12

      Hi Ivan,

      Thanks for your comment.

      1. Yes, I implemented my site in WordPress. I actually built the site as a simple functioning PHP website first before deciding to move it into WordPress. I did this as I wanted the power and flexibility to include blogging functionality and other plugins to handle SEO and caching.
      2. Thanks, I created a WordPress theme from scratch based on my original static website. There’s no reason why a WordPress theme has to be any more complicated than a stand alone website with no framework.
      3. WordPress is simply a platform (or CMS) that you can build your website on. You can include whatever CSS/HTML you like and you can build custom templates too if your pages are all unique.

      Hope that helps :-)

      6
      • 13

        Good article. I appreciate getting to see your process. Kudos on your finished site as well.

        “There’s no reason why a WordPress theme has to be any more complicated than a stand alone website with no framework.”

        This has definitely not been my experience. WordPress, like any CMS, has a much larger learning curve than simple static sites. It might not be rocket science, but articles constantly stating how darned easy WordPress is tend to frustrate me.

        Perhaps if you had prefaced statements like that with “at least for me… WordPress is easy”. I could see that. Everyone has their own areas of intelligence and skill. To someone struggling with learning PHP and the ins and outs of WordPress the description of “easy” doesn’t cut it. ;-)

        I am certainly not a programmer and do not have any desire to be one. But I have been sold WordPress by so many articles describing it as “easy” that now I’m in too deep to quit, but so frustrated with it that I can’t stand my day to day work.

        Which brings me to my second point. I thought this was excellent advice:

        “Including only the type of work you’re looking to do more of, rather than all of your work, will help you target the right clients.”

        I’m in a weird situation. Like I say, I have spent so much time and effort trying to get to grips with WP that I want to show that work in a portfolio, at the very least to demonstrate I can learn new skills and software when needed. However, when I try to picture doing more and more work in WP I can feel my blood pressure rising. So, I do wonder if I should just cut my losses and not show my WP sites or throw it in there even if i never want to touch WP again.

        1
        • 14

          Adham Dannaway

          July 3, 2013 1:46 am

          Stick with it Brent, like most things in life, programming starts off being difficult. Once you get the hang of it it starts to get more fun and interesting (it’s always frustrating though!).

          WordPress was designed to be simple for developers to use as a CMS solution. A lot of the hard work is already done for you in the form of themes and plugins, I think that’s what I was getting at.

          Best of luck mate :-)

          0
  6. 15

    How long does it take You to create new site? Thanks for the project steps tips.

    0
    • 16

      Hi Tomas, Implementing the site was the easy part and didn’t take long at all. I think I worked on the implementation for a few weeks in my spare time. The design was what took the longest as it was tough to decide on the look and feel I wanted. The half face avatar concept took the longest to think of, I was brainstorming different ideas on the train to work everyday for at least a month! :-)

      8
      • 17

        Couldn’t agree more. Seems like the design especially doing something from scratch, seems to take longer than development…

        0
        • 18

          For me, the design always takes longer. Once I know what I’m going to build it’s usually a pretty quick process from there.

          0
      • 19

        Hehe, that is exactly my problem now. :) I love your parallax avatar image at the beginning and I want to use parallax for my avatar as well, but I don’t want to copy your design, so it is now time to brainstorm and this s for me quite a challenge. I’ll probably start a new WordPress theme from scratch but this too is something I never done before even though I am not new to WordPress. I’ve only been working with bought themes and installed plugins. I’ve also been immersed into some tutorials for creating a WordPress theme from scratch, but never really got into creating one of my own. I guess it is now a great time to start. Fortunately my 10 years if web development experience will help me learn faster. :) It’s still challenging in some way.

        Yes, most of your theories and habits are not new to me (as you warned us at the beginning), but I was still missing a detailed description of how you coded the parallax avatar image. I did however went to see your source code to get more insight on your approach and there are some interesting hints. I would really appreciate if you could describe what plugins and what approach you used to create the parallax avatar image.

        Thank you and again, GREAT article!

        0
  7. 20

    I’ve had always some problems porting my html-dummy into a wordpress theme. Specially when using CSS Frameworks and other goodies. Do you have any more tips or tutorials for transforming a rich featured html template into a wordpress theme?

    0
  8. 21

    Great article Adham! I’m currently in the process of updating an old bloated school portfolio with hopes of making the transition into the industry and this article really helped. Thanks for writing it.

    1
  9. 22

    Adham, I was wondering if you only used a custom template in WP or did you use a blank Theme and then customize it ? If so, what did you use ?

    0
  10. 25

    Great article – I find these types of post extremely useful not just to discover how others build their sites but the tools they are using. Makes me feel as though I’m on the right track.

    Quick question Adham – how did you get your jPreLoader to load the darker logo vertically rather than the default horizontal?

    1
    • 26

      Thanks Paul, I’m always interested to see how other designers work too as I think there’s always something new to learn. I actually restyled the jPreLoader a bit to use my logo instead of the default horizontal line. I basically used a sprite which contained 2 images of my logo, one black and the other was light grey. I placed the black logo in a div on top of the grey one. I then altered the jQuery function to change the height of the black logo div based on the loading percentage. If you inspect my code you should be able to see exactly what I did. Hope that helps :-)

      1
  11. 27

    Hi Adham!
    I read the article and liked very much. I’m totally new to design and coding. At this time I’m designing my online portfolio from scratch and I was looking for some information and inspiration, lucky me I ran into you. I´ve learned some interesting things about you and design by reading this article. Despite the fact that I’m a Sith Lord please consider to me an apprentice of your teachings and a devoted follower of your work, hehe!
    Keep up the good work! Greetings from México.
    P.S. Sorry about my english!

    1
  12. 28

    Brilliant, hope you spoil us more often with some great articles!

    2
  13. 29

    In fact, I would rather that I had seen a flash of unstyled content than complete blank for seconds or even minutes :(

    4
    • 30

      I’ll definitely be looking into removing the preloader and making the page to page transitions faster. Thanks :-)

      0
  14. 31

    And, another thing I want to say is that, I think history.pushState or the like could be of some help when navigating between pages without actual page reload, and with the help of Ajax and something else, we could make the page transition more fluid – like what jQuery Mobile has already done.

    0
    • 32

      Thanks for the tip, sounds like a great idea. I’m keen to remove the preloader from my site and figure out a nicer way to do it (because it can get annoying after a while).Thanks

      1
  15. 33

    wonderful article.

    ’bout the grid…
    I don’t know how much you care about IE8 but given it doesn’t support :last-child it may be useful to update the margin so you’ll target :first-child instead, isn’t it? ;)

    0
    • 34

      Hi Fabien, thanks for the feedback, you’re correct. Targeting first-child makes sense although I’m not too worried at the moment as nearly none of my visitors use IE8 (as most of my visitors are designers). :-)

      0
  16. 35

    Great article dude! I know your website for a while now but I see you did some more development to it, great job! I love the smooth animations and the preloader!

    0
  17. 36

    This seems like the process that most people are using that uses best practices where possible, but I have one question. If you are writing proper CSS why do you need the !important on height: auto; on img?

    I used this basic process for my website ( http://johnjacob.ca ) and from this I learned that designing with progressive enhancement is definitely the way to go to avoid headaches with backwards compatibility. Especially when you are doing something different than the norm, such as my site.

    0
  18. 38

    Hi Adham, great job! I really like this article and your website too!
    Quick question.. what decisions about to put only the visual and some recent work in home page?

    When I redesign my portfolio I always want to put inside the home page a very enourmus qty of stuff… what’s your tip?

    Thank you!

    0
    • 39

      Adham Dannaway

      July 3, 2013 1:49 am

      I think sometimes “Less is more” Andrea. You don’t want to put too much on a page because it can dilute the importance of the elements and also confuse your website visitors with choice paralysis. I chose the most important elements to put on my homepage and left it at that.

      0
  19. 40

    Brilliant article. I can’t wait to read more from you.

    1
  20. 41

    Beautifully designed site. Extremely clean and great use of imagery and typography. My criticism is the constant loading per page. It was very frustrating that every action I took required loading time. It took me back to flash era of every page needing to load. I think this is a big usability pitfall and actually discouraged me from continuing through the site. Everything else was well done and I enjoyed how you incorporated jQuery waypoints. While writing this comment I went back to the site two times and the constant loading per page without ever caching is a ship sinker for me and quickly became annoying. Great article though! Thanks for sharing.

    4
    • 42

      Thanks for the useful feedback David, I agree and I’m looking into another way to remove the preloader and speed up the page to page transitions.

      1
  21. 43

    Thank you for this great article! It’s interesting and useful to hear about other people’s workflow.
    Your website looks pretty cool! Love the waypoint animation and the Designer/Coder effect on the homepage! :-)

    But I just don’t like the preloader thing (not the effect itself or the pretty preloader icon :), but the looooong time it takes to fade out and fade in and that everything on the page fades out and in again. Takes too long for me).

    1
    • 44

      Hey Sandra, thanks for the comment. I agree, I’m also not a big fan of the preloader as it does slow down the user experience. I’ll be working on another way to speed up this page to page transition to ensure visitors aren’t waiting to get to the next page. Thanks for the useful feedback :-)

      1
  22. 45

    Wow, this is a really awesome insight to your process. Thanks!

    0
  23. 46

    Everything in one article? What more can you ask for? Awesome stuff, thanks Adham and Smashing!

    0
  24. 47

    Lauhakari Mikko

    June 26, 2013 9:41 pm

    I’m wondering why you recommended Notepad++ for windows users, and not Sublime Text which you use?

    I’m on Windows and use Sublime, works just great :)

    0
    • 48

      I actually started using Notepad++ a long time ago on my PC and I remember it being great, it’s just another alternative to Sublime Text. Good to have options :-)

      1
  25. 49

    Excellent Post. I love this way of presentation. Some times I didn’t read full post, but this post is more interesting. Especially “Create Content” area. Yes, this is exactly correct, we need to collect the data –> grouping –> give them priority –> then positioning all. You are clearly explained about “Create Content”.

    Thanks!

    0
  26. 50

    I was amazed by your site when I first saw him sometimes ago. You wrote that your knowledge of jQuery only 40% I couldn’t belive (especially after I saw your first page). Very interesting what plagin did you use for appearing blocks when you go on about page for example, or did you write it from scratch? Thanks for answer.

    0
    • 51

      Thanks, it’s pretty simple to do animations in jQuery but I think there’s much more to JavaScript than animations. That’s why I still think I have a lot to learn in that area. Yes, I wrote the “about” page animations from scratch by basically introducing a small delay after each image appeared on the page.

      1
  27. 52

    hi, thank you for the great article!

    could you go a bit more into detail about the page preloading and fading, especially with using WordPress, i would love to achieve something similar.

    thank you

    Alex

    0
  28. 53

    Thanks a lot.
    Very nice article, clear and cleaver.
    French like me has a lot to learn from some professionnal like you.
    I definitly become a follower on twitter.
    Take it easy and thanks one more time.

    fred

    0
  29. 54

    Thanks for posting this. I am learning web design/front end development. There is a ton of how to’s for html, css, jquery, etc. There is not very much out there on thought process. This is really helpful stuff.

    0
  30. 55

    First let me congratulate you once more on the job well done on your portfolio website. It is both inspiring and perfectly simplified.

    This article was definitely for me, everything you’ve put down on this post I can relate to, and feel have gained much needed insight as I go deeper into the field of web design.

    I look forward to informing you of the day my very own portfolio site comes to life

    Thanks

    0
  31. 56

    Currently doing a project where I want to develop outside a rails app locally and uses SASS, and HAML. Was annoyed that there isn’t a streamlined way to compile and see my changes until I just recently found CodeKit. Its so amazing. I didn’t want to keep going into the command line everytime I wanted to iterate small changes to the code.

    Its funny how the disclaimer said, this article was for newcomers. This is great for veterans too :) Nice work Adham!

    0
  32. 57

    well very nice effort well written very helpful…good work :-)

    0
  33. 58

    Adam, Awesome article…
    Really loved the way you described each and every steps very clearly with examples and links.
    Thanks a lot Adam…
    Thank u .. Thank uuuu

    0
  34. 59

    Hey Adham,

    i am a front end developer for some time now. I found this article is an excellent one for amateurs and experienced developers and designers. more than the design phase i liked the planning phase. and the way you narrated is excellent. looking for more article from you…

    good luck

    Niki

    -1
  35. 60

    Very informative post. I recommend this post to my friends for reading. Great work, mate.

    1
  36. 61

    Sarfaraz Ansari

    June 28, 2013 2:34 pm

    HI adham i love your website and the most attractive part of you website is the banner section which include your image animation wow it’s amazing i loved it! and also the avtaar image is amazing dude brilliant work
    i was always trying to do something uniquely but always am failed :-(

    hey adham i’ve a question if you don’t mind:

    how’s that idea came to you (designer part and coder part which you illustrate on hover)
    it’s brilliant dude

    0
    • 62

      Adham Dannaway

      July 3, 2013 2:23 am

      Hi Sarfaraz,

      Thanks, glad you like it. It wasn’t easy coming up with my half face concept. I had actually been thinking about it for over a year in my spare time. I had quite a few different ideas on how I could represent myself but wasn’t happy with any of them. I think the key is to think about your personality and what makes you different as a designer. Then take that idea and brainstorm different ways that you could display it visually. Hope that helps.

      Good luck!

      0
      • 63

        hey adham now a days am trying to think to make a webpage like your home page and seriously am inspired by your homepage actually i really like your concept for home page.

        0
  37. 64

    Hi Adham,

    Lots of information you shared, very useful for our next projects.

    0
  38. 65

    Great article! Thanks for posting! I’m currently re-designing my portfolio site as well and I’m going to do responsive too. This article definitely gave me some insight as to how I should approach it.

    0
  39. 66

    I simply love the eloquence of the leavePage method. Very nice touch in a few lines of code… mwah!!! :). I copied it over and will make a vanilla JS version for my project that don’t use jQuery and keep the jQuery version as is.
    Cheers.

    0
  40. 67

    I rarely comment on blogs or sites, but after seeing your portfolio I am awestruck. This is one awesome site you have. Loading of your site, its look and each and every thing seems perfect. I am now at this moment starting to make my own portfolio. I know it won’t be as nice as yours but lets see where I get too.
    Hoping to get some help from you in near future if I get stuck somewhere..

    1
  41. 68

    Thank you so much for this informative case study. I’ve just completed a portfolio site myself and after reading this I’m ready to redesign it all over!

    1
  42. 69

    Wooh. I got A LOT to learn. Is there any “very very simple” list out there…?

    0
  43. 70

    Great article man. I saw your site posted in a couple “top portfolio” sites. The only thing I’d contend with your process is testing cross-browser compatibility before creating a WordPress theme out of it. I’m sure you have you have your reasons for this process. Everyone has their own process. Otherwise great article.

    0
    • 71

      Adham Dannaway

      July 3, 2013 2:25 am

      I agree, that’s what I actually did. I guess it’s not clear in the article. Cross browser testing the static website before implementing in WordPress is definitely the way to go :-)

      0
  44. 72

    Usually don’t comment-
    Totally stunned.

    Thank you.

    0
  45. 73

    Well, this is damn instructive. As a junior web developper (that took up this career change late in his working life) this will be of great help to me.
    I just tested working with WordPress and did my CV site with Bootstrap.
    Now I need to tackle my portfolio site. I’ll definitely follow this article along for its development.
    Great work, many thanks!

    0
  46. 74

    Nice write-up, I follow almost all of the same steps as you do always, except I don’t use Photoshop at all.

    Question: why would you recommend Notepad++ to Windows users?? I’m a Windows user and I use Sublime Text 2 which is amazing (as you already know), so I don’t see a reason why you’d recommend Notepad++ to Windows users.

    0
    • 75

      Counter Question; why not recommend Notepad++ as it’s basically the same tool (and thus amazing)? I only use Sublime because there is no Mac version of NotePad++.

      Great article Adham, I would like to see more of this on Smashing. Btw, love your contact page ;)

      1
      • 76

        My point was that why would he recommend notepad++ when *it seems* like he prefers Sublime Text? Sublime text *is* available for Windows, and IMO it’s a LOT better than Notepad++, so if he also thinks that then there would’ve been no reason to suggest NPP.

        This is not an argument, it’s just a question because like I said it seems like he loves ST2, so it was kinda weird to suggest NPP for Windows users.

        0
        • 77

          Adham Dannaway

          July 3, 2013 2:28 am

          Like Joey, I also started off using Notepad++ on PC and found it to be an awesome editor. Once I moved to Mac I was sad to leave Notepad++ but luckily stumbled across Sublime Text2, which I found to be equally powerful. It’s always good to have options and there are several small differences between the 2 editors.

          1
  47. 78

    “Because our images are contained in a sprite, all we need to do is create another version of the sprite that is exactly twice as large. Let’s say our sprite is named sprite.png; we would name our high-definition sprite sprite@2x.png.”

    Correction : “create another version of the sprite that is exactly 4 times as large.“.
    Width x2 and height x2 = image x4. Maybe not exactly in size, but definitely in total number of pixels.
    BTW, it’s @x2, not @2x. ;)
    I enjoyed reading this article. Although I’m not a newcomer, I’m not as organized and a planner as you are. So I’m going to give it my best again, and plan my workflow with your tips and ideas the next time.

    Cheers.

    -1
    • 79

      Adham Dannaway

      July 3, 2013 2:31 am

      Robert, thanks for your feedback. You are technically correct that the image is 4 times larger. But it sounds confusing to say it this way (if you know what I mean?). Pretty sure the convention for high definition images is “@2x”.

      0
      • 80

        You are completely right about the “@x2″ and “@2x”. I got them mixed up. Again.

        I do not think that 4 times as large sounds confusing. @2x is confusing and misleading on top of that.
        Deliberately misleading by Apple (and probably other companies). Not by you.

        On the one hand Apple blocks auto start of videos on smartphones and tablets to protect bandwidth of consumers. And treats first touch as hover. But on the other hand they deliberately use terms like “@2x” instead of “@4x” to hide the fact that those same devices download images 4 times the regular size. Without restriction. By doing this, they mislead consumers and designers/developers.

        Also, “@2x” === counterproductive :
        You’ve optimized (not by hiding and omitting) your pages for bandwidth limited devices (as in MB/GB download limit per month, not only speed) within certain media queries. And then you bloat the same pages again by specifying @2x on images within certain media queries. Negating your hard work. What a waste!

        -1
  48. 81

    Hi Adam! Thank you for writing! Its an excellent post. I have seen your website in awwwards.com that has been awarded as a Site of the Day. Your website portfolio is my inspiration for years now. Keep on doing your great job. I’m a fan too of minimalist design too.
    You rock!

    1
  49. 82

    Fantastic write-up! Just wanted to say that in the ‘Develop’ section it might be worth mentioning that Sublime Text (my editor of choice as well) is available cross-platform, so our friends using Windows can look at that as an option as well!

    Sidenote: Love your portfolio site! I have to really resist the temptation of ripping off your showcase of your design/development sides as I like to think I straddle that line as well (although I am more entrenched in the developer side of things, I am passionate about design).

    One criticism of your site which is relevant to some of the performance concerns you bring up in this article: I find it slightly annoying that I have to wait to load every page when I am navigating your site. I agree that the smooth transition between pages is appealing, but perhaps pre-loading some page content (for instance if I am navigating between previous and next posts/case studies) could help with the overall experience of navigating through your pages.

    That’s my only, admittingly nit-picky criticism of a wonderfully executed portfolio design. Was a pleasure reading this article and perusing your site. Cheers!

    0
    • 83

      Adham Dannaway

      July 3, 2013 2:34 am

      Thanks for the feedback Brad,

      I agree with your point about the preloader, I will definitely look into improving this experience as I also find it annoying at times. Your idea about preloading the next portfolio page makes sense and would be a great optimization. Thanks.

      0
  50. 84

    Well written and another reason why you got chosen as SOTD over at cssawards.net.

    Cheers,
    Jay

    0
  51. 85

    Hi, i don’t like idea to make transitions on link with any class click. I faced aproblem with that a lot of times. Big website, big quantity of different links, you don’t know what link open new page and what open for example popup.

    What will you do?

    I think we need to find other way to do that, using unload events (that actually is not crossbrowser now as i know) + make so page was not redirected right after unload event fired, so we need to create delay, by making any synchronous function call. Or something like that.

    Have anybody any ideas?

    0
  52. 86

    Thanks for putting this together Adham, it’s a really well organised resource for beginners like me. Thanks also for linking all the historic content with explanations for and descriptions of all the processes and techniques you’ve used. Cheers from chilly Melbourne.

    0
  53. 87

    Great post Adham.

    I’ve also written an article that the readers here may find of interest. It’s for those who don’t have much knowledge on html.

    The article is a simple tutorial on how to create an online portfolio with WordPress http://weeklydesigngrind.com/create-an-online-portfolio/

    0
  54. 88

    Matthias Labsch

    July 9, 2013 11:11 pm

    Hey Adham,

    a very interesting and informative article here :)
    I tried your workflow and was very satisfied, but I stumbled on one point (and sorry in advance if somebody else posted this before me): when I tried to use your responsive grid as you posted it, it doesn’t work (current FF version). I then added an asterisk before the [class^="col-"] declarations to fix this issue. Is it a known issue to you?!

    Otherwise a very good article, I am looking forward to read more of this stuff from you! :)

    Best regards from the black forest, germany!
    Matt

    0
  55. 89

    Thank you so much for the article! Very well written and the way you personally said what you were going and what you did/didn’t like really clears thing up so that he steps come alive.

    0
  56. 90

    your website is sooo nice……

    such an inspiration for me too!! im a total noob at this so im gonna try to plan out my website..so far i did my my mockup in illustrator… =D. i already know what type of interface i want too =D

    0
  57. 91

    Very good article. Got some jquery alternatives in the end. Thanks.

    0
  58. 92

    Awesome article.

    Does anyone have links to other articles similar to this one?

    0
  59. 93

    Hi Adham!

    Thanks for your article, it will help me a lot to design my portfolio website.

    0
  60. 94

    Really so informative and worthy sharing. I am grateful to you for this valuable article.

    Hariot @ VITEB

    0
  61. 95

    Hi Adham!
    This article impressed me like anything and made me to keep going. I am new to front end development and I am trying to create my portfolio but the difficult part for me is designing I am little bit bad on it. Thanks for this article!

    0
  62. 96

    Adham
    Thanks for this good article. I’m in far away galaxy of Suffolk – UK, trying to put together a simple portfolio on a WordPress custom page template for a site. I’ve spent sometime today Googling website portfolios for basic design instruction/guidelines but had little success finding inspiration (and there are loads of Portfolio site examples to see & it amazes me I haven’t seen good basic blueprint recommendations). I know how to put together a basic CV but not a portfolio of work (if CV’s have certain basic standards shouldn’t portfolio’s have similar standards?). It seems you put client testimonials and screenshots of sites or projects you’ve done and that is it more or less. Lots of sites then go for fancy artwork and sliders and videos and responsive mobile layouts and all sorts of bells and whistles but I’m so very modest I do not want my page to show off the latest in artwork and web technology! I’m just looking for a good basic design with ideas of what a good standard portfolio should contain and be able to put one together in a reasonable amount of time using basic coding without using the latest thing in HTML5, jQuery, LESS etc etc etc! Rant over…many thanks for your fine article! :-)

    0
  63. 97

    I love your site. I drew a lot of inspiration from it when coming up with mine, kakoma.ug/. You took personalization a big notch higher…that you should take time off and share what the process was like is even more awesome. Sad that I only stumbled on this article after my site was done

    0
  64. 99

    sitecreatorsandbox

    September 5, 2013 2:39 am

    Hi Adham,

    Loved your article. Also thought it was very refreshing and kind of you to reply back in the comments section to the folks who had questions.

    Patti

    0
  65. 100

    I love the way you have presented the steps you used. Even for a beginner like me, I have gained quite a lot from this post. Keep up with the good work.

    0
  66. 101

    Hey Adham,

    Your article is superb. Came across your website a few months ago and i was like “how did he do that?” I was so amazed and inspired by your website. Been procrastinating in coming out with my portfolio website for months now, but after reading your article, it inspired me to buckle down and get down to some designing and coding. Once again, thanks a lot for the article.

    Sincerely,
    A Malaysian Fan!

    0
  67. 103

    Adham thanks for sharing great thought.
    Could you please mention how can I use # to redirect on a new page for custom PHP development?

    0
  68. 104

    Thanks Adham for sharing the stuff and no doubt it’s an awesome explanation for any workflow.. However, I am not agreed with the logic that any person who is in UI and has got expert hand in sketching, wire-framing, designing, coding, analyzing all together.. I also don’t see any logic about the points and process explained above, are one guy effort.. What if somebody is not comfortable doing designing part or development??

    0
  69. 105

    This is a fantastic and very inspiring post Adham! Had a holding page for almost a year with the intention to update my website…this will change now! Thanks :)

    0
  70. 106

    wajid ahmed ghouri

    June 26, 2014 7:14 am

    These points really help every designer. Thanks :-D

    0
  71. 107

    This is a very useful article. I am getting into web design and there is so much to learn. Hopefully, I will build impressive websites, but this article is a great starting point for beginners. Haha!

    0
  72. 108

    Keep up the good work , I read few blog posts on this site and I think that your weblog is really interesting and has got circles of good information.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top