(This is a continuation of my first post here.)

Building C-Lyrics

Previously I mentioned about my main assignment, which is building a lyrics database website from scratch I am going to call C-Lyrics.

You heard it right people. I shall be the project manager, the designer, the front end developer and the programmer. It was to be completed within 3 months, which is the duration of my internship.

C-Lyrics project is supposed to sharpen my skills of the subjects I had been taught at the university, where I learned the theory of programming and how to code. On top of that, it will also give me some experience on putting on the hats on many different roles at a web agency – project manager, designer, front end developer and programmer.

I had never created a native app for any platforms from scratch. Thinking about it now, I had no idea what I was up against. Tough work, but as always I am up for it.

Let the fun begins (actually terrified).

Project management & design

After discussing with Shaza on the precise requirements on building a lyrics database website, Zana helped me to set up a Basecamp project and walked me through project management workflow – so it is like a real client project. The pressure!

First challenge: design. I have to make use of my non-existent design skills to create a few templates based on the Bootstrap grid. Luckily, Dahlia was there to help. She held a Photoshop class for me every Monday where she would teach me how to use the tools and some design tips as well as giving me assignments. The classes definitely have helped a lot in helping me wireframe and design C-Lyrics.

During design and wireframe stage, apart from the Photoshop classes, Shaza and Dahlia had given me a lot of tips and examples from the client projects they have done before. This is to ensure that my work is at par with their work – if you remember from the first post, I mentioned that most of their work are all over the world! Another pressure.

It took me two weeks to complete both the designs and wireframes for all templates. Wireframes helped a lot for me to decide the elements on my website – buttons, navigations, photos, text and many more. Once the wireframes were approved, I moved on to design.

It was a bit harder than wireframing, because once I design, I have to think of how it will work when I code them later in Bootstrap grid. It took me a while to understand how to sync those, hence I was grateful to have my designs meticulously reviewed by both Shaza and Dahlia. On top of that, I did not only design for desktop, I also had to did the designs for mobile and tablet view since C-Lyrics is going to be responsive. Phew!

It was a definite relief after the designs were approved after a few rounds. Next!

Moving on to HTML/CSS

At the risk of sounding like a brag, HTML/CSS was quite easy for me because I had already been learning front-end development in university. I actually was ahead of the schedule!

On top of that, it was also because Sani, the front end developer, had been having HTML/CSS classes for me every Thursday. This gives a chance for me to review and revise my work with him while also learning some new tips on front-end. Zana also recommended me to do my own learning via Codecademy of which was really user-friendly and definitely had helped me a lot in finishing my assignment. Iwan and Sani had been incredibly helpful when I harassed them with questions about my project – thank you so much!

Since I finished my HTML/CSS part of the project ahead of time, Zana tweeted me this meme:

Programming

For programming, Shaiful had been holding PHP classes for me every Wednesday and had been offering such tremendous help in templating my website. The database and content for the lyrics website were stored in WordPress hence I got to learn WordPress too. In my opinion WordPress is pretty cool – it’s blog based, easy to learn and familiarise and I did not have to spend much time in organising my database using WordPress.

PHP, however, is a different story.

It was quite a struggle for me, since this was my first time using it. I had no idea how many times I had been harassing Shaiful to help me with PHP but fortunately, Shaiful being Shaiful, was always cool. Definitely was impressed at how amazing programmers are now, and hoping someday I will be as good as they are.

On being a Stampede alumni

Despite not being able to finish my lyrics website, I learned a lot while being an intern in Stampede. This is not only in terms of technical skills, but also in soft skills such as communication, teamwork, self-discipline, time management and many more.

I guess the most valuable thing I had ever learned in Stampede was how much they believed in me. Here I am, an intern, surrounded by an all-star team members – yet everyday they would spend countless hours helping me with my project. More so than gaining something from me, I gained a lot from my first working experience at Stampede.

I found the best team members, and most importantly, another family. Thank you for the wild, yet exciting ride Stampede. I’ m so lucky to be able to work alongside you guys.

On my last day at Stampede, one comment from Shaza stuck most, “Now that you are one of the girls in tech, go out into the world and time to kick arse! Also never hesitate to help others especially fellow girls in tech.”

And so shall I!

Do good Stampede, like you always do. Keep in touch!

The post My Internship Experience: Part 2 appeared first on Stampede: the strategic design & technology company.

I’m currently a student at Universiti Tenaga Nasional (UNITEN) pursuing my Diploma in Computer Science and I’d like to share my experience in my first month of being an intern at Stampede.

Serendipity is the coolest thing

I suppose it’s always this – when you are on the Internet, you tend to surf for hours, watch the most ridiculous Youtube videos and were sucked even further into the procrastination hole while working on your assignments. I came across one of those websites which caught my attention. Seeing that the website bears the mark “Website by Stampede”, I immediately did a bit of web stalking and came upon the company’s website, which is, just equally cool. I noted the company’s name somewhere in my Moleskine.

When the time came for internship, I decided to try my luck and applied at Stampede. I did not expect much though, because on first glimpse I saw that they are very professional and considering a student like me would probably be the least of their concern. Imagine my excitement when Shaza replied to my email and decided to arrange for an interview with the team. She mentioned that since I am very interested in programming, it is something that is very aligned what Stampede does and it would be nice to have someone like me onboard. When Shaza mentioned that Stampede has clients all over the world, I was even more excited to intern here. What would be even more rewarding than to be also exposed to such huge client base of various industries?

The night before the interview, I probably did not sleep at all. I prepared a script and rehearsed a hundred times.

During the interview, I was introduced by Shaza to Zana, the Project Manager (who is currently my supervisor), Shaiful, the Web Analyst and Developer and Syazwan, the Front End Developer. The interview surprisingly went very well, although I was nervous. Despite how often they teased each other mercilessly during my interview, of which I realised how close-knit Stampede is, I can also sense that they are very professional in what they do when they spoke so proudly of their projects and achievements.

Sani teaching me HTML/CSS on my second day at Stampede

What I know

Being a computer science student, I learned basic HTML/CSS, database, designing and programming which is included in my course syllabus. Internship enables me to apply these skills in real life, for example, building a website or creating a native app for any platforms.

When I think about it, there was a lot of, “What was I thinking?” So here I am to figure it out. Being at Stampede so far, going through daily classes with the team – Dahlia teaching me Photoshop, Shaiful teaching me programming and database and Sani teaching me HTML/CSS – I am ready to accept the challenge.

On working remotely

One advantage that I have from my other coursemates who are also doing internship at the moment is that having the opportunity to experience what it’s like to work remotely. Stampede does not have a physical office like other agencies. This comes across as surprise to many people because their professionalism and their closeness with each other seem to show that they work in an office physically for a long time together!

While working remotely, I learned to manage my own time better. While with everyone’s perception that with working remotely, everyone can be casual with their time, it is not so at Stampede. Everyone is proactive, very disciplined and work gets done – fast and thorough. There is never a dull moment in Stampede Skype channel.

What I will be building

I have, more or less, three months to build my own website. Hence another, “What was I thinking?”

I decided to build a lyrics database website called C-Lyrics. Everyone is able to search for lyrics, filter them according to certain criteria, as well as having registered users who could sign in and submit lyric entries.

This website is solely my responsibility – I am the project manager, the designer, the front end developer and the programmer. There were a lot of checklists and workflows to go through. It does sound really ambitious, but in doing so I will understand the magnitude of work any web agencies have to go through in order to create good products every day, hence appreciating them even more.

At the end of the project, this website will be deployed to a working domain, which means that it will be a fully-functional website! So excited.

The other internal projects which I am partially responsible to as well are to post to Curated and Constructs, which are Stampede’s mini blogs of design and code, respectively. While scouring for the content, I came upon many more interesting sites and resources, which proves that Internet is this one big universe of knowledge and that one has to be good at making use of it.

Shaza also lent me some of her favourite books on design, user experience, productivity and many others, of which I am also required to do a presentation on at the end of my internship.

Do, or do not. There is no try.

Right now, while typing this, I am also in the midst of wrecking my brain on how best to code my C-Lyrics website, of which designs I have completed and been signed off (yay!). Time is running out, there is less than 2 months to go, and failure is not an option! I should go back to work now.

So glad to talk to you, and see you in Part 2!

The post My Internship Experience: Part 1 appeared first on Stampede: the strategic design & technology company.

Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.
– Steve Jobs

The requirements

These are the requirements given by Shaza, my Creative Lead in order to build the app:

• The note-taking app will have two options, a blank note or a to-do list.
• It will have titles and content but no text formatting except URLs will be automatically converted to links by the app.
• Every note will be clearly separated and can be archived or deleted.
• There will be a search function and user will be able to email the note to anyone.

She would assume the role of the client who is going to determine and evaluate whether this project is a success (or not, hopefully that will not happen).

Stage 1: Brainstorming

The next step was to merge all these bits and pieces of requirements and put them together into one concept of a user interface.

I started out by doing a research on the existing note-taking apps in my phone and in the Apple App Store. Since I am using iPhone 4S at the moment, I am using the native note-taking app as a benchmark, combining it with the functions of other note-taking apps which work well in my experience – for example, Evernote.

Once I have figured out which features might work well in my app, I started sketching up wireframes and flows by hand. I found that it actually eases my mind a lot, this whole sketching with hand thing. There are no lags on the computer, or to worry about how the weight of the stroke after using a digital pen is not clear, light or heavy enough. Sketching gives me more control of my creative process.

At the same time, I have had many discussions about the contents and the progress of the app design with Shaza.

Through flowchart and wireframes, I finally was able to get a clearer picture on how to start designing it.

Stage 2: Design

It’s good to come up with a brand to be able to decide the concept for the app. With this in mind, I started to look for a name for the app. I wanted something catchy but yet simple and easy to remember – something like Basecamp or  Teux Deux.

So I came out with “Goat Note”, which rhymes with “got note?”.

Satisfied with my app name, it is easier for me to decide on the colour scheme and app design.

Once all of these important decisions were made, it was time to detail everything visually. I spent hours in Photoshop drawing out all the necessary elements for the app.

When opening the app, the logo will appear on its own first with greyish brown blurred image as background.

After loading for about 3 seconds, the login page will appear. New users will be able to sign in via Facebook account, Twitter account or sign up using email. This gives them users the flexibility to sign using any of these accounts of their choice.

• The app dashboard will have separated list on notes and to-do list. Setting icon and search bar are placed at the top, followed by “Create a new note” option.
• Notes and to-do list will be displayed up to 3 latest list and if the user wants to view more they can do by clicking on the “View all 10 notes”. The number will change depends on how many list the users have.
• To view option for “Edit, Email, Unlock and Delete” function, users will have to swipe to the left on the desired list.

A modal will appear for unlocking/locking function.

Users can also delete, email and create new note or to-do list here.

A modal will appear in case a user wants to create new note.

Learning Experience

In the final process of the design, I was also required to present the app to the whole team.

As a designer, nothing is ever complete to me. Although I have worked so hard in making sure the app is in its best shape, the app is still imperfect and requires a number of improvements. Hence, pre-presentation jitters. Thank goodness the team is always ever supportive of me – giving a stream of ideas after ideas for my Goat Note app.

The processes of putting together the entire requirements, and at the same time making it beautiful, desirable, up-to-date and engaging were all new to me and very exciting. I learned that to be able to design an app that really work for and resonates with users, you will need to place yourself in the users’ shoes instead of your own (as a designer) and be a technological enthusiast.

Result? I was soon revealed that this assignment’s goal was not to measure whether I succeed or not, but rather, for me and for the rest of the team to understand the processes it take to design an app, or design anything for that matter – from research to brainstorming to sketching through a number of reiterations. It is always a fun process in the end.

Will I want to design another app? Yes why not!

The post Building a Mobile Note-Taking App appeared first on Stampede: the strategic design & technology company.

For me, it was about 4 months ago. New to the team, the least experienced but with spirits aflame to absorb as many things as possible, I was assigned to create my own responsive website.

I was free to choose my own theme. Being an inline skater, I decided to design and develop a responsive website for my skating club, SKROLS. The website will revolve around skater’s profiles, skating news, events and products. The goal is for me, as a new front-end developer, to learn and understand the process and challenges of designing and developing a website from scratch. At the same time, the project is also intended to assess my problem-solving skills.

Challenge accepted.

Designing the website

I was a naive one, yes I was. I used to think web designing was easy. You fire up Photoshop, adjust your layers here and there, make sure the colours are nice – you are ready to go. Boy, I was wrong.

Designing is more of a philosophy – it is a process where everything needs justifications. For every element you put in the design, for example size of containers, colours, height, button interaction, etc. they all come with good reasons. That is a lesson learned for me. So if you ever felt like designing is easy-peasy, it is not. Go hug your designers today.

Thanks to Shaza and Dahlia who had been hovering over me while teaching some Photoshop techniques while I was working on my website design, as shared above. Not bad for a first-timer, eh?

Developing the website

I chose to develop this SKROLS website using Bootstrap 3 as the framework. The reason being is because it has CSS media queries to support responsiveness in websites along with some wonderful features in CSS components and jQuery plugins.

In developing responsive websites, it has to be mobile first – start from small devices to larger devices e.g. mobile devices to desktops. I learned that developing websites becomes much easier when you are understand and had been thoroughly involved in the design from the start. This process is even easier for me, especially when I have designed it from the start.

Thanks to Iwan for providing the tips, overseeing and reviewing my SKROLS website from start till finish.

Conclusion

Thanks to this assignment, I learned that in order to do front-end, it is good to understand the depth of work it takes to design a website – the navigation, the interactivity – in short, fully understand the requirement. It was also both challenging and fun trying to come up with my own website design and developing it from scratch.

In the meantime, I will keep experimenting and creating my own side projects in order to sharpen my skills. Never stop creating, just keep making.

(Just Keep Making print is from Holstee.)

The post The Making of SKROLS appeared first on Stampede: the strategic design & technology company.

The requirement: Cascading dropdown list

This being on Shopify, the only way to code this custom feature is by getting creative with Javascript. It was then when I discovered about TaffyDB as the medium to store the 100+ odd rows of vehicle data. I played around with some hard-coded sample data using TaffyDB (and jQuery) and managed to get the cascading dropdown to work properly in Shopify. Perhaps the steps can be outlined in another blog post.

Now we move on to the main gist of this post. The client had the vehicle data populated nicely in Google Sheets. My next big task was to reformat these data to a TaffyDB-compatible data file. Below is a snapshot of the Google Sheet and the corresponding TaffyDB data, which is essentially a JS array of objects. The cool part is to automate this conversion process.

Sample data in Google Sheet (click to enlarge)

var car = TAFFY([
{year:"2002", make:"Subaru", model:"WRX", trim:"Sedan", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2002", make:"Subaru", model:"WRX", trim:"Wagon", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2003", make:"Subaru", model:"WRX", trim:"Sedan", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2003", make:"Subaru", model:"WRX", trim:"Wagon", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}
]);

Enter Google Apps Script. This tool is a godsend because it allows you to use Javascript to programmatically manipulate data in your spreadsheet. To access Google Apps Script in Google Sheets, go to Tools -> Script Editor.

After going through a few tutorials, I managed to come out with a fairly decent code for performing this conversion process.

/**
 * Retrieves all the rows in the active spreadsheet that contain data and generate a TaffyDB data array from it
 */
function readRows() {
  var sheet = SpreadsheetApp.openById('SPREADSHEET_ID_HERE').getActiveSheet();   // The value of key= variable in the URL
  
  // This represents ALL the data
  var range = sheet.getRange(5, 1, 1000, 20);   // Starts reading from row #5 column #1 (cell A5). Read as far as 1000 rows and 20 columns (for future data entries).
  var values = range.getValues();
  var output = '';
  var index = [];
  var row_array = [];
  var row = "";
  
  // The main loop that goes through each cell within the selected range. i is row, j is column
  for (var i in values) {
    var cell_array = [];
    for (var j in values[i]) {
      if(i == 0) {   // i == 0 is row #5, this is the column variable name
        if (values[i][j]) {
          index.push(values[i][j]);
        }        
      } else {   // car data starts at row #7 onwards
        if (values[i][j]) {
          cell_array.push(index[j] + ':"' + values[i][j] + '"');   // compose the car data cell by cell for the current row
        }
      }
      
    }
    
    if(i > 0) {
     if(cell_array.length > 0) {
        row = cell_array.join(', ');   // join the individual cells car data for the current row with commas to form a complete row data
        row_array.push(row);
      }
    }
    
  }
  
  output = row_array.join('}, n{');   // join the individual rows with curly braces and commas to form a complete database

  output = 'var car = TAFFY([{' + output + '}]);';   // finalizing the TaffyDB format
  
  Logger.log(output);
  //return output;
};

To test this code out, simply enter your spreadsheet ID in line 5 and change the range number accordingly in line 8. The Logger.log command in line 44 is used for testing the output in the script editor console. In the production version, I have a few more extra codes to add a dropdown menu in the Google Sheets UI that users can click to download the updated TaffyDB JS data file and then simply drop it into Shopify.

The post Generating TaffyDB Data File from Google Sheets appeared first on Stampede: the strategic design & technology company.

(In case you are wondering, ELI5 = Explain Like I am Five.)

Big-O what?

In computer science we have the Big-O notation. It is a way to compare the complexity of an algorithm. An algorithm is defined by the how the code solves a problem and we want an algorithm that is fast. For programmers, sometimes it is useful to understand the concept of Big-O thoroughly to produce some examples in code.

To explain what the Big O notation is, let us do some simple algebra.

As we all know, in math, the most basic operations are:

• addition
• subtraction
• multiplication
• division

How does it work?

Say we have two numbers – 12345 and 56789. Since primary school if we were to add those two numbers up, we would first line the numbers up to the right then add each digits in the column from right to left. If each column exceeds 10, we add 1 to the left.

 12345
+56789
-------
 69134

The number of steps we take is about 5+ (including carrying 10 over). This means adding two 5 digits number takes about 5 steps.

What if we add two 10 digits number? That would take about 10 steps. Two 1000 digits number? 1000 steps.

So we can see a linear pattern here as the problem gets bigger. The complexity is directly proportional to the number of problem/digits (n digits) that we need to add up. Hence for an addition operation, we have a linear complexity. Or as we denote in the Big O notation, O(n).

The same complexity applies to subtraction as well.

For the case of multiplication, that is not linear though. The complexity of a multiplication operation is said to  be quadratic, O(n²). This is because for multiplication what we usually do is line the numbers up and multiply each numbers one by one. Then we add them up then move on to the left. So for multiplication two 6 digits number, we need to do 36 multiplication steps plus 10 or 11 additions to ge the end results.

As the problem gets bigger (more n digits), say multiplying two 100 digits numbers, we need 10,000 multiplication + 200 additions. Imagine if it gets really really big say 1 million digits. The multiplication steps will surely be even bigger while the additions could be big, but note that at this point, the additions step are now negligible. Which is why we said multiplication is a quadratic complexity O(n²).

This is another important part of the Big O notation. We only care about the significant portion of the complexity and algorithm.

Why do I need to know this?

The reason why we care about the Big-O notation and the complexity of the algorithm is because this affects the real world in a lot of ways. We always want to find the best case to use to search for answers in the fastest way. Not to mention saves up cost of computational power, resources and cost.

Finally, the two examples given only scratches the surface of the Big O notation. We still have in our hands the logarithmic complexity, constant complexity and factorial complexity which I will leave you guys to research more if you are interested in the subject of algorithm and optimization.

For a visual explanation on Big O, you can watch this video here.

(Image thanks to Sasa.)

The post ELI5: The Big-O Notation appeared first on Stampede: the strategic design & technology company.

What are the processes involved?

When I was handed the assignment from project stakeholders, one of the first tasks I had to do was to establish goals and direction of this project.

I decided to tackle this by interviewing Iwan for his Royal Langkawi International Regatta (RLIR) updates experience. From the interview, I managed to gather all the information about the race that I needed. Coupled with the experience of doing the RLIR updates myself afterwards, I found that all the information given was very helpful for me.

Before all the process started, I need to understand the concept:

• The more we know what the audience wants, the more we can help them in searching for the information they are looking for.
• Less time for audience to spend looking for this information would result in happy users.

After understanding the concept, I was to locate the target demographics, the devices in use, etc. This was to specify the visible content based on most clicked area, which helps us in turning the website responsive.

From the targeted demographics, we got to establish specific focus areas according to their importance during the race week.

Finally, based on all existing asset (RLIR website artwork), I proceeded to redesign the layout for 3 different sizes of browser- full resolution desktop, tablet size, and mobile size.

My notes and sketch for the RLIR wireframe.

I also did a research on the best practices for handling dropdown navigation for the responsive. I was to understand the difference between desktop tablet and mobile usability. This way, I managed to identify what it takes to help the users interact better with responsive design.

Once all was done, I was to present the solution to team members. I admit they were very merciless during the reviews process, but this is to ensure that our work is always up to the best quality.

Responsive mobile testing on devices

Once the design part was done, I was to hand over the design assets to front end developer (it’s Iwan, in this case) for him to code it. In the meantime, I was also responsible to oversee the deployment process to make sure my design works in sync with Iwan’s code.

The product

The finished product, in all its glory.

You may also browse it here http://www.langkawiregatta.com.

So, what have I learned from this experience?

Seeing as this was my first experience on designing a responsive website, after going through the processes altogether I am now very much prepared for my upcoming responsive projects.

I also learned that even after the design process and the design is handed to the front-end developer, my responsibility does not stop there. It is important for designers to be involved in every phase of the project and I learned this by having the chance to oversee how my responsive design materialised itself into a finished product right before my eyes – and having so many people praising it too!

In conclusion, I enjoyed this project very much and I look forward for more responsive projects to come.

What do you think? We would love to hear your feedback about our work, so do share in the comments section.

The post Towards responsiveness: Part 2 appeared first on Stampede: the strategic design & technology company.

What is responsive design?

Responsive design has allowed designers and developers to create brand consistent websites that not only look incredible through a computer but will respond to the resolution settings on mobile phones and tablets. It is the ideal solution to creating separate sites.

You have one site, with all products and services and this site will respond to the device where it is being viewed through. It also incredibly clever, time saving and well, in a nutshell – a designer’s dream. It also adds a lot of convenience for users on the go, for they don’t have to go to their laptops or desktops to check the websites, instead they can directly check on their smartphones.

Royal Langkawi International Regatta

My first full-fledged responsive design website is for the upcoming Royal Langkawi International Regatta 2013. It is an annual yacht race event held in the scenic island of Langkawi, with 2013 being their 11th year of running.

This year, more than 35 yachts and over 250 sailors from about 12 countries are expected to participate. Currently the Regatta has a different website dedicated for mobile users, and although it is good enough, it is not exactly streamlined to the current main website.

This is where we step in.

Project Stakeholders

The ‘we’ I am talking about here comprised of:

1. Shaza as the design and user experience consultant
2. Zana as the project manager
3. Syazwan as the project owner

Syazwan has been instrumental in every single Regatta project. He is equipped with 4 years experience managing the website as well as being the on-site developer. Over the years, he has developed a familiar understanding of the event and the participants’ browsing behaviour.

Working closely with them, I am entrusted to update the design for the Regatta’s responsive website.

The project

To enable seamless viewing in all devices, our job is to take the existing design and extend it into a responsive website. Apart from that, we must take into account that it should enable pulling updates from a source throughout the race.

To add up more to the challenge, we are to launch the website two weeks before the race day starts on 7 January 2013, which means – very soon!

Why responsive?

With mobile traffic now accounting for around 12.5% (and rising) of all website visitors it’s high time we must start putting effective mobile design at the top of our to-do list. If we fail to do so, be prepared to be missing out on a huge sector of the market. (Source)

In the case of the Regatta, the participants rely heavily on their mobile devices to check results, race highlights and to log race disputes as they are always on the go on the days of the events. It saves time because they will not have to go do all these on their laptops or desktops.

Turning responsive will also improve the process of updating results and news on our end.

(Coming up – Towards responsiveness: Part 2)

The post Towards responsiveness: Part 1 appeared first on Stampede: the strategic design & technology company.

These are the few things I’ve learned so far:

1. White Space

White Space in Web Design

White space is the spaces around elements in the design to help them stand out or separate from the other elements. Without it, designers will stumble when establishing content hierarchy. A simple example is using white space to distinguish the relation between header and body content, and body content with the next header. White space is therefore very useful in grouping information into clusters and make for easier website reading.

Legibility (micro level)

White space at the micro level (leading, kerning, and tracking) can help improve or destroy the legibility of a Web page. This controls readibility of the text. If a web text is easier to read, the probability of user digesting the information is higher.

Tone (macro level)

White space at the macro level (spacing around the biggest objects on the page) can convey a sense of elegance or down-market quality to a design. We also use white space to naturally control user’s eye-movement and lead them from one information cluster to the other.

2. Drop shadows & Gradient

Drop-shadows and gradients are two of the most common design elements on the web. They’re handy effects for web designers because they’re attractive, useful and easy to create with any graphics program. But they have a dark side: they’re frequently abused.

When using drop shadow, always remember – “The subtler, the better”.

What Do Drop-Shadows and Gradients Do?

The illusion of space connects the imaginary to a world we are comfortable living in. Visual metaphors create perceived affordance. Drop-shadows and gradients are basic tools for creating the illusion of space. By mimicking the effects of light in the real world, drop-shadows and gradients communicate information about metaphorical objects, imaginary light sources and their relationships.

3. Masking layer

A mask is an entity which controls the behavior of a collection of pixels. Generally speaking, this control centers around the relative transparency, or opacity of a given layer or collection of layers. When combined with Photoshop’s ability to stack different layers, masks become an incredibly powerful tool, which helps give designer or digital artist with extremely precise control over the interaction between the different layers.

The Clipping Mask

Clipping mask functions more as a one-to-many type entity, in that it can actually effect multiple layers at the same time. A clipping mask is also, by its very nature, multi-purposed. While a Layer Mask exists as a modification to a layer, a clipping mask actually is a layer, which interacts with one or more of the layers directly above it.

4. Usability

Usability is making your website easy for your visitors to find the information they need, when they need it. It’s a huge ground for discussion but among the things that I’ve learned is to always include a tag for the most obvious element on a web page. Implement a 27 characters wide site search and place it on top of your website. Don’t use extensive graphics and design elements. Include a site map page and register a sitemap XML document in search engines.

Don’t break a user’s workflow. Allow every action to be canceled if necessary. Create easily scannable web content and place the most important information on top of your web page. Don’t design graphic elements that looks like a button, but is not. Present meaningful feedback and don’t forget that feedback works both ways. Use unobtrusive Javascript and graceful degradation. Avoid CAPTCHAs, use more usable methods instead.

5. Typography

I tested a variety of different fonts and sizes, and also the text leading to identify the fonts, sizes and text leading that provide best legibility and viewer readibility when designing websites.. In the process, I have come to understand the difference between font rendering in Photoshop and browsers. I also found it important that every font I use match the right tone to the design themes.

Here is the screenshot of the end result – thanks Shen for the awesome session!

6. Responsive Web Design vs. Mobile Website

Responsive Web Design

Responsive websites “respond” to their environment. It adapts to the browser screen sizes from full-view desktop, tablet and even mobile viewing seamlessly that none of the contents are missing of misbehave.

Why responsive?

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.
– Jeffrey Veen

Mobile Site

Mobile sites are designed for the small screen, with the needs of mobile users in mind. A mobile-friendly site can help your business connect with customers and increase sales, but a bad mobile experience can drive your customers to your competition.

Why Mobile?

As time passes, mobile has become one of the largest medium for users to go online. Users expect their mobile experience to be as good as their desktop experience. A bad mobile experience can cost you customers. Mobile users also tend to connect with the businesses in their local area so businesses like yours can drive purchases with a mobile-friendly site.

Responsive Web Design vs. Mobile Site

Things to consider before choosing between Responsive Website or Mobile Website.

All thoughts welcomed!

As you can see, these are all new and exciting stuffs to me. I appreciate everyone’s comments, ideas, corrections and notes. I will also be sharing more web design tips and things I learn along the way at Stampede – so stay tuned. Woohoo!!

Main photo credit: Hellvetica by Rachel Katstaller

The post Things I’ve Learned So Far appeared first on Stampede: the strategic design & technology company.

There are many kinds of barcode formats out there to cater the types or amount of data you are trying to encode. However if you are just starting out for a bit of familiarization, generating 1D barcodes with PHP couldn’t be simpler with the free (for non-commercial use) PHP Barcode Generator class.

Extract the ZIP and use the following line to generate a barcode in a Code 39 barcode format encoding the string A1B2C3D3.

<div>
   <img src="html/image.php?code=code39&amp;o=1&amp;dpi=72&amp;t=80&amp;r=1&amp;rot=0&amp;text=A1B2C3D3&amp;f1=Arial.ttf&amp;f2=10&amp;a1=&amp;a2=&amp;a3=" alt="Barcode" />
</div>

Some key parameters:

For a more detailed explanation of each parameters and configurations, please refer to the barcode generator GUI tool bundled in the ZIP archive.

Have a nice day.

The post Generating Simple 1D Barcodes with PHP appeared first on Stampede: the strategic design & technology company.