By Richard Wootton
November 2008
This is part of the How did they build it …? series of interviews.
This is an email interview with LogicSpectrum who have created these two sites:
http://www.germanera.com
http://www.logicspectrum.com
Introduction:
- Q. Hello, thank you for taking the time to join us. How are you?
- A. Very well thank you. I appreciate your time and interest in our projects and implementations of DNN.
Q. Could you start by explaining who you are, what you do and your background with DotNetNuke?
- A. We are a small software development company, which has experience in various areas of the Information Technology spectrum. Over the last five years we have used DotNetNuke framework primarily for our web projects, and so far we find it adequate and able to fulfil most of our clients needs.
Q. Why do you use DotNetNuke for designing your websites?
- A. The answer is simple – the framework. The capability to have different functionality that is secured, easily managed, and heavily customizable is what we find most important and valuable about DNN. The ability to plug in functionality, advanced skinning capabilities, and the fact that DNN is the most advanced and supported open source content management framework on the Microsoft platform, are the major reasons why DNN is the preferred choice for us.
Q. What is the background on these websites, what are their purpose / use and what history is behind them?
- A. LogicSpectrum.com: This is our company main web site. The design idea behind it was to create a simple and elegant web site that will provide the most important information to our current and future clients. The web site uses very few third party modules and focuses on simplicity and clarity of presentation.
- GermanEra.com: This is a project focused on the German car industry. It’s primarily a blog at this point, but we envision it to evolve to a full-featured web site in the future with forums, custom functionality, etc. The site uses very interesting templates for the News Articles modules, which we believe, are very well designed and quite unique. We also believe the site offers a very professional look and feel accomplished with very few modules and quite negligible investments. The main purpose of the site is to provide news and information about the latest in German car industry.
Design:
- Q. What research and planning did you have to do before you began creating the websites?
- A. We have done quite an extensive research for our company web site on what kind of information must be communicated to the user, how to present this information, and the location where each piece of the information will be most effective. The main page was obviously our main focus and we wanted it to be simple and show the key content in key places. We did some extensive research regarding the layout of main pages in the industry, what and where is recommended to place different types of content (like “Who we are” for example) and what information overall is advised to be placed on the main company web page. We believe the research paid off and we have reached a good balance between graphic design/layout and amount of information.
Q. Did you have to strike a balance between good looks and usability / accessibility?
- A. Absolutely. This is something that every web site project goes through in efforts to find the answer to the question - Where is the middle ground between a great design and optimal usability? We believe through our research and development process we were able to accomplish an elegant design with easy to use layouts. This is especially true for our company web site. One of our main goals was to present only the most necessary information on the main page so that the page looks simple and easy to navigate.
Q. Where do you start when first creating the skins?
- A. The process usually starts with looking for the right layout and browsing hundreds of websites/templates built with similar message and content. This combined with our own ideas of how the layout should be plus the customer vision of the end design gives us a very extensive platform to choose from and to start our prototypes. The start of every skin for us means going through dozens of various initial skin proposals.
Q. What research do you need to make before you begin creating the skins?
- A. Our main research initially is focused on what message the client is trying to send to the user. What industry the project/skin is in and how simple or complex the most visited websites in this particular industry are. This gives us a good initial set of guidelines to start our skin development. Obviously the client vision is our main guideline, but before we begin designing a skin we want to make sure that we have a set of standards related to the industry, main competitors (in terms of design), and your own vision of how to make the skin unique and relevant.
Q. Did any other sites influence your design?
- A. Yes. The skin development these days is so widespread and the variations of every single layout are so many that almost every skin today can be compared and found similar to another. With our skin designs we strive to be unique and professional. We do a lot of research regarding the most visited web sites, their layout and how they approach the user. In order to provide a good and relevant skin to the industry you need to be aware and very much up to date with your competition, the industry defacto standards, and the new influences.
Q. In the initial design stages of the skins, how did you decide on the layout, and colour scheme?
- A. Layout and colour scheme are dependant mainly on the industry and the message the client wants to convey to the user. Based on the initial requirements we have regarding a skin we tend to use layout and colours that are proven to be effective in the particular area that the web site is trying to establish itself. There are various occasions where non traditional layouts and colours need to be employed based on the clients ideas, our vision, and the constant quest to achieve a unique look and feel for the overall skin.
Q. What software did you use and why?
- A. Designing a skin is mainly done in Photoshop and skin layouts are kept in PSD files for easy modifications and updates. Photoshop is a tool that hardly needs any introduction and is renowned as the defacto standard for image editing and skin layout design throughout the DNN Community and overall graphic design industry. We also use Microsoft Visual Studio for HTML/CSS editing and for its nice IntelliSense (which proves to be invaluable when it comes to locating appropriate skin properties and methods, etc.).
Flash:
- Q. Why did you decide to use flash on the websites?
- A. Here at Logic Spectrum we have devoted significant efforts to the design, content, and technical aspect of the flash movie for your home page. One of the main purposes of using a flash movie was to attract visitor’s attention with the feel of a dynamic website in order to present the potential client with the quick 5-second overview of what the company does and the benefits a client can get from using Logic Spectrum.
- We feel that we have created just the right balance between the length of the flash movie, the information being presented in the movie, and the download size. With the small overall size of the flash movie, it will take about 5-7 seconds to load on the slowest of internet connection speeds – dialup. As a part of the flash movie, we also provide the information as to the percentage of the movie being downloaded overtime to set our visitor’s expectations correctly.
- Most importantly, while the flash movie is loading, the rest of the page is available for the visitors to see and explore – they have a quick rundown of the company, news, services we have to offer, and the company credentials. Even in cases with the 15% of internet users that do not have a flash plug-in installed, we believe the impact of them not being able to watch the flash movie is minimal as all this information is available right on our site.
Q. Do you have any comments or tips with regards to using flash in websites?
- A. There are many pros and cons of using flash on the website, and certainly many factors (such as download time, flash plug-in availability on the visitors’ browsers, etc.) need to be taken into consideration before giving flash a go. More importantly, a special attention must be paid to the content of the flash movie in the efforts to identify whether the flash will help you communicate your message to the end user or just eat up user’s time on your site with pretty effects and no substantial meaning.
- Our advice to the website designers that consider using flash is to sit back and ask themselves why they want to use flash and list out all the additional benefits they gain over using just html to communicate their message. Then, compare these additional benefits to the potential users your flash may not be able to reach either due to the longer download time or flash plug-in availability. At this point they will be able to make a more informed decision on whether or not using flash on the sites is absolutely essential.
Menu:
- Q. On the Logic Spectrum site, why did you decide to hide the search box within the menu bar?
- A. We discussed this on various occasions and we decided that in order to simplify the overall site design we needed to come up with a different position for the search box. We envisioned a menu without sub menus and with a simple client login on the right side of it. Based on this, we decided to provide users with the icon for search that will make the search box visible upon a user click. This saved some space on the top menu stripe and also made the skin of the site a little bit more unique. This decision also gave us a little bit more space we could use for the DNN register Control.
Modules:
- Q. Which modules have you used on the websites?
- A. The DNN installation itself comes with a variety of modules, many of which we utilise on our site. In addition, we have purchased several additional modules to fill in the gap in the existing default functionality of the DNN site.
- LogicSpectrum.com Modules:
- User Maintenance Module
News Articles Module
Feedback Module
Search Module
Links Module
Text/HTML Module
- GermanEra.com Modules:
- User Maintenance Module
News Articles Module
Photo Gallery Module
Ultra Flash Player Module
Feedback Module
Search Module
Text/HTML Module
Q. Did you have to make any adjustments to the modules for them to work as you wanted?
- A. We made a lot of modifications to some of the modules, but mostly to make them look the way we wanted rather than provide the desired functionality. Some of the best modules we purchased are News Articles and Photo Gallery – all built by the former core DNN developer Scott McCulloch, who is excellent when it comes to providing dynamic and customizable functionality with his modules. The look and feel (or the skin) of the module is what we focused on making changes to.
- As a matter of fact, once we customized the templates for News Articles Module, we received numerous inquiries asking us how we were able to achieve this look and feel. Our next step is to satisfy users’ demands for a customizable look and feel for the popular modules. We are planning to release a set of skin packages for these modules, which is coming in the near future.
Content:
- Q. How did you decide on the page structure that you’ve created, what factors affected your decision?
- A. The first step to creating any type of website, either business or personal, is to outline what specific content will live on the site. The site structure and design undoubtedly span from the content.
- When designing LogicSpectrum.com, our main business site, we first created the content that will be displayed on the site. From this point on, we of course did our due diligence and a fair amount of research to determine the most effective way to represent this information. We considered statistical data on the most viewed parts of the web pages along with our take on the most logical breakdown of the information. This is how we decided to break down information on LogicSpectrum.com into four major sections – Home, About Us, Services, and Contact Us. All the sections are self explanatory to any visitor of the site and provide ability for the visitor to get to the part of information he/she is looking for in under a second.
- GermanEra.com is built for the main purpose to provide relevant, fresh, and engaging content in order to keep visitors coming back to the site. The focus here is to catch visitor’s attention with the newest information, so the homepage is the most important page here. This is why we decided to divide our home page vertically into 3 sections. Statistically, the section on the page where the visitor spends most time is at the top left corner, which is why we chose to place Ultra Flash Player module that rotates our custom images pertaining to our best featured articles. Right below, you have a Video Pick followed by a Picture Gallery. The centre section of the site displays the main content of news and articles, and the right column provides users with the links to the archives should they choose to browse our older content.
Q. And to finish off, do you have any tips for the readers when creating a new website?
- A. The most important aspect to creating a successful site is building the structure and organization of your website in a way that enables your visitors to find the information they are looking for in an intuitive way with the least amount of clicks – it’s that simple. If visitors are frustrated that they are “wasting” time trying to find a certain piece of information on your site, you can be sure they will not be coming back. Only after you have ensured that you have user-friendly and intuitive site structure, you can go on addressing website design. Proper website design is also a balancing act between colours, fonts, images, videos, etc. One advice on this – do not overdo it – if there are too many things happening on the page, it makes it hard to find anything. Make sure your site has no broken link or grammatical and spelling mistakes; this really depletes the reputation of the site and the company behind it. Another important aspect to a professional website that very often gets overlooked is the cross browser compatibility. How many browser types does your website work with? Just Internet Explorer? If so, do you realize how many visitors you are losing by supporting Internet Explorer only? There is a wealth of information available on the internet that can help you with the statistical data on browser usage by type of audience; review it, and it might sway your decision to tweak your website to support other browsers.
Our advice is to test your web site with the following browsers at the minimum:
- IE 7.0
IE 6.0
Firefox (on both Windows and Mac OS)
Safari (on both Windows and Mac OS)
Opera (on both Windows and Mac OS)