NAOT Promotional Email Graphic for HealthyFeetStore.com

The NAOT promotional assets were created for HealthyFeetStore.com to promote their NAOT weekend sale. Created for the promotion were a total of three graphic assets designed by Niteo, the email graphic, the homepage banner (coming soon) and the new search header graphic.

NAOT Search Header Graphic for HealthyFeetStore.com

The Search Header Graphic is a new graphic asset being incorporated into HealthyFeetStore.com’s promotional asset collections. When users on HealthFeetStore.com search for items, the header is capable of containing a linked banner which will feature the current promotion.

LUXX Limo - http://luxxsandiegolimo.com

LUXX Limo out of San Diego, CA provides limousine services through out the greater San Diego area. LUXX Limo offers ultra-high end vehicles and couples their limousine services with exclusive access and great deals at the hottest night clubs San Diego has to offer. When you reserve with LUXX Limo, you’re guaranteed to be the talk of San Diego.

Niteo was contacted to make some Zero-Hour web design additions to a site that needed to get completed as soon as possible. Within a few hours, Niteo’s Web Design Team was able to wrap up all of the loose ends and created a beautiful site background to the specs of the client. So impressed was the contractor who asked us to help, we were also asked to complete some of the less serious tasks including adding in an MP3 player. We look forward to working with the client and the contractor again.

Also, if you have another application you love and it’s not mentioned here, let me know in the comments and I will try and get it added here.

FTP:
File Transfer Protocol, or FTP is a means of connecting to a web site’s host to make changes to the static files the site uses to build the web content. It is the direct way to access your web site’s server and make edits to it’s files. While there are other means to edit files via a web browser, using FTP is much faster than swapping files over HTTP.

CuteFTP
CuteFTP is an FTP client that will cost you some cash to use but offers you a great deal of built in functionality that streamlines workflow. Notably, CuteFTP offers a built-in file editor so a user is able to make edits to files from directly in the client. Simply right click the file, select edit and the file’s text is brought up and you are able to make edits. When finished, simply click save in the top left and the file is uploaded to the host and the change is made live.  When it comes to speed, this way of editing the files is the way to go.

Filezilla
Filezilla is a free open-source, no frills FTP client. To manipulate files, you must use an external text editor and click back over to the client to upload the changed file. While being completely free, you may go nuts when you save a file in your text editor and refresh the changes on the site, only to not have them show up because you have forgotten to upload the changes. If you do happen to remember to upload everytime, you will still have to deal with two-three extra clicks before the file is uploaded. The simplicity of clicking one button and moving on is a feature Filezilla lacks, but the price is right.

Text Editor:
A text editor is used to make changes to your files and a decent one will color code the file so you are able to make quicker edits and a better overall sense of the design through the code by coloring different tags in different colors. So if you are looking for an image file, and it’s colored red by the text editor, then you scroll through the code until you find red and then look to see if its the file you are looking for. Some more robust text editors will organize and minify the code to offer the most optimized code possible.

Notepad++
Notepad++ is an open source text editor that is completely free. It’s amazingly straightforward and low profile which makes it very attractive as an application and offers myriad options to help you code faster such as color coding for just about every coding language under the sun. Here at Niteo Design, we use Notepad++ in conjunction with Filezilla to offer an open-source and completely free way for each designer to access and edit clients’ web sites.

Image Editor:
An image editor is a type of graphics software is used to edit the graphics that are used on the web site. Because CSS3 can’t replicate every design style, graphics are still and will continue to be an integral part of web design and a web design must be versed in image or photo-editing software to be able to manually create the graphics they need to develop the site the envisioned. An image editor can also be used to create mockups and wire frames.

Photoshop
This is the industry-leading image-editing software and it comes with an industry-leading price. If you are able to shoulder the costs, you definitely get what you pay for. Photoshop can literally create anything you can imagine as far as web-based graphics go and offer every sort of option you may want to manipulate for vector, raster-based and text-based graphics. If you decide to go with Photoshop, spring for the full application and avoid Photoshop Elements, it really offers a limited amount of options compared to the complete Photoshop, especially for the web-based graphic designer.

GIMP
GIMP is an open-source image-editing software that is completely free of charge. GIMP was created as an open-source alternative to Photoshop and offers many of the exact same features that Photoshop has. If you can’t afford to go with Photoshop, go with this. Another great feature of GIMP is that it’s available on every operating system so even if you’re running Linux, you’re covered. A web designer who is able to deftly use Photoshop will be able to use GIMP with the exact same results which makes the application an extremely exciting option available to web designers.

Paint Shop Pro
PSP is a shareware image editing option that costs about a third to a quarter of the cost of Photoshop. The application is fairly robust but lacks many of the deeper features available in Photoshop and GIMP.

Browser Add Ons:
There are several add ons that are offered through web browsers that help web designers and web developers to take an in-depth look at the data that’s being parsed through the browser and seen by the users. This helps the developer to more readily identify the changes that need to be made to the code and graphics to produce the desired output.

Inspect Element
This feature is offered through most browsers and allows the user to take a look at the HTML, CSS and JSON that’s being parsed to create the site. Unlike viewing the source code, right-clicking an element and inspecting it will show the element in the code and offers style and JSON context for the element as well. This allows developers to see exactly where changes need to be made to the code to get the look they’re going for. Chrome and Opera offer this built-in and Firefox has a plug-in called FireBug that will allow for this.

MeasureIt
This is the main reason why I still haven’t made the switch to Chrome for my main web development browser. Only offered on Firefox, MeasureIt allows the user to measure just about anything on the web. If you know you need to move something a certain distance but don’t know the exact number of pixels, use this instead of guessing and correcting several times until it’s just right. This takes out all of the guess work when trying to get that pixel perfect design.

Color Picker
Another reason to stick with Firefox, Color Picker is a Firefox add-on that lets you see the color information of any pixel on the webpage. This is ideal for color matching elements. Element inspection can yield some color info for html-based elements but if you need to color match a graphic, instead of downloading it and opening it in an image-editor, you can use the color picker to find out the color you need to identify.

YSlow
This is an add-on offered by Yahoo that tells you the reasons why your site may be lagging. It tells you things about the number of processes that’s being called upon and whether any may be superfluous or redundant and what errors may be slowing things down as well. It also tells you the time it takes for certain portions of the page to load and the total load time. This is an awesome tool for fixing coding and parsing issues that might be causing laggy site performance.

Archmolds Tradeshow Booth - Left

Archmolds Tradeshow Booth - Right

The Archmolds Tradeshow Booth was created to replace its existing and rather bland tradeshow banner with something new and fresh while advancing the aesthetic Niteo Design brought to Archmolds a few years ago when we were brought on for their initial site redesign and upgrade. The Archmolds Tradeshow Booth has two sections, the left side and the right side. The right side is used in both 10′ and 20′ booth layouts whereas the left side attaches when used as a 20′ S-Curve booth.

The booth is created using vector background blocks (long rectangles) and gradients with vector-based text and rasterized images. The images were both taken and edited by Niteo Design, so literally everything on the booth is a new media asset created entirely in-house by Niteo Design.

Archmolds Tradeshow Booth - Full Size with Guidelines

Above is a version that shows the guidelines that are used for dividing up the booth for when it’s broken down and transported. The design of the booth is created in Adobe Illustrator using a template provided by the booth manufacturer. Below is the old version that Archmolds is upgrading from, quite the difference.

Former Archmolds Tradeshow Booth

Klogs promotional graphic for Healthy Feet Store

The Klogs promotional graphic features several lifestyle product shots of shoes and sandals Klogs offers over a plane of textured red with the Klogs logo glowing above, the promotional text to the right. Also, there are several twinkles placed at various parts of the image to add just a bit more richness.

The graphic was designed using Adobe Photoshop and uses lifestyle product shots, the Klogs logo, a textured gradient background and several shine, glare and twinkle brushes.

Still Time for Summer Savings promotional graphic for Healthy Feet Store

Still Time for Summer Savings is a promotional graphic and flash banner set that makes use of a quirky stock image to make the point that Healthy Feet Store is offering a sale while playing on the fact that Labor Day is the unofficial end of summer, the day of the sale. The promotional graphic was designed using Adobe Photoshop.

The flash banner was designed using Adobe Flash and uses a change in color to make the subject more apparent before fading in the text.

Is Your Kid a KidZerts Kid? cross-promotional graphic for HFS and KidZerts

KidZerts Kid Sidebar Image for Healthy Feet Store and KidZerts

The Is Your Kid a KidZerts Kid is a cross-promotional graphic series commissioned by Healthy Feet Store and KidZerts to announce their video contest that offers over $100 in prizes. The main graphic was sent out in an Email Blast while the secondary graphics were used to promote the competition on the websites.

The graphics were designed using Adobe Photoshop and make use of a product shot of the KidZerts insoles taken in-house as well as a stock image of a hand holding a video camera. The secondary graphics were created using Adobe Photoshop and the main graphic’s art assets.

Sizzling Summer promotional graphic for Healthy Feet Store

The Sizzling Summer promotional graphic and flash banner was designed to give a fresh but hot invitation to some summer savings at Healthy Feet Store. Using yellows, oranges, and reds give the feeling of warmth and excitement while the flowers add a feminine, calming touch. Also added was a glowing sun effect that adds to the warmth of the graphic.

The promotional graphic was designed using Adobe Photoshop and makes use of a stock image for the background. The flash banner was created in Adobe Flash and uses the promotional graphic for it’s artwork.